如何在不重新加载页面的情况下提交 asp.net core razor pages 表单

Question

我已经尝试了我在谷歌上搜索过的所有方法，但都没有成功。我正在使用具有联系表的单页布局。该代码似乎正确触发并将表单值发送到页面模型，但随后它重新加载了页面。预期的结果应该是，将表单值提交给页面模型而不重新加载。谁能告诉我怎么做？

页面模型

public class IndexModel : PageModel
{
    [BindProperty]
    public ContactModel Contact { get; set; }

    public void OnGet()
    {

    }

    public void OnPostSendEmail()
    {
        if (ModelState.IsValid == false)
        {

        }
        else
        {

        }
    }
}

表格

<form method="post" role="form" class="email-form">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="name">Your Name</label>
            <input type="text" asp-for="Contact.Name" value="Gekko" name="name" class="form-control" id="name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
            <div class="validate"></div>
        </div>
        <div class="form-group col-md-6">
            <label for="name">Your Email</label>
            <input type="email" asp-for="Contact.Email" value="someone@email.com" class="form-control" name="email" id="email" data-rule="email" data-msg="Please enter a valid email" />
            <div class="validate"></div>
        </div>
    </div>
    <div class="form-group">
        <label for="name">Subject</label>
        <input type="text" asp-for="Contact.Subject" value="Work" class="form-control" name="subject" id="subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
        <div class="validate"></div>
    </div>
    <div class="form-group">
        <label for="name">Message</label>
        <textarea class="form-control" asp-for="Contact.Message" name="message" rows="10" data-rule="required" data-msg="Please write something for us"></textarea>
        <div class="validate"></div>
    </div>
    <div class="mb-3">
        <div class="loading">Loading</div>
        <div class="error-message"></div>
        <div class="sent-message">Your message has been sent. Thank you!</div>
    </div>
    <div class="text-center"><button id="submit">Send Message</button></div>
</form>

Javascript

$('form.email-form').submit(function (e) {
    e.preventDefault();

    ...some form validation

    $.ajax({
    type: "POST",
    url: '/index?handler=SendEmail',
    data: str,
    success: function(msg) {
    if (msg == 'OK') {
      this_form.find('.loading').slideUp();
      this_form.find('.sent-message').slideDown();
      this_form.find("input:not(input[type=submit]), textarea").val('');
    } else {
      this_form.find('.loading').slideUp();
      this_form.find('.error-message').slideDown().html(msg);
    }
  }
});

Answer 1

Razor 页面旨在自动保护免受 cross-site 请求伪造 (CSRF/XSRF) 攻击。所以第一件事是修改你的 ajax 以在 header:

中包含令牌

beforeSend: function (xhr) {
    xhr.setRequestHeader("XSRF-TOKEN",
        $('input:hidden[name="__RequestVerificationToken"]').val());
},

并配置防伪服务以查找 X-CSRF-TOKEN header :

services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

以下文章供您参考:

Handle Ajax Requests in ASP.NET Core Razor Pages

而OnPostSendEmail是void类型所以没有值returned，如果你想从服务器端return一些东西并在[=的成功函数中填充html 30=] ，你可以在 OnPostSendEmail 方法中 return JsonResult

如何在不重新加载页面的情况下提交 asp.net core razor pages 表单

How to submit asp.net core razor pages form without reloading page

javascript

asp.net

asp.net-core

razor-pages