ASP.Netでいってみる RazorとWeb ページに チャレンジ ３
ｍｓｄｎのASP.NET 開発者向け技術情報からこんなページを発見しました。
『Razor 構文と ASP.NET Web ページ』
http://msdn.microsoft.com/ja-jp/asp.net/gg193039
『Razor構文』の勉強に行ってきます。
その３です。
第３章 一貫性のある外観の作成
再利用できるコンテンツ ブロックの作成
1. Web サイトのルートフォルダーに、Index.cshtml という名前のファイルを作成。
Visual Web Developer 2010 Express でいってみます。
Webサイトを右クリックして[新しい項目の追加]。
テンプレートは[Web ページ (Razor v2)]を選択。[名前]に[Index.cshtml ]を入れて[追加]を押下。
<h1>Index Page Content</h1>
<p>This is the content of the main page.</p>
を追加。
2. ルート フォルダーに、Shared という名前のフォルダーを作成
Webサイトを右クリックして[新しいフォルダー]押下。フォルダ名を[Shared]に変更
注意： 一般的な慣習として、Web ページ間で共有するファイルは、Shared という名前のフォルダーに保存します。
3. Sharedフォルダーに、_Header.cshtmlという名前のファイルを作成
[Sharedフォルダー]を右クリックして[新しい項目の追加]。
テンプレートは[空のページ (Razor v2)]を選択。[名前]に[_Header.cshtml ]を入れて[追加]を押下。テンプレートは特になんでもいい。名前が大事。
※先頭にアンダースコア（_）が付いていることに注意
4. 既存のマークアップを以下で置き換えます。
中身は
<div class="header">This is header text.</div>
の１行だけあればOK。
５. Sharedフォルダーに、_Footer.cshtmlという名前のファイルを作成
6. Index.cshtmlページに、コードを追加。これらは2つのRenderPageメソッドを呼び出しています。
@RenderPage("/Shared/_Header.cshtml")
― 省略 ―
@RenderPage("/Shared/_Footer.cshtml")
7. ブラウザーでIndex.cshtmlページを実行
上記２行の追加と記載されてたけど、我が家の環境では、
『'/Hello World' アプリケーションでサーバー エラーが発生しました。
パス '/Shared/_Header.cshtml' を割り当てられませんでした。』
ってエラーになってしまいます。
@RenderPage("~/Shared/_Header.cshtml")
@RenderPage("~/Shared/_Footer.cshtml")
と～を入れてあげるとOKのようです。
8. ブラウザーで、ページ ソースを表示してヘッダーとフッターが実際のコンテンツに置き換えられていることを確認。
レイアウト ページを使った一貫性のある外観の作成 P53
1. WebサイトのSharedフォルダーに、_Layout1.cshtmlという名前のファイルを作成
2. 既存のコンテンツを置き換え
[Sharedフォルダー]を右クリックして[新しい項目の追加]。
テンプレートは[レイアウトページ (Razor v2)]を選択。[名前]に[ _Layout1.cshtml ]を入れて[追加]を押下。
3. Sharedフォルダーに、_Header2.cshtmlという名前のファイルを作成し、既存のコンテンツを置き換え
4. ルート フォルダーに新しいフォルダーを作成し、Stylesという名前にします。
5. Stylesフォルダーの中に、Site.cssという名前のファイルを作成し、以下のスタイル定義を追加します。
Webサイトを右クリックして[新しい項目の追加]。
テンプレートは[スタイルシート]を選択。[名前]に[Site.css]を入れて[追加]を押下。
「body { }」の１行のみがテンプレートからもってこられている。参考書からまるっとコピペで置き換え。
しかしスタイル定義をみんな手動で記述してるんだろうか？CSS用のエディターみたいなのはあるのかな？WindowsFormやWeb FormみたいにVisualなエディタで画面を作ってきた私にはとてつもない手間と感じるのですが。。
6. ルート フォルダーで、Content1.cshtmlという名前のファイルを作成し、既存のコンテンツを以下で置き換えます。
Webサイトを右クリックして[新しい項目の追加]。
テンプレートは[コンテンツページ (Razor v2)]を選択。[名前]に[Content1.cshtml]を入れて[追加]を押下。
------------------------------------------------------------------------------------
@{
Page.Title = "タイトルをここに挿入します";
//Layout = "レイアウト ページをここに挿入します";
}
<div>
</div>
------------------------------------------------------------------------------------
がセットされているのを、参考書の指定内容に入れ替える。
7. ブラウザーでContent1.cshtmlを実行します。レンダリングされたページは、_Layout1.cshtmlで定義された形式とスタイルシート、Content1.cshtmlで定義されたテキスト（コンテンツ）を使います。
我が家の環境では以下の変更を行う必要がありました。
_Layout1.cshtml の ２か所
<link href="@Href("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
@RenderPage("~/Shared/_Header2.cshtml")
と
Content1.cshtmlの１か所
Layout = "~/Shared/_Layout1.cshtml";
以上３行の変更（いづれも~の追加 チルダーです）が必要でした。
また、_Layout1.cshtml について
参考書では、<html>要素がなく</html>だけになってます。
なくても問題なく表示できますね。不気味なので私は<html>を付けておきました。
複数のコンテンツ セクションを持つレイアウト ページのデザイン P56
ここまできたら、もう慣れが出てきました。特に問題ないですね。
ところで、
ここまでVisual Web Developer 2010 Express Edition SP1でスクリプト書いてデバッグ実行して内容を確認とかしてきたのですが、ふと、WebMatrix2で表示させたらどうなるんだろうと思い、やってみました。
まずはこの「複数のコンテンツ。。」の例をVWDでデバッグ実行すると、
教科書と同じ結果になります。
WebMatrix2で表示させたら
あれ？、スタイルが反映してないぞ
こちらは Chromeを指定するといい感じ。
Firefox もいい感じ。
なんか設定不足なのかもしれないのですが、
WebMatrix2 の「ブラウザーで表示」が本家のIE以外はOKってどうして？？
あと、 VWD のデバッグではエラーになっていたファイル指定のチルダの件
@RenderPage("~/Shared/_Header2.cshtml") とかで
VWDでは付けておかないとエラーになってましたが
WebMatrix2 の「ブラウザーで表示」では有っても無くてもエラーにはなりません。
引き続き、VWDで作業することにします。
コンテンツ セクションをオプションにする P59
通常、コンテンツ ページの中に作るセクションとレイアウト ページで定義されたセクションは一致する必要があります。
以下の状況のいずれかに該当すると、エラーが発生します。
・ コンテンツ ページが、レイアウト ページのセクションに対応しないセクションを含んでいる。
・ レイアウト ページが、コンテンツを含まないセクションを含んでいる。
・ レイアウト ページが、同じセクションを複数回レンダリングしようとするメソッド呼び出しを持っている。
但し、レイアウト ページでセクションをオプションとして宣言して、名前付きセクションの動作を変更できます。これにより、指定されたセクションのためのコンテンツを持つか持たないかに関わらず、レイアウト ページを共有できる複数のコンテンツ ページを定義できるようになります。
と記述されてます。
レイアウトページ で
@RenderSection("header", required: false)
もしくは
@if (IsSectionDefined("header")) {
@RenderSection("header")
}
と記述することで、コンテンツページ毎に有ったり無かったりするセクションをレイアウトに持たせる方法が記述されています。これでレイアウトページの汎用性が高まりますね。
リファレンス
RenderSection(sectionName [, required = true|false]) 【レイアウト ページ】
名前を持つコンテンツ セクションをレンダリングします。
Requiredをfalseに設定する と、セクションはオプションになります。
レイアウト ページにデータを渡す P61
PageDataプロパティを使って、コンテンツ ページからレイアウト ページにデータを渡す方法について記述されてます。
サンプルコードでは、コンテンツ ページに送信ボタンを配置、押下の度、あるセクションを表示したり非表示にしたりしています。
コンテンツ ページではRequestの都度、PageDataプロパティに表示/非表示をセット、レイアウトページではPageDataプロパティの値を判断したうえで部分表示を行っています。なるほど。
基本的なヘルパーの作成と使用 P65
カスタム ヘルパーの作成にチャレンジします。
1. Webサイトのルート フォルダーに、App_Codeという名前のフォルダーを作成します。
2. App_Codeフォルダーの中に、新しい.cshtmlファイルを作成し、MyHelpers.cshtmlと名付けます。
教科書はこんな手順でスタートなのですが、我が家の環境ではすでに、App_Codeという名前のフォルダーは存在してたのでそのまま使いました。
また、App_Codeにファイルを追加する歳のテンプレートは[ヘルパー(Razor v2)]を指定。
テンプレートから作成されたスクリプトは以下。
教科書とおりに入れかえ。
なるほど。。。
ヘルパーファイルはApp_Codeフォルダ内におく。
呼び出しは「@フォルダー名.ファイル名.ヘルパー名(引数たち)」
ここで指定フォルダー名はApp_Codeフォルダ内でのフォルダ名。
■その他の参考情報（こっちの方がわかりやすいです）
・WebMatrix で Razor 構文で Web ヘルパーを自作する
http://devadjust.exblog.jp/12149324/
・ASP.NET MVC 3とRazorの@helper文法 連載：ScottGu's Blog翻訳
http://codezine.jp/article/detail/5947
第３章は以上です。
