使用 Ajax 表单调用更新网站的一部分答案

【问题标题】：Update portion of the website using Ajax form call使用 Ajax 表单调用更新网站的一部分
【发布时间】：2019-09-27 00:07:43
【问题描述】：

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

那是我的 _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>

【问题讨论】：

你确定它不为空吗？你是否在Layout 页面中设置了断点，如果？
@jpgrassi 我在 if 和 else 语句中都设置了断点。当我执行帖子时，它们根本没有被击中（我做了 2 个帖子请求）。但是，在使用 Ctrl + F5 完成上述操作后刷新页面时，我看到了“此处错误”。断点然后被击中
是的，这是我的怀疑。由于这是一个 XHR 请求，因此不会重新加载页面，因此您的布局页面永远不会执行。恐怕您需要处理 activateShareButtons 中的错误并以某种方式显示错误。
没关系。谢谢你确认。我会做我能做的:)

标签： asp.net ajax asp.net-core asp.net-ajax

【解决方案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 调用服务器端函数，并根据响应您可以直接显示/修改以上区域：

$(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 调用。这可能吗？
@GeorgiKoemdzhiev ，您的提交按钮是html按钮，例如：？然后只需将ajax代码移动到postdata javscript函数
谢谢！我想这个方法会“劫持”表单原来的 post 方法（即 post 不会被执行两次？）
@GeorgiKoemdzhiev 你是用Ajax来发布数据的，[form's submit ](docs.microsoft.com/en-us/aspnet/core/mvc/views/…)没有，那为什么会触发两次呢？
@GeorgiKoemdzhiev 是的，带有表单标签，它会提交并刷新整个页面，但不会发生在 ajax 帖子中：)