Как отправить asp. net основные страницы бритвы без перезагрузки страницы - PullRequest
Новая
       19

Как отправить asp. net основные страницы бритвы без перезагрузки страницы

0 голосов
/ 22 апреля 2020

Я перепробовал все, что у меня есть, Google, чтобы заставить это работать без успеха. Я работаю с одним макетом страницы, который имеет контактную форму. Кажется, что код запускается правильно и отправляет значения формы в модель страницы, но затем он перезагружает страницу. Ожидаемый результат: отправьте значения формы в модель страницы без перезагрузки. Может кто-нибудь показать мне, как это сделать?

Страница модели 

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

1 Ответ

1 голос
/ 23 апреля 2020

Страницы Razor предназначены для автоматической защиты от атак подделки межсайтовых запросов (CSRF / XSRF). Поэтому первым делом нужно изменить свой ajax, чтобы он включал токен в заголовок: 

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

и настроить службу защиты от подделки для поиска заголовка X-CSRF-TOKEN: 

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

Ниже статья для справки:

Обрабатывать Ajax Запросы в ASP. NET Core Razor Pages

И OnPostSendEmail является недействительным типом, так значение не возвращается, если вы хотите вернуть что-то со стороны сервера и заполнить html в функции успеха ajax, вы можете вернуть JsonResult в методе OnPostSendEmail.

...