搭配使用 HTML5 和 jQuery UI Datepicker 快顯行事曆搭配 ASP.NET MVC - 第 1 部分
本教學課程將教導您如何在 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
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
屬性可讓模型更簡潔且更有彈性,以便進行國際化等用途。
在下一節中,您將瞭解如何讓自訂範本顯示日期欄位。
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應