Geekly Articles each Day

ASP .NET MVC 3. habrahabr.ruにアスタリスクを付けてお気に入りに追加する例の写真としてのAjax.ActionLink

この記事では、ヘルパーメソッドAjax.ActionLink、または作成する拡張メソッドAjax.ActionImageLinkを使用して、画像付きのリンクを作成します。

手始めに、Ajax、ASP .NET MVC 3、およびそれらの共有の簡単な紹介。

AJAX （非同期JavaScriptおよびXML-「非同期JavaScriptおよびXML」）は、Webアプリケーションとの対話的なユーザーインターフェイスを構築するためのアプローチであり、Webサーバーとのブラウザーデータの「バックグラウンド」交換で構成されます。 その結果、データを更新するときにWebページが完全にリロードされず、Webアプリケーションがより高速で便利になります。

ASP .NET MVCは、 ASP .NETテクノロジーに基づいたModel-view-controller（ MVC ）テンプレートを実装するWebアプリケーションを作成するためのフレームワークです。

ASP .NET MVC 3でAJAXを使用するためのアクションメソッドがいくつかありますが、 Ajax.ActionLinkに興味があるので 、さらに詳しく説明します。

Ajax.ActionLink


Ajax.ActionLink-渡されたパラメーターに応じて形成されたリンクを返すメソッド。クリックすると、非同期リクエストがサーバーに送信され、ページのさらなる動作が決定されます。
合計で、このメソッドをオーバーロードするための12のオプションがあります-以下は、その使用のために転送できる入力パラメーターです。

MVC 3プロジェクトでAjaxの機能を使用するには、デフォルトで/ Scriptsフォルダーにある以下のファイルを含める必要があります。


問題の声明


画像の形式でリンクを作成する必要があり（この場合はアスタリスク）、クリックするとサーバーへの非同期リクエストが発生し、応答を受信すると更新されます（画像の変更、ツールチップ）：

画像

MicrosoftがAjax ActionLinkヘルパーとの連携を提供する可能性を検討した結果、 ここでは自転車なしでは十分ではないという結論に達しました 。したがって、独自のヘルパーが必要です。 始めましょう。

1.空のASP .NET MVC 3プロジェクトを作成します


画像

Viewエンジンで、Razorを指定します。

画像

2. HomeControllerを追加し、Indexメソッドを表示します


画像

ビューのマスターページとして〜/ Views / Shared / _Layout.cshtmlを選択します。

画像

それで、AjaxヘルパーのExtensionメソッドを作成する必要があります。

3.拡張メソッドAjax.ActionImageLinkを作成します


Coreフォルダーをプロジェクトルートに追加し、その中に新しい静的クラスExtensions.csを追加します

画像

拡張メソッドの作成の詳細については、 こちらをご覧ください 。

拡張メソッドの作成に直接進みます。 したがって、画像リンクの基礎として、HTMLマークアップスタイルとhabrahabr.ruスタイルを使用すると、コンテナーのコンテンツは2つの状態で表されます。
<div class="favourite"> <a class="add" title="  " href="#"></a> </div> <div class="favourite"> <a class="remove" title="  " href="#"></a> </div>


不要なものをすべて切り離すと、コンテナ（変更するオブジェクトはUpdateTargetId）がdivになり、メソッドがクラスとタイトルが変更されたリンクの形式でHTMLマークアップを返すという結論に達します。

* ここで著者は初めて考え、次のコードを使用してメソッドを拡張することなく、これらすべてを解決できることに気付きました 。
 @Ajax.ActionLink(" ", "Hello", "World", null, new AjaxOptions() { }, new { @title= Model.inFavourite? "  " : "  ", @class = Model.inFavourite? "add" : "remove" })

しかし、それは単純すぎると判断し、少し風味があり、彼は仕事を複雑にしました 。

余分なものをすべて削除します...余分なものを追加すると、コンテナ（変更するオブジェクトはUpdateTargetIdです）がdivになり、メソッドは、タイトルと画像へのパスが変更された画像を含むリンクの形式でHTMLマークアップを返します。
 <div id="favourite"> <a href="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-off.png" title="  " /> </a> </div> <div id="favourite"> <a href="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-on.png" title="  " /> </a> </div>

注：
さまざまなメソッドを使用してお気に入りにエントリを追加/削除できますが、この記事のフレームワーク内では、1つのメソッドAddOrRemoveFavouriteが使用されます。
したがって、拡張メソッドのフレームワークを以下に示します。
  public static IHtmlString ImageActionLink(this AjaxHelper helper, string actionName, bool inFavourite, AjaxOptions ajaxOptions) { }

入力パラメーターは次のとおりです。
  1. actionName-コントローラーメソッドの名前（AddOrRemoveFavourite）。
  2. inFavourite-エントリがすでにお気に入りに追加されているかどうかのサイン。
  3. ajaxOptions-クエリ実行パラメーター。

