使用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

你需要防止提交表单“non-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);
    ...