Asp.net-core-razor-tag-helpers

提供：Dev Guides
移動先:案内、検索

ASP.NET Core-Razor Tag Helpers

タグヘルパーにより、サーバー側のコードは、Razorファイル内のHTML要素の作成とレンダリングに参加できます。 タグヘルパーは新機能であり、HTMLのレンダリングに役立つHTMLヘルパーに似ています。

  • フォーム、リンクの作成、アセットの読み込みなどの一般的なタスクのための多くのビルトインタグヘルパーがあります。 タグヘルパーはC＃で作成され、要素名、属性名、または親タグに基づいてHTML要素をターゲットにします。
  • たとえば、LabelTagHelper属性が適用されている場合、組み込みのLabelTagHelperはHTML <label>要素をターゲットにできます。
  • HTMLヘルパーに精通している場合、タグヘルパーは、RazorビューでのHTMLとC＃間の明示的な移行を減らします。

タグヘルパーを使用するには、NuGetライブラリをインストールし、これらのタグヘルパーを使用するビューにaddTagHelperディレクティブを追加する必要があります。 ソリューションエクスプローラーでプロジェクトを右クリックし、[NuGetパッケージの管理…​]を選択します。

NuGetパッケージの管理 

*Microsoft.AspNet.Mvc.TagHelpers* を検索し、[インストール]ボタンをクリックします。

次のプレビューダイアログボックスが表示されます。

プレビューダイアログボックス

OKボタンをクリックしてください。

ライセンス受け入れ 

*I Accept* ボタンをクリックします。 Microsoft.AspNet.Mvc.TagHelpersがインストールされたら、project.jsonファイルに移動します。
{
   "version": "1.0.0-*",
   "compilationOptions": {
      "emitEntryPoint": true
   },

   "dependencies": {
      "Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
      "Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final",
      "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
      "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
      "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
      "EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final",
      "EntityFramework.Commands": "7.0.0-rc1-final",
      "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final"
   },

   "commands": {
      "web": "Microsoft.AspNet.Server.Kestrel",
      "ef": "EntityFramework.Commands"
   },

   "frameworks": {
      "dnx451": { },
      "dnxcore50": { }
   },

   "exclude": [
      "wwwroot",
      "node_modules"
   ],

   "publishExclude": [
      "**.user",
      "**.vspscc"
   ]
}

依存関係セクションでは、 "Microsoft.AspNet.Mvc.TagHelpers"： "6.0.0-rc1-final" が追加されていることがわかります。

  • 誰でもタグヘルパーを作成できるようになったので、必要なタグヘルパーを考えることができれば、独自のタグヘルパーを作成できます。
  • アプリケーションプロジェクト内に直接配置できますが、Razorビューエンジンにタグヘルパーについて通知する必要があります。
  • デフォルトでは、これらのタグヘルパーはHTMLに溶け込んでいるように見えますが、クライアントに表示されるだけではありません。
  • Razorは、コードを呼び出してタグヘルパーを処理します。 HTMLから自分自身を削除したり、追加のHTMLを追加したりできます。
  • タグヘルパーでできることはたくさんありますが、Razorがマークアップでこれらのタグヘルパーを見つけてできるようにするには、タグヘルパーをRazor、さらにはMicrosoftタグヘルパーに登録する必要があります。タグヘルパーを処理するコードを呼び出します。
  • そのためのディレクティブはaddTagHelperです。これを個別のビューに配置するか、アプリケーション全体でタグヘルパーを使用する予定がある場合は、以下に示すようにViewImportsファイル内でaddTagHelperを使用できます。
@using FirstAppDemo.Controllers
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

アセンブリ内のすべてのタグヘルパーを登録する構文は、アスタリスクコンマ（、）を使用し、次にアセンブリ名 *Microsoft.AspNet.Mvc.TagHelpers を使用します。 ここの最初の部分は型名であるため、これを使用したい場合に特定のタグヘルパーをリストできます。

ただし、このアセンブリにあるすべてのタグヘルパーを取得する場合は、アスタリスク（）*を使用できます。 タグヘルパーライブラリには多くのタグヘルパーがあります。 Indexビューを見てみましょう。 

@model HomePageViewModel
@{
   ViewBag.Title = "Home";
}
<h1>Welcome!</h1>

<table>
   @foreach (var employee in Model.Employees) {
      <tr>
         <td>
            @Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
         </td>
         <td>@employee.Name</td>
      </tr>
   }
</table>
*ActionLink* を使用して、従業員の詳細にアクセスできるURLを指すアンカータグを生成するHTMLヘルパーが既にあります。

次のプログラムに示すように、最初にホームコントローラーに詳細アクションを追加しましょう。 

public IActionResult Details(int id) {
   var context = new FirstAppDemoDbContext();
   SQLEmployeeData sqlData = new SQLEmployeeData(context);
   var model = sqlData.Get(id);

   if (model == null) {
      return RedirectToAction("Index");
   }
   return View(model);
}

次に、詳細アクションのビューを追加する必要があります。 Views→Homeフォルダーに新しいビューを作成し、Details.cshtmlを呼び出して次のコードを追加します。 

@model FirstAppDemo.Models.Employee
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>@Model.Name</title>
   </head>

   <body>
      <h1>@Model.Name</h1>
      <div>Id: @Model.Id</div>

      <div>
         @Html.ActionLink("Home", "Index")
      </div>

   </body>
</html>

アプリケーションを実行してみましょう。

Razor Tag Helpers Application Run

従業員のIDをクリックすると、詳細ビ​​ューが表示されます。

最初の従業員IDをクリックします。

最初の従業員ID

ここでタグヘルパーを使用するには、index.cshtmlファイルに次の行を追加し、HTMLヘルパーを削除します。 

<a asp-action = "Details" asp-rout-id = "@employee.Id" >Details</a>
*asp-action = "Details"* は、取得したいアクションの名前です。 受け渡したいパラメーターがある場合は、asp-routeタグヘルパーを使用できます。ここでは、asp-route-Id taghelperを使用できるようにパラメーターとしてIDを含める必要があります。

以下は、index.cshtmlファイルの完全な移植です。 

@model HomePageViewModel
@{
   ViewBag.Title = "Home";
}
<h1>Welcome!</h1>

<table>
   @foreach (var employee in Model.Employees) {
      <tr>
         <td>
            <a asp-action="Details" asp-route-id="@employee.Id" >Details</a>
         </td>
         <td>@employee.Name</td>
      </tr>
   }
</table>

アプリケーションを再度実行してみましょう。 アプリケーションを実行すると、次のページが表示されます。

従業員の詳細

以前は、リンクテキストとしてIDを表示していましたが、現在はテキストの詳細を表示しています。 ここで、詳細をクリックして、HTMLヘルパーの代わりにタグヘルパーを使用して正しいURLを作成しています。

Html Helpers Tag

  • HTMLヘルパー*または*タグヘルパー*のどちらを使用する場合でも、実際には個人の好みの問題です。 多くの開発者は、タグヘルパーの作成と保守が簡単であると感じています。
「https://www.finddevguides.com/index.php?title=Asp.net-core-razor-tag-helpers&oldid=1649」から取得
Powered by MediaWiki