画像のHTMLマークアップを作成するには、 TagBuilderクラスを使用します 。
 var builder = new TagBuilder("img"); builder.MergeAttribute("src", String.Format("/Content/images/star-{0}.png", inFavourite ? "on" : "off")); builder.MergeAttribute("title", inFavourite ? "  " : "  ");

リンクを作成するには、標準のAjax.ActionLinkメソッドを使用します。
 var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions).ToHtmlString();

次に、リンクテキストの置換をHTML img要素のコンテンツに追加します。
 return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)));

その結果、Extensions.csクラスは次の形式を取ります。
  public static class Extensions { public static IHtmlString ImageActionLink(this AjaxHelper helper, string actionName, bool inFavourite, AjaxOptions ajaxOptions) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", String.Format("/Content/images/star-{0}.png", inFavourite ? "on" : "off")); builder.MergeAttribute("title", inFavourite ? "  " : "  "); var link = helper.ActionLink("[replaceme]", actionName, inFavourite, ajaxOptions).ToHtmlString(); return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); } }

（ @using MVC3_AjaxActionImageLink.Coreディレクティブを指定した後に）ビューに拡張メソッドへの呼び出しを追加すると、次のHTMLマークアップが生成されます。
 <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#favourite" ref="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-on.png" title="  " /> </a>

または
 <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#favourite" href="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-off.png" title="  " /> </a>

div、星の写真、ビュー内のメソッド呼び出し、およびAddOrRemoveFavouriteメソッド自体のみを追加することに変わりはありませんが、後者について詳しく説明したいと思います。

4. AddOrRemoveFavouriteメソッドをコントローラーに追加する


一般的に、非同期リクエストを処理するメソッドは、文字列、数値、JSONデータなどの値を返しますが、この場合、拡張メソッドが生成する新しい要素のHTMLマークアップを返す必要があります。 残念ながら（または幸いなことに）ASP .NET MVC 3にはサーバー側（コントローラーメソッドで）で拡張可能なメソッドを呼び出す機能がないため、コントローラーメソッドでコードを複製しないとマークアップを生成できません（そうでなければ、 MVC- DRY原則）。

ただし、コントローラーメソッドから、パーシャルビューへの呼び出しを返すことができます。これにより、拡張メソッドへの呼び出しが開始され、HTMLマークアップが返されます。

始めましょう。

4.1。 拡張メソッド呼び出しでパーシャルビューを追加する


ViewsフォルダーにPartialフォルダーを追加します。 部分的に 、 お気に入りフォルダーを追加します。
[ 部分ビューとして作成 ]を選択し、 AddOrRemoveFavourites_PartialViewという名前を指定して、ビューをお気に入りフォルダーに追加します。

画像

追加した部分ビューのコンテンツに次のディレクティブを追加します。
 @using MVC3_AjaxActionImageLink.Core @Model bool

メソッド自体の呼び出し：
 @Ajax.ImageActionLink("AddOrRemoveFavourite", (bool)Model, new AjaxOptions() { UpdateTargetId = "favourite" });

ご注意 詳細を簡素化するために、この記事のモデルはbool型の静的変数になります。

Index.cshtmlのコンテンツは、拡張メソッドPartial Viewを呼び出すようになり、次のようになります。
 @using MVC3_AjaxActionImageLink.Core @model bool @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div id="favourite"> @{ Html.RenderPartial("/Views/Partial/Favourites/AddOrRemoveFavourites_PartialView.cshtml", Model); } </div>


4.2。 AddOrRemoveFavourite非同期要求処理メソッドをコントローラーに追加し、モデルにバインドします


パーシャルビューを返すには、パスを最初のパラメーターとして渡して、PartialViewメソッドの呼び出しを指定する必要があります。 さらに、静的なbool変数を介してプリミティブな方法で状態を保存するため、モデルとして両方のビューに渡します。 HomeController.csクラスの最終バージョンを以下に示します。
  public class HomeController : Controller { public static bool inFavourite = true; public ActionResult AddOrRemoveFavourite() { if (Request.IsAjaxRequest()) { inFavourite = !inFavourite; // TODO: Add or remove favourite return PartialView("/Views/Partial/Favourites/AddOrRemoveFavourites_PartialView.cshtml", inFavourite); } return View(); } public ActionResult Index() { // TODO: Check, if row is already in favourites return View(inFavourite); } }


5.残っているものは何ですか？


最後の手順は、画像フォルダーに画像star-off.pngおよびstar-on.pngを追加すること、およびASP .NET MVC 3でAJAXを操作するスクリプトを接続することです。
 <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

やってみます。

画像

クリックします

画像

おわりに


画像

それで、私たちはこの記事で何をして学びましたか：


ご注意


メソッドの名前と画像の形でリンクする原則は、Stephen WaltheのContact mangerプロジェクトから取られました。

Source: https://habr.com/ru/post/J134126/

More articles:


All Articles