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

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

我有一个处理使用视图模型的表单的工作控制器。我能够对 razor 或 View 页面进行编程以使用 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>

解决方法

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

,

这是一个工作演示：

改变

<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,error) {
                    alert(error);
                }
            });
        }

动作：

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

结果：