搭配使用 HTML5 和 jQuery UI Datepicker 快顯行事曆搭配 ASP.NET MVC - 第 1 部分

作者 ：Rick Anderson

本教學課程將教導您如何在 ASP.NET MVC Web 應用程式中使用編輯器範本、顯示範本和 jQuery UI datepicker 快顯行事曆的基本概念。

本教學課程將教導您如何在 ASP.NET MVC Web 應用程式中使用編輯器範本、顯示範本和 jQuery UI datepicker 快顯行事曆 的基本概念。 在本教學課程中，您可以使用 Microsoft Visual Web Developer 2010 Express Service Pack 1 (「Visual Web Developer」) ，這是 Microsoft Visual Studio 的免費版本，或者如果您已經有 Visual Studio 2010 SP1，則可以使用 Visual Studio 2010 SP1。

開始之前，請確定您已安裝下列必要條件。 您可以按一下下列連結來安裝所有元件： Web Platform Installer。 或者，您可以使用下列連結個別安裝必要的軟體：

• Visual Studio Web Developer Express SP1 必要條件
• ASP.NET MVC 3 工具更新
• SQL Server Compact 4.0 (執行時間 + 工具支援)

如果您使用 Visual Studio 2010 而非 Visual Web Developer，請按一下下列連結來安裝必要條件： Visual Studio 2010 必要條件。

本教學課程假設您已完成 開始使用 MVC 3 教學課程，或您已熟悉 ASP.NET MVC 開發。 本教學課程從 開始使用 MVC 3 教學課程開始完成的專案。

您要建置的內容

您將特別新增範本 (，將範本編輯及顯示) 到開始使用 MVC 3 教學課程中建立的簡單電影清單應用程式。 您也會新增 jQuery UI datepicker 快顯 行事曆，以簡化輸入日期的程式。 下列螢幕擷取畫面顯示已修改的應用程式，其中顯示 jQuery UI datepicker 快顯行事曆。

您要學習的技術

以下是您要學習的內容：

• 如何使用 DataAnnotations 命名空間中的屬性來控制資料顯示和處於編輯模式時的資料格式。
• 如何建立範本 (編輯和顯示範本) 來控制資料的格式設定。
• 如何新增 jQuery UI datepicker 做為輸入日期欄位的方式。

開始使用

如果您尚未從入門專案取得電影清單應用程式，請下載它：

• 下載。
• 在 Windows 檔案總管中，以滑鼠右鍵按一下 MvcMovie.zip 檔案，然後選取 [ 屬性]。
• 在 [MvcMovie.zip屬性 ] 對話方塊中，選取 [ 解除封鎖]。 (取消封鎖後，當您嘗試使用從網路下載的 .zip 檔案時，就不會出現安全性警告。)

以滑鼠右鍵按一下 MvcMovie.zip 檔案，然後選取 [ 全部解壓縮 ] 以解壓縮檔案。 在 Visual Web Developer 或 Visual Studio 2010 中，開啟 MvcMovieCS_TU.sln 檔案。

在Solution Explorer中，按兩下Views\Shared\_Layout.cshtml加以開啟。 將 H1 標頭從 MVC Movie App 變更為 Movie jQuery。 按 CTRL+F5 執行應用程式，然後按一下 [首頁] 索引 卷 標，這會帶您前往 Index 電影控制器的 方法。 若要試用應用程式，請選取其中一部電影的 [編輯 ] 連結和 [詳細資料 ] 連結。 請注意，在 [索引]、[編輯] 和 [詳細資料] 檢視中，發行日期和價格的格式良好：

日期和價格的格式是在 類別屬性 Movie 上使用DisplayFormat屬性的結果。

開啟Movie.cs檔案，並將 和 Price 屬性上的 ReleaseDate 屬性批註 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 以執行應用程式，然後選取 [首頁 ] 索引標籤以檢視電影清單。 這次發行日期會顯示日期和時間，而價格欄位不再顯示貨幣符號。 類別中的 Movie 變更已復原您稍早看到的良好格式設定，但您會在一段時間內修正。

使用 DataAnnotations DataType 屬性來指定資料類型

使用 列舉，將 屬性的批註化 DisplayFormat 屬性 ReleaseDate 取代為DataType屬性。 Date DisplayFormatPrice 再次使用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 屬性可讓模型更簡潔且更有彈性，以便進行國際化等用途。

在下一節中，您將瞭解如何讓自訂範本顯示日期欄位。

下一步