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

【问题标题】：How to submit asp.net core razor pages form without reloading page如何在不重新加载页面的情况下提交 asp.net core razor pages 表单
【发布时间】：2020-08-05 22:42:36
【问题描述】：

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

页面模型

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

【问题讨论】：

标签： javascript asp.net asp.net-core razor-pages

【解决方案1】：

Razor 页面旨在自动防止跨站点请求伪造 (CSRF/XSRF) 攻击。所以第一件事是修改你的 ajax 以在 header 中包含令牌：

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

并配置防伪服务以查找 X-CSRF-TOKEN 标头：

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

以下文章供您参考：

Handle Ajax Requests in ASP.NET Core Razor Pages

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

【讨论】：