ASP.NET MVC での HTML5 と jQuery UI Datepicker ポップアップ カレンダーの使用 - パート 2
作成者: Rick Anderson
このチュートリアルでは、ASP.NET MVC Web アプリケーションでエディター テンプレート、表示テンプレート、jQuery UI Datepicker ポップアップ カレンダーを操作する方法の基本について説明します。
自動 DateTime テンプレートの追加
このチュートリアルの最初の部分では、モデルに属性を追加して書式を明示的に指定する方法と、モデルのレンダリングに使用するテンプレートを明示的に指定する方法について説明しました。 たとえば、次のコードの DisplayFormat 属性は、ReleaseDate プロパティの書式を明示的に指定します。
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
次の例では、DataType 属性は Date 列挙体を使用して、モデルをレンダリングに日付テンプレートを使用することを指定します。 プロジェクトに日付テンプレートがない場合は、組み込みの日付テンプレートが使用されます。
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
ただし、ASP.MVC では、型の名前に一致するテンプレートを検索することで、規則オーバー構成を使用して型の一致を実行できます。 これにより、属性やコードをまったく使用せずにデータを自動的に書式設定するテンプレートを作成できます。 チュートリアルのこの部分では、DateTime 型 のモデル プロパティに自動的に適用されるテンプレートを作成します。 DateTime 型のすべてのモデル プロパティをレンダリングするために使用されるテンプレートを指定するために、属性やその他の設定を使用する必要はありません。
また、個々のプロパティや個々のフィールドの表示をカスタマイズする方法についても学習します。
まず、既存の書式設定情報を削除し、アプリケーションで完全な日付を表示しましょう。
"Movie.cs" ファイルを開き、ReleaseDate プロパティの DataType 属性をコメント アウトします。
// [DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Ctrl キーを押しながら F5 キーを押してアプリケーションを実行します。
書式設定情報が指定されていない場合の既定値であるため、ReleaseDate プロパティに日付と時刻の両方が表示されます。
新しいテンプレートをテストするための CSS スタイルの追加
日付を書式設定するためのテンプレートを作成する前に、新しいテンプレートに適用できるいくつかの CSS スタイル ルールを追加します。 これらは、レンダリングされたページが新しいテンプレートを使用していることを確認するのに役立ちます。
"Content\Site.cs" ファイルを開き、ファイルの最後に次の CSS 規則を追加します。
/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
font-weight: bold;
color: Red;
}
.loud-2 {
font-size: 2.0em;
color:Green;
}
.loud-3 {
font-style: italic;
color: yellow;
background-color: blue;
}
DateTime 表示テンプレートの追加
これで、新しいテンプレートを作成できます。 "Views\Movies" フォルダーに "DisplayTemplates" フォルダーを作成します。
"Views\Shared" フォルダーで、"DisplayTemplates" フォルダーと "EditorTemplates" フォルダーを作成します。
Views\Shared\DisplayTemplates フォルダー内の表示テンプレートは、すべてのコントローラーで使用されます。 "Views\Movie\DisplayTemplates" フォルダー内の表示テンプレートは、Movie コントローラーのみで使用されます。 (同じ名前のテンプレートが両方のフォルダーに表示される場合は、"Views\Movie\DisplayTemplates" フォルダー (つまり、より具体的なテンプレート) は、Movie コントローラーによって返されるビューよりも優先されます)。
ソリューション エクスプローラーで、"Views" フォルダーを展開し、"Shared" フォルダーを展開して、"Views\Shared\DisplayTemplates" フォルダーを右クリックします。
[追加] をクリックし、[ビュー] をクリックします。 [ビューの追加] ダイアログ ボックスが表示されます。
[ビュー名] ボックスに DateTime と入力します。 (型の名前と一致させるには、この名前を使用する必要があります。)
[部分ビューとして作成] チェック ボックスを選択します。 [レイアウトまたはマスター ページを使用する] チェック ボックスと [厳密に型指定されたビューを作成する] チェック ボックスがオフになっていることを確認します。
追加をクリックします。 "DateTime.cshtml" テンプレートが "Views\Shared\DisplayTemplates" に作成されます。
次の図は、DateTime 表示とエディター テンプレートが作成された後のソリューション エクスプローラーの "Views" フォルダーを示しています。
"Views\Shared\DisplayTemplates\DateTime.cshtml" ファイルを開き、String.Format メソッドを使用してプロパティを時刻なしの日付として書式設定する次のマークアップを追加します。 ({0:d} 書式は短い日付形式を指定します。)
@String.Format("{0:d}", Model.Date)
"Views\Movie\DisplayTemplates" フォルダーに DateTime テンプレートを作成するには、この手順を繰り返します。 "Views\Movie\DisplayTemplates\DateTime.cshtml" ファイルで、次のコードを使用します。
<span class="loud-1">
@String.Format("{0:d}", Model.Date)
</span>
loud-1 CSS クラスを使用すると、日付が太字の赤いテキストで表示されます。 この特定のテンプレートがいつ使用されているかを簡単に確認できるように、一時的なメジャーとして loud-1 CSS クラスを追加しました。
ここでは、ASP.NETが日付を表示するために使用するテンプレートを作成し、カスタマイズしました。 より一般的なテンプレート ("Views\Shared\DisplayTemplates" フォルダー内) では、単純な短い日付が表示されます。 Movie コントローラー専用のテンプレート ("Views\Movies\DisplayTemplates" フォルダー内) では、短い日付が表示され、太字の赤いテキストで書式設定されます。
Ctrl キーを押しながら F5 キーを押してアプリケーションを実行します。 ブラウザーは、アプリケーションのインデックス ビューを表示します。
ReleaseDate プロパティは、日付を太字の赤いフォントで時刻なしで表示するようになりました。これにより、共有フォルダー ("Views\Shared\DisplayTemplates") の DateTime テンプレート ヘルパーで "Views\Movies\DisplayTemplates" フォルダーの DateTime テンプレート ヘルパーが選択されていることを確認できます。
"Views\Movies\DisplayTemplates\DateTime.cshtml" ファイルの名前を "Views\Movies\DisplayTemplates\LoudDateTime.cshtml" に変更します。
Ctrl キーを押しながら F5 キーを押してアプリケーションを実行します。
今回、このReleaseDate プロパティには、時刻のない日付と、太字の赤いフォントが表示されます。 これは、データ型 (この場合 DateTime) の名前を持つテンプレートが、その型のすべてのモデル プロパティを表示するために自動的に使用されることを示しています。 "DateTime.cshtml" ファイルの名前を "LoudDateTime.cshtml" に変更した後、ASP.NET は "Views\Movies\DisplayTemplates" フォルダーにテンプレートが見つからなかったため、*Views\Movies\Shared* フォルダーの "DateTime.cshtml" テンプレートが使用されます。
(テンプレートの一致では大文字と小文字が区別されないため、任意の大文字と小文字を指定してテンプレート ファイル名を作成できます。たとえば、"DATETIME.cshtml、datetime.cshtml"、"DaTeTiMe.cshtml" はすべて DateTime 型と一致します。)
確認: この時点で、ReleaseDate フィールドは "Views\Movies\DisplayTemplates\DateTime.cshtml" テンプレートで表示されています。このテンプレートでは、短い日付形式を使用してデータが表示されますが、それ以外の場合は特別な形式は追加されません。
UIHint を使用して表示テンプレートを指定する
Web アプリケーションに多くの DateTime フィールドがあり、既定で日付のみの形式ですべてを表示する場合は、DateTime.cshtml テンプレートを使用することをお勧めします。 しかし、完全な日付と時刻を表示する日付がいくつかある場合はどうでしょうか。 ご安心ください。 追加のテンプレートを作成し、UIHint 属性を使用して、完全な日付と時刻の書式設定を指定できます。 その後、そのテンプレートを選択的に適用できます。 モデル レベルで UIHint 属性を使用することも、ビュー内でテンプレートを指定することもできます。 このセクションでは、UIHint 属性を使用して、日付/時刻フィールドの一部のインスタンスの書式を選択的に変更する方法について説明します。
"Views\Movies\DisplayTemplates\LoudDateTime.cshtml" ファイルを開き、既存のコードを次のコードに置き換えます。
<span class="loud-2">
@Model.ToString()
</span>
これにより、完全な日付と時刻が表示され、テキストが緑で大きく表示される CSS クラスが追加されます。
次の例に示すように、"Movie.cs" ファイルを開き、UIHint 属性を ReleaseDate プロパティに追加します。
[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }
これにより、ASP.NET MVC は、ReleaseDate プロパティ (具体的には、任意の DateTime オブジェクトだけでない) を表示するときに、"LoudDateTime.cshtml" テンプレートを使用する必要があることを示します。
Ctrl キーを押しながら F5 キーを押してアプリケーションを実行します。
ReleaseDate プロパティに大きな緑色のフォントで日付と時刻が表示されます。
"Movie.cs" ファイル内の UIHint 属性に戻り、"LoudDateTime.cshtml" テンプレートが使用されないようにコメント アウトします。 アプリケーションをもう一度実行する リリース日は大きな緑色では表示されません。 これにより、"Views\Shared\DisplayTemplates\DateTime.cshtml" テンプレートがインデックス ビューと詳細ビューで使用されていることが確認されます。
前述のように、ビューにテンプレートを適用することもできます。これにより、テンプレートを一部のデータの個々のインスタンスに適用できます。 "Views\Movies\Details.cshtml" ビューを開きます。 ReleaseDate フィールドの Html.DisplayFor 呼び出しの 2 番目のパラメーターとして "LoudDateTime" を追加します。 完成したコードは次のようになります。
<div class="display-label">ReleaseDate</div>
<div class="display-field">
@Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>
これにより、モデルに適用される属性に関係なく、LoudDateTime テンプレートを使用してモデル プロパティを表示するように指定します。
Ctrl キーを押しながら F5 キーを押してアプリケーションを実行します。
ムービー インデックス ページで "Views\Shared\DisplayTemplates\DateTime.cshtml" テンプレート (赤い太字) が使用されていること、および "Movie\Details" ページで "Views\Movies\DisplayTemplates\LoudDateTime.cshtml" テンプレート (大と緑) が使用されていることを確認します。
次のセクションでは、複合型のテンプレートを作成します。