Razor-新しいASP.NETビューエンジン

私のチームが取り組んでいたプロジェクトの1つは、ASP.NETの新しいプレゼンテーションエンジンでした。



ASP.NET MVCは、常に「プレゼンテーションエンジン」の概念をサポートしており、実際には、さまざまなテンプレート構文の選択を実装する交換可能なモジュールです。 今日、ASP.NET MVCの標準プレゼンテーションエンジンは、ASP.NET Webフォームと同様のファイル-.aspx / .ascx / .masterを使用しています。 他の一般的なASP.NET MVCプレゼンテーションエンジン-SparkおよびNHamlがあります。



私たちが取り組んでいる新しいプレゼンテーションエンジンは、テンプレートコードに重点を置いてHTMLコードを生成するために最適化されています。 このエンジンのコード名は「Razor」で、最初のベータ版がまもなく利用可能になります。

開発目標

プロトタイプを開発し、Razorを評価している間に、いくつかの重要な目標を特定しました。

• コンパクトで表現力豊かで柔軟 ：Razorは、ファイルでの作業に必要な「キーボードの負荷」を軽減し、迅速で柔軟なプログラミングプロセスを提供します。 ほとんどのテンプレート構文と異なり、HTMLでサーバー側のコードブロックを明示的に定義するためにコードの書き込みを中断する必要はありません。 パーサーは、コードに基づいてこれを行うのに十分スマートです。 入力が簡単で楽しいコンパクトで表現力豊かな構文が得られます。
• 習得が簡単：Razorは習得が容易で、最小限の労力で短時間で生産性を高めることができます。 既存のプログラミング言語とHTMLスキルをすべて使用します。
• 新しい言語ではありません ：Razorの新しい命令型言語に基づいていないパスを意図的に選択しました。 代わりに、開発者が既存のスキルを使用してC＃/ VB（または別の言語）を操作できるようにし、驚くべきHTML構築プロセスを提供するテンプレートマークアップ構文を提供し、言語の選択はユーザーに任せています。
• 任意のテキストエディターで動作します。Razorは特定のツールを必要とせず、古いテキストエディターで生産性を発揮できます（メモ帳でも問題なく動作します）。
• Intellisenseのサポート ：Razorは特定のツールやコードエディターにバインドせずに設計されたという事実にもかかわらず、Visual Studioで優れたサポートを提供します。 Visual Studio 2010およびVisual Web Developer 2010は、すぐにインテリセンスの更新を受け取ります。
• ユニットテスト ：エンジンの新しい実装は、ビューでユニットテストを実行する機能をサポートします（コントローラーやWebサーバーを必要とせず、ユニットテストプロジェクトに配置できます-特別なアプリケーションドメインは不要です）

この数か月間、このテクノロジを使用してアプリケーションを開発し、.NET以外の開発者のグループを含むさまざまなボランティアでユーザビリティ調査を実施しました。 人々からのフィードバックは素晴らしかった。

選択と柔軟性

ASP.NETの最大の機能は、文字通りコードの一部を置き換えることです。 特定のメカニズムがニーズに合わない場合は、簡単に実装に置き換えることができます。



次のバージョンでは、ASP.NET MVCに新しい[追加]-> [表示]ダイアログボックスが追加され、新しいプレゼンテーションテンプレートファイルの構文を選択できるようになります。 ローカルマシンにインストールされている使用可能なプレゼンテーションエンジンを簡単に選択できます。







Razorは、ASP.NET MVCに直接統合されるため、リストに追加されます。 すべてのヘルパーメソッドとモデルは、Razorと.ASPXの両方のプレゼンテーションエンジンで使用できます。



同じアプリケーションまたはサイト内のさまざまなエンジンを使用して記述されたプレゼンテーションテンプレートを組み合わせて比較する機会があります。 たとえば、.aspxを使用していくつかのビューを作成し、.cshtmlまたは.vbhtml（それぞれC＃およびVBのRazorファイル拡張子）を使用するビューと、SparkまたはNHamlを使用するビューを作成できます。 それだけでなく、別のエンジンで記述された部分ビューを使用して、1つのエンジンでプレゼンテーションテンプレートを作成できます。 あなたはキャプテンであり、必要なものを選択します。

ハローワールドとカミソリ

Razorでは、静的HTML（または任意のテキストコンテンツ）から開始し、サーバー側のコードを追加して動的HTMLにすることができます。 Razorの主な設計目標の1つは、柔軟なコーディングプロセスを提供し、サーバー側のコードを最小限の労力でHTMLマークアップに迅速に統合することでした。



簡単な例を見るために、「hello world」の例を作成して、次のメッセージを表示してみましょう。

