組み込み機能を使用してMVC6でJQuery AJAXを使用してカミソリフォームを送信

Question

MVC6のjQuery AJAXを使用してフォームを送信する特定の方法があるかどうかを知りたいが、ASP.NET MVCの自動バインド機能。私はあなたがjquery.unobtrusive-AJAXを使用すると、通常のをやっ以外に、私はこれを行うための新しい推奨される方法がどうなるか疑問に思ってMVC6といくつかの変更がなされているので、単純に

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

を使用することができますMVCの他のバージョンを信じますフォームが提出されると、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" 
    }); 
}); 

Answer 1

アヤックス（「jqueryの」と「jquery.unobtrusive-アヤックス」スクリプトを参照することを忘れないでください）新しいMVC 6タグヘルパーを使用しますが、代わりに@Ajaxヘルパーさんの、同じように動作します。

JQuery Unobtrusive Ajaxは、Asp.Net GitHubレポに存在し、バウアーを引くことができます。新しいMVC TagHelpersを使用して

、あなたは、単に次のような形式を宣言：

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

以前のMVCのバージョンでのAjaxヘルパー上に存在していAjaxOptionsを使用するには、単にそれらの属性を追加するようにformタグを行いますこの：フォームで使用することができます

<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は）（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>