使用 Ajax 在 .Net Core 3 中提交表单而不刷新页面

Question

我想在不刷新页面的情况下在 .Net Core 3 MVC 中提交我的表单，但它仍然会刷新。

HTML：

<div class="form-popup" id="myForm">
    <div id="CRDone" style="display:none;">
        <i class="fa fa-check" style="color:green;" aria-hidden="true"></i>
        <br/>
        <p style="color:green;">We've recieved your request</p>
    </div>
  <form id="CRForm" method="post" asp-action="SaveContactRequest" class="form-container">
    <h1>Get in touch</h1>

    <label for="CRName"><b>Name</b></label>
    <input id="CRName" type="text" placeholder="What's your name" name="Name" required>

    <label for="CRCompany"><b>Company</b></label>
    <input id="CRCompany" type="text" placeholder="Where do you work" name="Company" required>

    <label for="CRDepartment"><b>Department</b></label>
    <input id="CRDepartment" type="text" placeholder="Enter your Department" name="Department" required>

    <label for="CRPosition"><b>Position</b></label>
    <input id="CRPosition" type="text" placeholder="Enter your Position" name="Position" required>

    <label for="CRPhone"><b>Phone Number</b></label>
    <input id="CRPhone" type="text" placeholder="Write your Mobile Number" name="Phone" required>

    <label for="CREmail"><b>Email</b></label>
    <input id="CREmail" type="text" placeholder="Write your Email" name="Email" required>

    <label for="CRMessage"><b>Message</b></label>
    <input id="CRMessage" type="text" placeholder="Write your Message" name="Message">


    <button type="submit" class="btn">Request</button>
  </form>
</div>

Javascript

    var $this = $(this);
    var frmValues = $this.serialize();
    $.ajax({
        type: $this.attr('method'),
        url: $this.attr('action'),
        data: frmValues,
        processData: false,
        contentType: false
    }).done(function (result) {
            console.log(result);
            if (result == true) {
                $("CRDone").show();
                $("CRForm").hide();
            }
            else {
               alert('an Error has occurred, please try again!');
            }

        }).fail(function (result) {
            alert('an Error has occurred, please try again');
        });
          });

控制器

[HttpPost]
        public async Task<bool> SaveContactRequest(ContactRequest request)
        {
            return await request.SaveRequest();
        }

我还尝试为按钮创建 onclick 函数而不是表单提交，并尝试从按钮事件调用该函数，所有这些都倾向于更改页面并在空白页面中显示真假字。

Answer 1

您需要防止提交表单“非ajax”

这可能很简单

<form id="CRForm" method="post" onsubmit="return false;"

或者你可以使用 jquery 尝试：

 $(document).on('submit', '#CRForm', function(e){
   e.preventDefault();
   return false;
  });

不使用按钮 type="submit" 也有帮助
也许只是使用一个跨度

<span class="btn">Request</span>

根据您的代码更新：

$("#CRForm").on("submit", function (event) {
    event.preventDefault();
    var $this = $(this);
    ...