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

Question

I Want to submit my form in .Net Core 3 MVC without refreshing the page, but it still refreshes.

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');
        });
          });

Controller

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

I've also tried to make the function onclick for the button instead of form submit and tried to call the function from button events, all tends to change the page and shows true or false word in a blank white page.

Answer 1

you need to prevent submitting the form "non-ajax"

this could be as simple as

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

or you could use jquery try:

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

it could also help to just not use a button type="submit"
maybe just use a span

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

update according to your code:

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