Передача бритвенной формы с использованием JQuery AJAX в MVC6 с использованием встроенных функций

Я хотел бы знать, есть ли какой-либо способ отправить форму с помощью jQuery AJAX в MVC6, все еще используя функции автоматического привязки ASP.NET MVC. Я верю, что в других версиях MVC вы можете использовать jquery.unobtrusive-ajax и просто использовать

@using (Ajax.BeginForm("SaveData", new AjaxOptions(){}

Поскольку в MVC6 произошли некоторые изменения, мне интересно, как новый рекомендуемый способ сделать это, помимо выполнения обычной AJAX-почты на сервере при отправке формы. Этот смысл я бы вручную получил значения каждого поля ввода, превратил их в JSON и отправил их на контроллер, чтобы все связалось с ViewModel.

Если я использую следующий JavaScript для AJAX, любые настройки формы AJAX даже имеют значение?

$('form').submit(function () {
    $.ajax({
        type: "POST",
        url: "/Products/Create/",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
});

Ответ 1

Ajax работает одинаково, но вместо помощника @Ajax используйте новые помощники тегов MVC 6 (не забудьте ссылаться на сценарии jquery и jquery.unobtrusive-ajax).

JQuery Ненавязчивый Ajax существует в репозитории Asp.Net GitHub и может быть Bower pull.

Используя новый MVC TagHelpers, вы просто объявляете форму следующим образом:

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST">
...
</form>

Чтобы использовать AjaxOptions, существовавшие в Ajax Helper в предыдущих версиях MVC, просто добавьте эти атрибуты в тег формы следующим образом:

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#content">
...
</form>
<div id="content"></div>

Атрибуты HTML (ранее AjaxOptions), которые вы можете использовать в форме, следующие (исходный источник):

+------------------------+-----------------------------+
|      AjaxOptions       |       HTML attribute        |
+------------------------+-----------------------------+
| Confirm                | data-ajax-confirm           |
| HttpMethod             | data-ajax-method            |
| InsertionMode          | data-ajax-mode              |
| LoadingElementDuration | data-ajax-loading-duration  |
| LoadingElementId       | data-ajax-loading           |
| OnBegin                | data-ajax-begin             |
| OnComplete             | data-ajax-complete          |
| OnFailure              | data-ajax-failure           |
| OnSuccess              | data-ajax-success           |
| UpdateTargetId         | data-ajax-update            |
| Url                    | data-ajax-url               |
+------------------------+-----------------------------+

Еще одно существенное изменение - это проверка на стороне сервера, если запрос действительно является запросом AJAX. В предыдущих версиях мы просто использовали Request.IsAjaxRequest().

В MVC6 вам нужно создать простое расширение для добавления тех же опций, которые существовали в предыдущих версиях MVC (исходный источник):

/// <summary>
/// Determines whether the specified HTTP request is an AJAX request.
/// </summary>
/// 
/// <returns>
/// true if the specified HTTP request is an AJAX request; otherwise, false.
/// </returns>
/// <param name="request">The HTTP request.</param><exception cref="T:System.ArgumentNullException">The <paramref name="request"/> parameter is null (Nothing in Visual Basic).</exception>
public static bool IsAjaxRequest(this HttpRequest request)
{
  if (request == null)
    throw new ArgumentNullException("request");

  if (request.Headers != null)
    return request.Headers["X-Requested-With"] == "XMLHttpRequest";
  return false;
}

Ответ 2

Вот действительно хороший учебник YouTube по AJAX-формам, и вы можете скачать проект по этой ссылке GitHub. Он содержит скрипт, который будет использоваться для AJAX.

Образец стиля скопирован из вышеуказанного проекта:

<form asp-controller="Home1" asp-action="SaveForm" 
      data-ajax="true" 
      data-ajax-method="POST"
      data-ajax-mode="replace" 
      data-ajax-update="#content"
      data-ajax-loading  ="#divloading"
      data-ajax-success="Success"
      data-ajax-failure ="Failure">
    <div class="form-group">
        <div>  <h4>@Html.Label("Name")</h4> </div>
        <div>  @Html.TextBox("Name","",htmlAttributes:new { @class="form-control",id="Name"})</div>
    </div>
    <div class="form-group">
        <div><h4>@Html.Label("Age")</h4></div>
        <div>@Html.TextBox("Age", "", htmlAttributes: new { @class = "form-control", id ="Age" })</div>
    </div>
    <br/>
    <input type="submit" name="Submit"  class="btn btn-block btn-success" />
</form>

Ответ 3

https://github.com/Behrouz-Goudarzi/AjaxTagHelper

AjaxTagHelper

Простое решение для использования ссылок и ajax-форм с помощью Tag Helper в ядре aspnet

Сначала скопируйте класс AjaxTagHelper из папки Extensions в ваш проект.

Во-вторых, скопируйте файл AjaxTagHelper.js из папки js в wwwroot и добавьте его в свой проект.

Затем сделайте следующее: Откройте файл viewImports и добавьте следующий код

@using AjaxTagHelper.Extensions
@using AjaxTagHelper
@using AjaxTagHelper.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AjaxTagHelper

Чтобы использовать Action Ajax, добавьте следующий код вместо тега.

  <ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="@Model.Id"
                 class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete">
        Delete
    </ajax-action>

Используйте следующий код, чтобы использовать AJAX для отправки формы на сервер.

<div class="row">
    <form id="frmCreate" class="col-sm-9">
        <div class="row">
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Name" name="Name" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Family" name="Family" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter [email protected] " name="Email" class="input-group" type="email" />
            </div>
        </div>
    </form>
    <div class="col-sm-3">
        <ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate"
                     class="btn btn-sm btn-success">
            Create
        </ajax-button>
    </div>
</div>

Наконец, добавьте скрипты, которые вам нужны для просмотра, проверьте код ниже

<script>
    function SuccessCreate(data) {
        console.log(data);
        $("#tbodyPerson").append(data);


    }
    function SuccessDelete(data) {
        $("#tr" + data.id).fadeOut();
    }
</script>
<script src="~/js/AjaxHelper.js"></script>