ASP.NET MVC-カミソリ

この章では、ASP.NET MVCアプリケーションのRazorビューエンジンと、Razorが存在する理由のいくつかを見ていきます。 Razorは、C＃およびVB.Netを使用してサーバーベースのコードをWebページに埋め込むことができるマークアップ構文です。それはプログラミング言語ではありません。サーバー側のマークアップ言語です。

Razorは汎用テンプレートエンジンであるため、RazorはASP.NET MVCとは関係がありません。どこでも使用して、HTMLなどの出力を生成できます。 ASP.NET MVCが、MVCアプリケーション内でRazorを使用してHTMLを生成できるビューエンジンを実装しているだけです。

ビューエンジン

リテラルテキストとコードブロックが混在したテンプレートファイルが作成されます。そのテンプレートをデータまたは特定のモデルと組み合わせて、テンプレートでデータの表示場所を指定し、テンプレートを実行して出力を生成します。

カミソリ対ASPX

Razorは、ASPXファイルの動作に非常によく似ています。 ASPXファイルは、リテラルテキストと、データを表示する場所を指定するC＃コードを含むテンプレートです。これらを実行して、アプリケーションのHTMLを生成します。
ASPXファイルは、それらのASPXファイルを解析および実行するために使用できるように、ASP.NETランタイムに依存しています。 Razorにはそのような依存関係はありません。
ASPXファイルとは異なり、Razorにはいくつかの異なる設計目標があります。

目標

Microsoftは、Razorの使いやすさと習得を容易にし、Visual Studioなどのツールの内部で作業してIntelliSenseを使用可能にし、デバッガーを使用できるようにしたいと考えていましたが、RazorにはASP.NETやASP.NET MVC。

ASPXファイルのライフサイクルに精通している場合は、ASP.NETランタイムに依存してこれらのASPXファイルを解析および実行できることをご存じでしょう。 Microsoftは、開発者の仕事をより簡単にするために、Razorをスマートにしたいと考えていました。

いくつかのリテラルテキストを含むASPXファイルのサンプルコードを見てみましょう。これがHTMLマークアップです。また、C＃コードも少し含まれています。

<% foreach (var item in Model) { %>
   <tr>
      <td>
         <%: Html.ActionLink("Edit", "Edit", new { id = item.ID })%> |
         <%: Html.ActionLink("Details", "Details", new { id = item.ID }) %>|
         <%: Html.ActionLink("Delete", "Delete", new { id = item.ID })%>
      </td>

      <td>
         <%: item.Name %>
      </td>

      <td>
         <%: String.Format("{0,g}", item.JoiningDate) %>
      </td>

   </tr>
<%}%>

しかし、これらのWebフォームは基本的にMicrosoftによってMVCの以前のリリースで動作するように再利用されたため、ASPXファイルはMVCに完全に一致することはありませんでした。

C＃コードからHTMLに、またHTMLコードからC＃コードに戻す必要がある場合、構文は少し不格好です。また、IntelliSenseによって、MVCプロジェクトでは意味をなさないことを実行するように求められます。たとえば、出力キャッシュのディレクティブやユーザーコントロールをASPXビューに追加するなどです。

次に、同じ出力を生成するこのコードを見てください。違いは、Razor構文を使用していることです。

@foreach (var item in Model) {
   <tr>
      <td>
         @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
         @Html.ActionLink("Details", "Details", new { id = item.ID }) |
         @Html.ActionLink("Delete", "Delete", new { id = item.ID })
      </td>

      <td>
         @item.Name
      </td>

      <td>
         @String.Format("{0,g}", item.JoiningDate)
      </td>
   </tr>
}

Razor構文を使用すると、「@」記号を使用してC＃コードを開始できます。Razor解析は、このステートメント（このforeachステートメント）をC＃コードとして自動的に解析します。

しかし、foreachステートメントが終了し、開き中かっこがあると、山かっこ記号のパーセントのように、明示的なトークンをそこに入れずにC＃コードからHTMLに移行できます。

Razorパーサーは、C＃コードとHTMLを切り替えるのに十分スマートで、ここで閉じ中括弧を配置する必要があるときにHTMLからC＃コードに切り替えます。これら2つのコードブロックを比較すると、Razorバージョンの方が読みやすく、記述しやすいことに同意すると思います。

Razorを使用してビューを作成する

新しいASP.Net MVCプロジェクトを作成しましょう。

Razor MVCプロジェクト

名前フィールドにプロジェクトの名前を入力し、[OK]をクリックします。

project_name

シンプルにするには、[空]オプションを選択し、[フォルダーとコア参照の追加]セクションの[MVC]チェックボックスをオンにして、[OK]をクリックします。最小限の定義済みコンテンツで基本的なMVCプロジェクトを作成します。

Visual Studioでプロジェクトを作成すると、ソリューションエクスプローラーウィンドウに多数のファイルとフォルダーが表示されます。空のプロジェクトテンプレートからASP.Net MVCプロジェクトを作成したため、現時点ではアプリケーションには実行するものが含まれていません。空のアプリケーションから始めて、単一のコントローラーさえ持っていないので、HomeControllerを追加しましょう。

コントローラーを追加するには、ソリューションエクスプローラーでコントローラーフォルダーを右クリックし、[追加]→[コントローラー]を選択します。 [足場の追加]ダイアログが表示されます。

Razor Controller Folder

*MVC 5 Controller – Empty* オプションを選択し、Addボタンをクリックすると、Add Controllerダイアログが表示されます。

HomeController

名前をHomeControllerに設定し、[追加]ボタンをクリックします。 Controllersフォルダーに新しいC＃ファイル「HomeController.cs」が表示されます。このフォルダーはVisual Studioでも編集用に開かれています。

Visual Studioでの編集

インデックスアクションを右クリックし、[ビューの追加…]を選択します

インデックスアクションビューの追加

[テンプレート]ドロップダウンから[空]を選択し、[追加]ボタンをクリックします。 Visual Studioは、 View/Home フォルダー内にIndex.cshtmlファイルを作成します。

Create Index.cshtml

Razorビューにはcshtml拡張があります。 Visual Basicを使用してMVCアプリケーションを構築する場合、VBHTML拡張機能になります。このファイルの上部には、このレイアウトプロパティを明示的にnullに設定しているコードブロックがあります。

このアプリケーションを実行すると、空のテンプレートからビューを作成したため、空のWebページが表示されます。

空白のWebページ

物事をより面白くするために、いくつかのC＃コードを追加しましょう。 Razorビュー内にC＃コードを記述するために最初に行うことは、コードで何かを実行することをパーサーに伝える「@」記号を入力することです。

中括弧内に「@i」を指定するFORループを作成してみましょう。これは基本的に、Razorにiの値を入力するよう指示しています。

@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width"/>
      <title>Index</title>
   </head>

   <body>
      <div>
         @for (int index = 0; index < 12; index++){
            <div>@index </div>
         }
      </div>
   </body>

</html>

このアプリケーションを実行すると、次の出力が表示されます。

カミソリ出力

Asp.net-mvc-razor

ASP.NET MVC-カミソリ

カミソリ対ASPX

目標

Razorを使用してビューを作成する

目次