अंतर्निहित कार्यक्षमता का उपयोग कर एमवीसी 6 में JQuery AJAX का उपयोग करके एक रेजर फॉर्म सबमिट करना

Question

मैं जानना चाहता हूं कि एमवीसी 6 में jQuery AJAX का उपयोग करके फ़ॉर्म सबमिट करने का कोई विशिष्ट तरीका है, फिर भी एएसपी.नेट एमवीसी की ऑटो बाइंडिंग सुविधाओं का उपयोग करना । मैं MVC के अन्य संस्करणों में लगता है कि आप jquery.unobtrusive-ajax इस्तेमाल कर सकते हैं और बस

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

का उपयोग के बाद से वहाँ एक सामान्य कर के अलावा मैं सोच रहा हूँ क्या यह करने के लिए नए सिफारिश तरीका होगा MVC6 साथ कुछ परिवर्तन किया गया है प्रपत्र जमा होने पर सर्वर पर AJAX पोस्ट। इसका अर्थ है कि मैं मैन्युअल रूप से प्रत्येक इनपुट फ़ील्ड के मान प्राप्त करूंगा, उन्हें JSON में बदलूंगा और उन्हें नियंत्रक को भेज दूंगा ताकि सब कुछ ViewModel से बाध्य हो जाए।

यदि मैं AJAX के लिए निम्न जावास्क्रिप्ट का उपयोग करता हूं तो AJAX फ़ॉर्म सेटिंग्स में से कोई भी कार्य करता है?

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

Answer 1

अजाक्स उसी तरह काम करता है, लेकिन @Ajax सहायक के के बजाय, नए MVC 6 टैग सहायकों का उपयोग करें (मत भूलना संदर्भ के लिए 'jQuery' और 'jquery.unobtrusive-ajax' स्क्रिप्ट)।

JQuery Unobtrusive Ajax Asp.Net GitHub रेपो में मौजूद है और बोवर खींच लिया जा सकता है।

नई MVC TagHelpers का उपयोग करना, आप बस की तरह प्रपत्र की घोषणा के बाद:

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

AjaxOptions कि पिछले 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> 

एचटीएमएल विशेषताओं (पूर्व AjaxOptions) जिसे आपने फ़ॉर्म में उपयोग कर सकते हैं (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    | 
+------------------------+-----------------------------+ 

एक अन्य महत्वपूर्ण परिवर्तन है आप कैसे सर्वर साइड पर जाँच करता है, तो अनुरोध वास्तव में एक AJAX अनुरोध है। पिछले संस्करणों पर हमने बस Request.IsAjaxRequest() का उपयोग किया था।

MVC6 पर, आप एक ही विकल्प है कि पिछले 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

यहाँ एक वास्तव में अच्छा YouTube tutorial on AJAX forms है, और आप इस से परियोजना डाउनलोड कर सकते हैं GitHub link। इसमें 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>