.ASPXコードを使用した場合の外観

ASP.NETと既存の.ASPX構文マークアップを使用して上記の「hello world」の例を構築する場合、<％=％>ブロックを使用してHTMLマークアップ内のコードの領域を定義する必要があります。







この例では、コードシーケンスの開始と終了にコードの各領域に5文字（<％=％>）が必要です。 これらの文字の一部（特に、ほとんどのキーボードの中央上部にある％キー）は簡単に入力できません。

Razor構文での外観

@記号が使用されているRazorのコード領域の先頭に注目してください。 <%%>とは異なり、Razorでは、コード領域を明示的に閉じる必要はありません。







Razorパーサーは、コードの領域でC＃/ VBを意味的に分析できるため、上記のコードブロックを明示的に閉じる必要はありません。 Razorは、上記のステートメントを個別のコード領域として定義し、暗黙的にそれらを閉じます。



このような些細な「ハローワールド」の例でも、12回の余分なキーストロークから自分を救いました。 キーボードで@文字を入力する方が、％文字を入力するよりもはるかに簡単です。

ループとネストされたHTML

製品のリスト（およびそれぞれの反対の価格）を表示する必要がある場合の別のケースを見てみましょう。

.ASPXを使用して例を作成する

ASP.NETと既存の.ASPX構文マークアップを使用して例を実装する場合、各製品の<li>要素を含む<ul>リストを動的に生成するコードが必要です。

Razorでサンプルを作成する

以下に、Razorを使用して同等のビューを生成する方法を示します。







@記号を使用してforeachループを開始し、コードブロックを含むHTMLコンテンツの行を内部に配置したことに注目してください。 Raptorパーサーはブロック内のC＃のセマンティクスを理解しているため、<li>コンテンツがforeach内にあると判断し、ループすべきコンテンツとして処理します。 また、終了を認識し}、foreachを停止します。



また、Razorは、<li>要素内の@ p.Nameおよび@ p.Price式をサーバーコードとして認識し、ループの各パスに対して実行するのに十分スマートです。 Razorは、HTMLとコードの組み合わせに基づいて、@ p.Nameおよび@ p.Priceコードの領域を自動的に閉じることに注意してください。



テンプレート全体に多くの開始ラベルと終了ラベルを追加する必要なく、この方法でコードを作成できるため、開発プロセス全体が非常に高速になります。

ifブロックと複数行の式

一般的な状況の例を次に示します。

if式

foreachの例のように、コード領域の開始/終了を明示的に指定せずに、if式（または他のC＃またはVB言語構造）内にコンテンツを配置できます。 例：

複数行の式

次のように@ { code }ブロックでラップすることにより、複数行のコードをマークできます。







変数は複数のサーバーブロックコードに分割でき、メッセージ変数は複数行ブロック@ {}で宣言され、 メッセージコードブロックでも使用されることに注意してください。 .aspxファイルの構文<%%>および<％=％>と同様です。

複雑な表現

@（）構文を使用すると、複雑な式を配置できます。 たとえば、上記のコードを書き換えて、@ブロック（コード）内で文字列と数字を連結できます。

コンテンツとコードの統合

Razorパーサーは、言語の多くの機能を知っているため、ユーザーは独自の実装に時間を費やすことなく、完全に信頼することができます。

HTMLの電子メールアドレスおよびその他の@使用と競合しますか？

Razorパーサーは、ほとんどの場合、@記号がコードで使用されているか静的コンテンツで使用されているかを判断できるほどスマートです。 たとえば、以下では、メールアドレスの一部として@記号を使用しています。







ファイルの解析中、Razorは@記号の右側のコンテンツを解析し、C＃のこの部分がコード（CSHTMLファイルの場合）かVB（VBHTMLファイルの場合）か、静的データかを判断しようとします。 上記のコードは、次のHTMLを出力します（電子メールアドレスは静的コンテンツとして表示され、@ DateTime.Nowはコードとして定義されます）。







コンテンツがコードとして有効であり、静的として表示する場合は、1つではなく2つの@@文字を指定するだけで十分です。

添付コンテンツの定義

if / else、foreach、またはその他のブロック式の中にHTMLコンテンツを配置する場合、HTMLまたはXML要素の内部コンテンツをラップして、コンテンツ領域の開始をより適切に判断する必要があります。



たとえば、以下では、複数行のコンテンツブロック（中括弧を含む）を<span>タグでラップしました。







これにより、<span>要素を含むクライアント用に次のコードが生成されます。







オプションで、ラッパータグなしでクライアント用にデータを生成する必要がある場合、埋め込みコンテンツを<text>ブロックでラップできます。







