web-dev-qa-db-ja.com

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

MVC6でjQuery AJAXを使用し、ASP.NET MVCの自動バインド機能を引き続き使用して、フォームを送信する特定の方法があるかどうかを知りたい。 jquery.unobtrusive-ajaxを使用して、単に使用することができます

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

MVC6でいくつかの変更があったので、フォームを送信するときに通常のAJAXをサーバーに送信する以外に、これを行うための新しい推奨方法はどうなるのか疑問に思っています。各入力フィールドの値を取得し、それらをJSONに変換してコントローラーに送信し、すべてがViewModelにバインドされるようにします。

AJAX=に次のJavaScriptを使用する場合、AJAXフォーム設定は重要ですか？

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

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

JQuery Unobtrusive Ajax は、Asp.Net GitHubリポジトリに存在し、Bower pullできます。

新しい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）は次のとおりです（ 元のソース ）：

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

もう1つの重要な変更は、リクエストが実際にAJAX requestである場合にサーバー側で確認する方法です。以前のバージョンでは単に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;
}
_
67
João Pereira

これは本当に素晴らしい YouTubeチュートリアルAJAX forms で、これからプロジェクトをダウンロードできます 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
Amneu

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

AjaxTagHelper

ASPコアでタグヘルパーを使用してリンクとAJAXフォームを使用する簡単なソリューション

最初に、AjaxTagHelperクラスをExtensionsフォルダーからプロジェクトにコピーします。

次に、wwwrootのjsフォルダーからAjaxTagHelper.jsファイルをコピーし、プロジェクトに追加します。

次に、以下を実行します。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>
1
Behrouz Goudarzi