ASP.NET MVC での HTML5 と jQuery UI Datepicker ポップアップ カレンダーの使用 - パート 1

作成者: Rick Anderson

このチュートリアルでは、ASP.NET MVC Web アプリケーションでエディター テンプレート、表示テンプレート、jQuery UI Datepicker ポップアップ カレンダーを操作する方法の基本について説明します。

このチュートリアルでは、ASP.NET MVC Web アプリケーションでエディター テンプレート、表示テンプレート、jQuery UI datepicker ポップアップ カレンダーを操作する方法の基本について説明します。 このチュートリアルでは、Microsoft Visual Studio の無料バージョンである Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer") を使用できます。既にある場合は Visual Studio 2010 SP1 を使用できます。

開始する前に、以下に示す前提条件がインストールされていることを確認してください。 次のリンクをクリックすると、これらをすべてインストールできます: Web Platform Installer。 または、次のリンクを使って、必要なソフトウェアを個別にインストールすることもできます。

• Visual Studio Web Developer Express SP1 の前提条件
• ASP.NET MVC 3 Tools Update
• SQL Server Compact 4.0 (ランタイム + ツールのサポート)

Visual Web Developer ではなく Visual Studio 2010 を使っている場合は、次のリンクをクリックして前提条件をインストールします。Visual Studio 2010 の前提条件。

このチュートリアルは、MVC 3 の概要のチュートリアルを完了しているか、ASP.NET MVC 開発に精通していることを前提としています。 このチュートリアルは、MVC 3 の概要のチュートリアルで完成したプロジェクトから始まります。

作成するアプリケーション:

MVC 3 の概要のチュートリアルで作成した単純なムービー一覧アプリケーションにテンプレート (具体的には、テンプレートの編集と表示) を追加します。 また、日付の入力プロセスを簡略化するために、jQuery UI datepicker ポップアップ カレンダーを追加します。 次のスクリーンショットは、jQuery UI datepicker ポップアップ カレンダーを表示する、変更されたアプリケーションを示しています。

学習内容

ここでは次の内容について学習します。

• DataAnnotations 名前空間の属性を使って、データの表示時および編集モード時の形式を制御する方法。
• データの書式設定を制御するためのテンプレートを作成 (テンプレートの編集および表示) する方法。
• 日付フィールドを入力する方法として jQuery UI datepicker を追加する方法。

はじめに

スターター プロジェクトのムービー一覧アプリケーションがまだない場合は、ダウンロードします。

• ダウンロード。
• エクスプローラーで、MvcMovie.zip ファイルを右クリックし、[プロパティ] を選びます。
• [MvcMovie.zip のプロパティ] ダイアログ ボックスで、[ブロックの解除] を選びます。 (ブロックを解除すると、Web からダウンロードした .zip ファイルを使おうとしたときに表示されるセキュリティに関する警告を回避できます)。

MvcMovie.zip ファイルを右クリックし、[すべて展開] を選んでファイルを解凍します。 Visual Web Developer または Visual Studio 2010 で、MvcMovieCS_TU.sln ファイルを開きます。

ソリューション エクスプローラーで、Views\Shared\_Layout.cshtml をダブルクリックして開きます。 H1 ヘッダーを MVC Movie App から Movie jQuery に変更します。 Ctrl + F5 を押してアプリケーションを実行し、[Home] タブをクリックすると、ムービー コントローラーの Index メソッドに移動します。 アプリケーションを試すには、いずれかのムービーの [Edit] リンクと [Details] リンクを選びます。 [Index]、[Edit]、[Details] ビューでは、リリース日と価格が適切に書式設定されていることに注意してください。

日付と価格の書式設定は、Movie クラスのプロパティで DisplayFormat 属性を使った結果です。

Movie.cs ファイルを開き、ReleaseDate プロパティと Price プロパティの DisplayFormat 属性をコメント アウトします。 結果の Movie クラスは次のようになります。

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    //  [DisplayFormat(DataFormatString = "{0:d}")]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    //[DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

もう一度 Ctrl + F5 を押してアプリケーションを実行し、[Home] タブを選んでムービー一覧を表示します。 今回は、リリース日には日付と時刻が表示され、価格フィールドには通貨記号が表示されなくなりました。 Movie クラスの変更により、前に見た適切な書式設定が元に戻りましたが、これはすぐに修正します。

DataAnnotations DataType 属性を使ったデータ型の指定

Date 列挙型を使って、ReleaseDate プロパティのコメント アウトされた DisplayFormat 属性を DataType 属性に置き換えます。 Price プロパティの DisplayFormat 属性を再度 DataType 属性に置き換えます。今回は Currency 列挙型を使います。 完成したコードは次のようになります。

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

アプリケーションを実行します。 これで、リリース日と価格のプロパティが正しく書式設定されます (つまり、適切な日付と通貨の形式が使われます)。 DataType 属性は、フィールドが正しい形式でレンダリングされるように、組み込みの ASP.NET MVC テンプレートの型メタデータを提供します。 DataType 属性を使うと、国際化などの目的でモデルがよりクリーンに、柔軟性が高くなるため、コード内にもともとあった DisplayFormat 属性を使うよりも、DataType 属性を使うことをお勧めします。

次のセクションでは、日付フィールドを表示するカスタム テンプレートを作成する方法について説明します。

次へ