如何提交 asp.net 核心 razor 页面表单而不重新加载页面

Question

我已经尝试了我在谷歌上搜索到的所有东西，但没有成功。 我正在使用具有联系表格的单页布局。 该代码似乎正确触发并将表单值发送到页面 model 但随后重新加载页面。 预期的结果应该是，将表单值提交到页面 model 而不重新加载。 有人可以告诉我如何做到这一点吗？

页 Model

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 页面旨在自动保护免受跨站点请求伪造 (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");

以下文章供您参考：

处理 ASP.NET 核心 Razor 页面中的 Ajax 请求

并且OnPostSendEmail是 void 类型所以没有返回值，如果你想从服务器端返回一些东西并成功填写 html JsonResult的OnPostSendEmail方法可以返回你的结果。