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

Question

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

    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>

Answer 1

检查是否有效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);
        }
      });
    }

Answer 2

这是一个工作演示：

改变

<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 可以帮助 post 形成数据以采取行动）：

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";
        }

结果：

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

Submitting Ajax Forms from net5.0 MVC or Razor application

jquery

asp.net-ajax

asp.net-core