web-dev-qa-db-ja.com

Asp.net CoreのAjaxヘルパータグのドキュメント

Asp.net CoreにAjaxヘルパータグのドキュメントへのリンクはありますか？私はasp.netコアでajaxを学ぼうとしていますが、ドキュメントが見つかりません。 asp.net mvcでは、@ Ajax.Formを使用し、次にAjaxでの作業にAjaxOptionsメソッドを使用します。何時間も検索したところ、このリンクが見つかりました。 https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/ このリンクには、asp.netコアでajaxを使用する方法があります。私はそれを自分のプロジェクトに実装し、成功しています。次に、そのドキュメントを検索しましたが、何も見つかりませんでした。ドキュメントへのリンクが欲しいのですが、ドキュメントについて誰か助けてください

c#jqueryajaxasp.net-mvcasp.net-core
8
Zeeshan Safdar

ASP.NET Coreには、_@Ajax.Form_のようなサーバー側ヘルパーはありません。同様の機能のために独自のタグヘルパーを作成することもできますが、これを行う人は見たことがありません。一般的な考え方は、クライアント側の動作が必要なときに実際のJavaScriptを記述することです。これらのことをサーバー側の魔法の背後に隠すことは、通常、最良のアイデアではありません。

_jquery-ajax-unobtrusive_ は、クライアント側の動作を追加して、最終的なレンダリングページでさまざまな属性を検索し、標準フォームの上に機能を追加するJavaScriptパッケージです。したがって、これは完全にJavaScriptベースのソリューションになります。

残念ながら、それに関する文書はないようです。 そのソースコード を見て、何が可能か、何が不可能かを理解できます。

_jquery-ajax-unobtrusive_ドキュメント

ソース（免責事項：自分で機能をテストせずに）をざっと見てみると、これはサポートされているデータ属性であり、パッケージで使用できる機能であるようです。

  • _data-ajax="true"_ –フォームの機能を有効にします。
  • _data-ajax-update_ –モードを使用して、AJAX結果で更新される要素のセレクター。
  • _data-ajax-mode_
    • _data-ajax-mode="before"_ – Prepends 要素へのデータ。
    • _data-ajax-mode="after"_ – Appends 要素へのデータ。
    • _data-ajax-mode="replace-with"_ – Replaces 要素とデータ。
    • それ以外の場合、要素の HTMLコンテンツを設定 をデータに設定します。
  • _data-ajax-confirm_ –ユーザーに表示されるメッセージ confirm フォーム送信。
  • _data-ajax-loading_ –ロード中に表示される要素のセレクター。
  • _data-ajax-loading-duration_（デフォルト：0）–ロード要素の show / hide のアニメーション期間。
  • _data-ajax-method_ – AJAXリクエストのHTTPメソッドを上書きできるようにします。
  • _data-ajax-url_ – AJAXリクエストのURLを上書きできるようにします。
  • _data-ajax-cache_ – _"true"_以外の値に設定すると、 jQuery AJAX cache parameter が無効になります。
  • _data-ajax-begin_ –リクエスト開始前のコールバック関数（引数：xhr）
  • _data-ajax-complete_ –要求が完了したときのコールバック関数（引数：xhr、status）
  • _data-ajax-success_ –リクエストが成功したときのコールバック関数（引数：data、status、xhr）
  • _data-ajax-failure_ –リクエストが失敗したときのコールバック関数（引数：xhr、status、error）

コールバック関数は、jQueryのbeforeSend、complete、success、およびfailureと同等です。外観から、関数へのJavaScriptオブジェクトパスを使用してコールバックを指定できます。

たとえば、_data-ajax-success="foo.bar.onSuccess"_は関数foo.bar.onSuccess()を呼び出します。つまり、fooでオブジェクトwindowを探し、そのbarメンバーを取得して、onSuccessを呼び出します。

25
poke

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

AjaxTagHelper

Aspnetコアでタグヘルパーを使用してリンクと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>
2
Behrouz Goudarzi