使用 Ajax 表单调用更新网站部分

Question

我试图在使用 Ajax 执行 POST 表单请求时出现错误时显示错误消息（我不希望页面刷新）。然而，下面的代码没有改变——它仍然显示 "NO ERRORS" 尽管 TempData["Error] 变量不为空（它在控制器的操作中设置）。我做错了什么？

那是我的 _Layout.cshtml（我希望能够在每个页面上显示此错误消息）

<!DOCTYPE html>
<html>
@*@RenderBody()*@
<head>
</head>
<body>

<div id="divEmp">

    @if (TempData["Error"] != null)
    {
        <div class="alert alert-danger" role="alert">"Error here"</div>
    }
    else
    {
        <div class="alert alert-success" role="alert">NO ERRORS</div>
    }

</div>

@RenderSection("BodyFill", false)
@RenderBody()
@RenderSection("Scripts", required: false)
</body>
</html>

那是我的控制器

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult ShareWorkbook(string emails, string title, string id, string queryBuilderId)
{   
    TempData["Error"] = Res.System_Error_Message;
    return NoContent();
}

这是我的表单（它位于局部视图中并在运行时注入主页）

@using DNAAnalysisCore.Resources
@model DNAAnalysisCore.Models.WorkbookShareModel
@* Partial view that contains the 'Share Workbook dialog' modal *@

<!-- Modal -->
<div onclick="activateShareButtons()" class="modal fade" id="shareFormModal" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Share Workbook - @Model.Title</h4>

            </div>

            <form id="partialform" asp-action="ShareWorkbook" asp-controller="Home" method="post" data-ajax="true" data-ajax-update="divEmp">
                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                    <button onclick="hideDialog()" type="submit" class="btn btn-primary">Share</button>
                    <button onclick="activateShareButtons()" id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

您可以在 Ajax 的回调函数中使用 javascript 直接修改 HTML 标记。我假设您的 _Layout.cshtml :

<div id="divEmp">
    <div id="showError" style="display:none;"  class="alert alert-danger" role="alert">"Error here"</div>
    <div id="noError" style="display:none;" class="alert alert-success" role="alert">NO ERRORS</div>
</div>

在您的页面中，您将使用 ajax 调用服务器端功能，并且根据响应，您可以直接 show/modify 上面的区域 :

$(function () {
  $.ajax({
      type: "POST",
      url: '/Home/GetJobData',
      contentType: 'application/json; charset=utf-8',
      success: function (response) {

          if (response.success) {
              $("#showError").hide();
              $("#noError").show();
          }
          else {
              $("#showError").show();
              $("#noError").hide();
              $("#showError").text(response.responseText);
          }
      },
      error: function (response) {
          alert("error!");
      }
  });
})

服务器端函数：

public IActionResult GetJobData()
{
    var isFileSupported = true;
    if (!isFileSupported)
    {
        //  Send "false"
        return Json(new { success = false, responseText = "Your operation fail !" });
    }
    else
    {
        //  Send "Success"
        return Json(new { success = true, responseText = "Your operation Success !" });
    }
}

使用 Ajax 表单调用更新网站部分

Update portion of the website using Ajax form call

asp.net

ajax

asp.net-ajax

asp.net-core