このコードは、クライアントに次のコンテンツを生成します。ラッピングタグがないことに注意してください。

HTMLコーディング

デフォルトでは、@ブロックを使用するコンテンツは、XSS攻撃に対する保護を強化するために自動的にHTMLエンコードされます。

レイアウト/ MasterPage-基本

Webサイトまたはアプリケーションのすべてのページで統一された外観を持つことが非常に重要です。 ASP.NET 2.0は、「ページマスター」の概念を導入しました。これは、.aspxページまたはテンプレートを使用するときにこの結果を達成するのに役立ちます。 Razorは、「レイアウトページ」を使用してこの概念もサポートしています。これにより、サイトテンプレートを定義し、そこからビュー/ページを継承できます。

レイアウトの最も単純な例

以下は、「SiteLayout.cshtml」という名前で保存するレイアウトページの簡単な例です。 静的なHTMLと動的なサーバーコードを含めることができます。 次に、リクエストされたURLの特定のコンテンツ本文を表示する場所に、「RenderBody（）」ヘルパーメソッドへの呼び出しを追加します。







次に、「Home.cshtml」という名前のプレゼンテーションテンプレートを作成します。このテンプレートには、要求されたページの特定の本文を作成するために必要なコードまたはコンテンツのみが含まれ、レイアウトテンプレートに基づいています。







Home.cshtmlファイルのコードで「LayoutPage」プロパティを明示的に設定する方法に注意してください。 これは、このビューのレイアウトとしてSiteLayout.cshtmlテンプレートを使用することを意味します。 Home.cshtmlをプレゼンテーションテンプレートとして指定するか、サイトの標準レイアウトでカスタマイズすることにより、ASP.NET MVCコントローラーでレイアウトファイルを直接設定することもできます（この場合、1つのプロジェクトファイルで定義し、すべてのプレゼンテーションテンプレートが自動的に選択します）



Home.cshtmlをプレゼンテーションテンプレートとして生成すると、レイアウトとサブページのコンテンツが結合され、そのコンテンツがクライアントに送信されます。

コンパクトでクリーンで表現力豊かなコード

上記のコードに注目し、ビュー/ページからのレイアウトの定義とその使用が小さいことに注意してください。 スクリーンショットのコードには、SiteLayout.cshtmlおよびHome.cshtmlファイルのすべてのコンテンツが含まれ、追加の設定やタグはありません。 ％@ Page％プレフィックスおよびその他の異なるマークアップや指定されたプロパティはありません。



私たちは、あなたが書いたコードを最もコンパクトでシンプルな形で維持しようとします。 また、誰でもサードパーティのテキストエディターでファイルを開き、コードを変更できるようにしたいと考えています。 追加のコード生成やインテリセンスは必要ありません。

レイアウト/ MasterPage-交換可能な部品を追加

ページレイアウトは、独自のコンテンツでビューを変更できるさまざまな「セクション」を内部で定義する機能をサポートしています。 これにより、レイアウトページのコンテンツの断続的なセクションを簡単に変更/入力でき、サイトのレイアウトの柔軟性が向上します。



たとえば、SiteLayout.cshtmlに戻り、ビューを変更できるレイアウト内の2つのセクションを定義できます。 これらの部分を「メニュー」および「フッター」と呼び、RenderSection（）ヘルパーにoptional = trueパラメーターを渡すことで記入がオプションであることを示します（これについては、既に説明したC＃の新しいオプションパラメーターを使用して行います）







2つのセクションは「オプション」としてマークされているため、Home.cshtmlファイルでそれらを定義する必要はありません。 私のサイトは、たとえ彼らがそこにいなくても、うまく機能し続けます。



Home.cshtmlに戻って、MenuとFooterの独自の部分を宣言しましょう。 以下のスクリーンショットには、すべてのHome.cshtmlコードが含まれていますが、他には何も必要ありません。 ただし、LayoutPageの設定をグローバルレベルに移動したため、それらはここにありません。







独自のセクションは、ファイルで宣言された@sectionブロックを使用して「メニュー」と「フッター」を上書きします。 セクション内の「メイン/ボディ」の内容をラップする必要はなく、代わりに文字列形式のままにすることを決定しました（これにより、クリック数が減り、すべてのページで構文を変更しなくても、レイアウトページにセクションを簡単に追加できます）



Home.cshtmlをプレゼンテーションテンプレートとして再度生成すると、レイアウトとサブページのコンテンツが結合され、ページの2つの新しい部分が統合されて、クライアントに次が返されます。

HTMLヘルパーのカプセル化と再利用

