从 net5.0 MVC 或 Razor 应用程序提交 Ajax 表单答案

【问题标题】：Submitting Ajax Forms from net5.0 MVC or Razor application从 net5.0 MVC 或 Razor 应用程序提交 Ajax 表单
【发布时间】：2021-07-28 06:35:53
【问题描述】：

我有一个工作控制器，它处理一个使用视图模型的表单。我能够对剃刀或查看页面进行编程以使用 JQuery Ajax 提交表单，但是，看起来页面正在刷新或正在发生提交。在处理步骤之后，返回值显示在白色干净的浏览器页面上，忽略来自 Ajax 处理器的 Success 函数。如何让 Ajax 成功代码返回并正确处理，以便向用户显示适当的消息。

    function SubmitForm() {
      $.ajax({
        type: "POST",
        url: $("#myForm").attr("action"),
        success: function(msg) {
          $("#Response").html(msg);
        },
        error: function(req, status, error) {
          alert(error);
        }
      });
    }

    <div class="col-lg-8 mt-5 mt-lg-0">
      <form id="myForm" asp-controller="Contact" asp-action="Index">
        <div class="row">
          <div class="col-md-3 form-group">
            <label asp-for="FirstName" class="u-label"></label>
            <input type="text" asp-for="FirstName" class="form-control" placeholder="Your Name" required>
            <span style="color:darkgoldenrod;" asp-validation-for="FirstName"></span>
          </div>
          <div class="col-md-3 form-group">
            <label asp-for="LastName" class="u-label"></label>
            <input type="text" asp-for="LastName" class="form-control" placeholder="Your Name" required>
            <span style="color:darkgoldenrod;" asp-validation-for="LastName"></span>
          </div>
          <div class="col-md-6 form-group">
            <label asp-for="Email" class="u-label"></label>
            <input type="email" placeholder="Email" asp-for="Email" class="form-control" required>
            <span style="color:darkgoldenrod;" asp-validation-for="Email"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 form-group">
            <label asp-for="Subject" class="u-form-control-hidden u-label"></label>
            <input type="text" placeholder="Subject" asp-for="Subject" class="form-control" required>
            <span style="color:darkgoldenrod;" asp-validation-for="Subject"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 form-group">
            <label asp-for="Message" class="u-form-control-hidden u-label"></label>
            <textarea placeholder="Message" rows="5" cols="50" asp-for="Message" class="form-control" required=""></textarea>
            <span style="color:darkgoldenrod;" asp-validation-for="Message"></span>
          </div>
        </div>
        <br />
        <div class="row">
          <div class="col" style="padding:10px!important;">
            <button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>
          </div>
        </div>
      </form>
      <hr />
      <span id="Response"></span>
    </div>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

【问题讨论】：

阅读如何防止默认表单提交
你可以看这个thread看看如何防止默认的表单提交。

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

【解决方案1】：

这是一个工作演示：

改变

<button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>

到

<button onclick="SubmitForm()" class="btn btn-lg btn-info">Submit</button>

ajax（$("#myForm").serialize 可以帮助将表单数据发布到操作）：

function SubmitForm() {
            $.ajax({
                type: "POST",
                url:  $("#myForm").attr("action"),
                data: $("#myForm").serialize(),
                success: function (msg) {
                    $("#Response").html(msg);
                },
                error: function (req, status, error) {
                    alert(error);
                }
            });
        }

行动：

public string Index(ModelA m)
        {
            return "success";
        }

结果：

【讨论】：

感谢您的反馈。我的问题不是表单的内容没有被处理；他们是。我在此 Ajax 上的尝试发生的情况是，我的 Ajax 代码没有处理我的返回文本，并且我得到一个白页，其中包含来自动作控制器的返回“成功”的文本。我不知道如何解决这个问题，所以我必须使用 ViewBag 将消息传递到索引页面，让我的用户知道他们的表单已成功处理。

【解决方案2】：

检查这是否可行，了解更多preventDefault 的详细信息，请查看 https://www.w3schools.com/jsref/event_preventdefault.asp

function SubmitForm(e) {
      e.preventDefault(); //prevent default event functionality
      $.ajax({
        type: "POST",
        url: $("#myForm").attr("action"),
        success: function(msg) {
          $("#Response").html(msg);
        },
        error: function(req, status, error) {
          alert(error);
        }
      });
    }

【讨论】：