使用 HTML5 和 jQuery UI Datepicker 快顯行事曆搭配 ASP.NET MVC - 第 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.css 檔案，並將下列 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 資料夾中的顯示範本。 檢 視\Movie\DisplayTemplates 資料夾中的顯示範本只會由 Movie 控制器使用。 (如果同名的範本出現在這兩個資料夾中， 則 Views\Movie\DisplayTemplates 資料夾中的範本，也就是控制器所 Movie 傳回的檢視會優先使用更特定的範本。)

在方案總管中，展開[檢視]資料夾、展開[共用資料夾]，然後以滑鼠右鍵按一下Views\Shared\DisplayTemplates資料夾。

按一下 [新增 ]，然後按一下 [ 檢視]。 [ 新增檢視 ] 對話方塊隨即顯示。

在 [ 檢視名稱] 方塊 中，輸入 DateTime 。 (您必須使用此名稱，才能比對 type.)

選取 [ 建立為部分檢視] 核取方塊。 確定未選取 [使用版面配置或主版頁面 ] 和 [ 建立強型別檢視 ] 核取方塊。

按一下 [新增] 。 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-1CSS 類別會使日期以粗體紅色文字顯示。 您已將 loud-1 CSS 類別新增為暫存量值，因此您可以輕鬆地查看使用這個特定範本的時機。

您已完成的工作是建立的，以及 ASP.NET 用來顯示日期的自訂範本。 Views\Shared\DisplayTemplates資料夾中的較一般範本 () 會顯示簡單的簡短日期。 在Views\Movies\DisplayTemplates資料夾中特別針對 Movie 控制器 (的範本，) 顯示也格式化為粗體紅色文字的簡短日期。

按 CTRL+F5 執行應用程式。 瀏覽器會呈現應用程式的 [索引] 檢視。

屬性 ReleaseDate 現在會在沒有時間的情況下，以粗體紅色字型顯示日期。這可協助您確認 DateTimeViews\Movies\DisplayTemplates 資料夾中的樣板化協助程式已選取 DateTime 共用資料夾中的樣板化協助程式， (Views\Shared\DisplayTemplates) 。

現在，將 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 type.)

若要檢閱：此時， 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 現在會以大綠色字型顯示日期和時間。

UIHint返回Movie.cs檔案中的 屬性，並將它批註化，因此不會使用LoudDateTime.cshtml範本。 再次執行應用程式。 發行日期不會顯示大型和綠色。 這會驗證 Views\Shared\DisplayTemplates\DateTime.cshtml 範本是否用於 [索引] 和 [詳細資料] 檢視中。

如先前所述，您也可以在檢視中套用範本，這可讓您將範本套用至某些資料的個別實例。 開啟 Views\Movies\Details.cshtml 檢視。 新增 "LoudDateTime" 為欄位的 Html.DisplayFor 呼叫 ReleaseDate 的第二個參數。 完成的程式碼如下所示：

<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 範本 (大型和綠色) 。

在下一節中，您將建立複雜類型的範本。

上一個下一個