レイアウトページを使用して、Webサイトに一貫した外観を提供する方法を検討しました。 次に、HTMLを生成するための純粋なカプセル化を提供する再利用可能なHTMLヘルパーメソッドを作成する方法を見てみましょう。このメソッドは、サイトまたは複数の異なるサイトで使用できます。

HTMLソフトウェアヘルパー

現在、ASP.NET MVCには、HTML生成をカプセル化するコードブロックで呼び出すことができるヘルパーメソッドがあります。 そして、それらはコードの形でのみ実装されます（ほとんどの場合、拡張メソッドとして）。 ASP.NET MVCで作成された既存のHTML拡張メソッドはすべて、「Razor」を使用する場合にも機能します。

HTML宣言ヘルパー

1つのクラスのコードに基づくHTML生成は機能しますが、理想的ではありません。



Razorの機能の1つは、より宣言的なアプローチを使用して再利用可能なHTMLヘルパーを作成する簡単な方法です。 以下のように、宣言型構文ヘルパー {}を使用して、再利用可能なヘルパーを宣言できるようにする計画です。







これらのヘルパーを含む.cshtmlファイルをViews \ Helpersディレクトリに配置して、サイトのビューまたはページで再利用できます（追加の手順は不要です）。







ProductListing（）ヘルパーが引数とパラメーターを定義する方法に注目してください。 必要なパラメーターを渡すことができます（オプションのパラメーター、NULL値を許可するタイプ、ジェネリックなどを含む）。 Visual Studioでこのコードをデバッグすることもできます。



重要： ヘルパー構文は、Razorの最初のベータバージョンでは使用できません。将来のバージョンで使用できるようになることを願っています。 コード形式のヘルパーメソッドはすぐに動作します。

文字列パターンをパラメーターとして渡す

Razorで提供するもう1つの有用な（そして非現実的に強力な）機会は、「文字列テンプレート」パラメーターを補助メソッドに渡す機能です。 これらの「文字列テンプレート」には、HTMLとコードの両方を含めることができ、補助メソッドのリクエストで呼び出すことができます。



この機能の動作例を以下に示します。クライアント用のDataGridを生成するHTMLの「グリッド」ヘルパーを使用します。







Grid.Renderメソッドの呼び出しはC＃です。 C＃の新しい名前付きパラメーターを使用して、厳密に型指定された引数をGrid.Renderメソッドに渡します。この機能により、コンパイル時にinstellisenseと検証を使用して式が完全に完成します。



列を宣言するときに渡す「format」パラメーターは「小文字のテンプレート」であり、htmlとコードの両方が含まれています。また、データ形式を自分用にカスタマイズすることもできます。 そして、最良の部分は、グリッドヘルパーがデリゲートメソッドとしてラインテンプレートを呼び出し、必要なときに必要なときに呼び出すことができることです。 この場合、グリッド線を生成し、それを「要素」に渡すたびに呼び出され、テンプレートを使用して結果を表示できます。



この機能により、より強力なHTMLヘルパーメソッドを開発できます。 コードで（今日のように）宣言型ヘルパー {}アプローチを使用して、それらを実装できます。

Visual Studioでのサポート

前述したように、Razorの主な目標の1つは、キーストロークの数を最小限に抑え、テキストエディターでコードを簡単に編集することです。 構文を簡潔で簡潔でシンプルなものにしようとしました。



それにもかかわらず、Razorは、Visual Studioでコードを編集する便利さをすべて得ることができるように設計されています。 Razorファイルのインテリセンスで、HTML、JavaScript、C＃/ VBコードを完全にサポートします。







<li>要素内の「@p 」上のProductオブジェクトに対して、 intellisenseがどのように機能したかに注目してください。 ソリューションエクスプローラーでは、.aspxと.cshtmlの両方のプレゼンテーションテンプレートが\ Viewsフォルダーに存在することに注意してください。 1つのアプリケーションで異なるプレゼンテーションエンジンを使用して、どのような構文が好きかを体験できます。

結論

「Razor」は、コード指向のテンプレートに新しいエレガントなプレゼンテーションエンジンを提供すると考えています。 プログラミングプロセスは高速で楽しいものになります。 構文はコンパクトであり、キーストロークを減らしながら、マークアップとコードの可読性を向上させます。 ASP.NET MVCの次のバージョンでは、エンジンはシステムに統合されます。 アプリケーションの.cshtml / .vbhtmlファイルを削除し、個別のページとして実行することができます。これにより、ASP.NET Webフォームアプリケーションで使用することもできます。



過去数か月にわたってプロジェクトをテストしたすべての開発者は、非常に肯定的なレビューを残しています。 パブリックベータはできるだけ早く提供する予定です。もちろん、ご意見をお待ちしています。