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

發行項
11/08/2024

本教學課程將教導您如何在 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 教學課程，或您已熟悉MVC開發 ASP.NET。本教學課程從開始使用MVC 3教學課程中完成的項目開始。

你將建構什麼

您將將樣本（特別是編輯和顯示範本）新增至在開始使用MVC 3 教學課程中建立的簡單電影清單應用程式。您也會新增 jQuery UI datepicker 快顯行事曆，以簡化輸入日期的程式。下列螢幕快照顯示已修改的應用程式，並顯示 jQuery UI datepicker 彈出視窗行事曆。

您將學習的技能

以下是您將學習的項目：

如何使用 DataAnnotations 命名空間中的屬性來控制數據顯示和處於編輯模式時的數據格式。
如何建立範本（編輯和顯示範本），以控制數據的格式設定。
如何將 jQuery UI datepicker 新增為輸入日期字段的方式。

快速入門

如果您還沒有入門專案中的電影清單應用程式，請下載它：

下載。
在 Windows 檔案總管中 ，以滑鼠右鍵按兩下MvcMovie.zip 檔案，然後選取 [ 屬性]。
在 [ MvcMovie.zip屬性 ] 對話框中，選取 [ 解除封鎖]。 (解除封鎖，這樣您嘗試使用從 Web 下載的 .zip 檔案時，即可避免發生安全性警告)。

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

在 方案總管 中，按兩下 Views\Shared\_Layout.cshtml 加以開啟。將標頭從MVC Movie App變更為Movie jQuery。H1 按 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 屬性指定資料類型

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

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

下一步

共用方式為

你將建構什麼

您將學習的技能

快速入門

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

意見反應

其他資源