Przesyłanie formularza maszynki do golenia za pomocą JQuery AJAX w MVC6 przy użyciu wbudowanej funkcji

Question

Chciałbym wiedzieć, czy istnieje konkretny sposób przesłania formularza za pomocą jQuery AJAX w MVC6, nadal przy użyciu funkcji Auto Binding ASP.NET MVC . Wierzę w innych wersjach MVC można użyć jquery.unobtrusive-ajax i po prostu użyć

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

Ponieważ nie było pewne zmiany z MVC6 Zastanawiam się co nowy zalecany sposób to zrobić byłoby zresztą robi normalny AJAX post na serwerze po przesłaniu formularza. To oznacza, że ​​ręcznie uzyskałem wartości każdego pola wejściowego, zamieniłem je w JSON i wysłałem je do kontrolera, aby wszystko dostało się do ViewModel.

Jeśli używam następującego kodu JavaScript dla AJAX, czy jakiekolwiek ustawienie formularza AJAX ma znaczenie?

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

Answer 1

Ajax działa w ten sam sposób, ale zamiast @Ajax pomocnik, należy użyć nowych pomocników MVC 6 Tag (nie zapomnij referencyjna 'jquery' i 'jquery.unobtrusive-Ajax' scripts).

JQuery Unobtrusive Ajax istnieje w repozytorium Asp.Net GitHub i można je wyciągnąć Bower.

Korzystanie nowe TagHelpers MVC, wystarczy zadeklarować formę jak następuje:

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

Aby użyć AjaxOptions które istniały na Ajax Helper na poprzednich wersjach MVC, wystarczy dodać te atrybuty zrobić tag formularz jak to:

<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> 

atrybuty HTML (dawniej AjaxOptions), które można wykorzystać w formie, są następujące (original source):

+------------------------+-----------------------------+ 
|  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    | 
+------------------------+-----------------------------+ 

Kolejną istotną zmianą jest sposób sprawdzenia po stronie serwera, jeśli żądanie rzeczywiście jest zgłoszeniem AJAX. W poprzednich wersjach używaliśmy po prostu Request.IsAjaxRequest().

Na MVC6, trzeba stworzyć proste rozszerzenie, aby dodać te same opcje, które istniały w poprzednich wersjach MVC (original source):

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

Answer 2

tu jest naprawdę ładny YouTube tutorial on AJAX forms, a można pobrać projekt z tego GitHub link. Zawiera skrypt, który ma być używany w AJAX.

styl Próbka kopiowane z powyższego projektu:

<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>