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

發行項
06/16/2023

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

新增編輯日期的範本

在本節中，您將建立編輯日期的範本，此範本會在 ASP.NET MVC 顯示 UI 來編輯以 DataType屬性的Date列舉標記的模型屬性時套用。範本只會轉譯日期;不會顯示時間。在範本中，您將使用 jQuery UI Datepicker 快顯行事歷來提供編輯日期的方式。

若要開始，請開啟Movie.cs檔案，並將具有Date列舉的DataType屬性新增至 ReleaseDate 屬性，如下列程式碼所示：

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

此程式碼會導致 ReleaseDate 欄位在顯示範本和編輯範本中沒有時間顯示。如果您的應用程式在Views\Shared\EditorTemplates資料夾或Views\Movies\EditorTemplates資料夾中包含date.cshtml範本，該範本會在編輯時用來轉譯任何 DateTime 屬性。否則，內建 ASP.NET 範本化系統會將屬性顯示為日期。

按 CTRL+F5 執行應用程式。選取編輯連結，以確認發行日期的輸入欄位只顯示日期。

在Solution Explorer中，展開[檢視]資料夾、展開[共用資料夾]，然後以滑鼠右鍵按一下Views\Shared\EditorTemplates資料夾。

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

在 [ 檢視名稱] 方塊中，輸入「Date」。

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

按一下 [新增] 。 會建立 Views\Shared\EditorTemplates\Date.cshtml範本。

將下列程式碼新增至 Views\Shared\EditorTemplates\Date.cshtml 範本。

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

第一行會將模型宣告為 DateTime 類型。雖然您不需要在編輯和顯示範本中宣告模型類型，但最佳做法是讓您取得傳遞至檢視之模型的編譯時間檢查。 (另一個優點是您會在 Visual Studio 中的檢視中取得模型的 IntelliSense。) 如果未宣告模型類型，ASP.NET MVC 會將它視為動態類型，而且沒有編譯時間類型檢查。如果您將模型宣告為 DateTime 類型，則會變成強型別。

第二行只是在日期欄位之前顯示「使用日期範本」的常值 HTML 標籤。您將暫時使用此行來確認正在使用此日期範本。

下一行是 Html.TextBox 協助程式，可轉 input 譯文字方塊的欄位。協助程式的第三個參數會使用匿名型別，將文字方塊 datefield 的類別設定為，並將類型設定為 date 。 (因為 class 是 C# 中的保留專案，所以您必須使用 @ 字元逸出 class C# parser.) 中的屬性

此 date 類型是 HTML5 輸入類型，可讓 HTML5 感知瀏覽器轉譯 HTML5 行事曆控制項。稍後您將新增一些 JavaScript，以使用 datefield 類別將 jQuery datepicker 連結至 Html.TextBox 元素。

按 CTRL+F5 執行應用程式。您可以確認 ReleaseDate 編輯檢視中的屬性正在使用編輯範本，因為範本會在文字輸入方塊之前 ReleaseDate 顯示「使用日期範本」，如下圖所示：

在您的瀏覽器中，檢視頁面的來源。 (例如，以滑鼠右鍵按一下頁面，然後選取 [ 檢視 source.) 下列範例顯示頁面的一些標記，說明 class 轉譯 HTML 中的和 type 屬性。

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

返回 Views\Shared\EditorTemplates\Date.cshtml 範本，並移除「使用日期範本」標記。現在已完成的範本看起來像這樣：

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

在本節中，您會將 jQuery UI datepicker 快顯行事曆新增至日期編輯範本。 jQuery UI 連結庫提供動畫、進階效果和可自訂小工具的支援。其建置在 jQuery JavaScript 程式庫之上。 datepicker 快顯行事曆可讓您輕鬆自然地使用行事歷來輸入日期，而不是輸入字串。快顯行事曆也會將使用者限制為合法日期 — 日期的一般文字專案可讓您輸入類似 2/33/1999 ( 1999 年 2 月 33 日) 的內容，但 jQuery UI datepicker 快顯行事曆不允許這麼做。

首先，您必須安裝 jQuery UI 程式庫。若要這樣做，您將使用 NuGet，這是包含在 Visual Studio 2010 和 Visual Web Developer SP1 版本中的套件管理員。

在 Visual Web Developer 的 [ 工具 ] 功能表中，選取 [NuGet 套件管理員 ]，然後選取 [ 管理 NuGet 套件]。

注意：如果 [ 工具] 功能表未顯示 NuGet 套件管理員 命令，您必須遵循 NuGet 網站的 [安裝 NuGet ] 頁面上的指示來安裝 NuGet。

如果您使用 Visual Studio 而不是 Visual Web 開發人員，請從 [ 工具 ] 功能表中選取 [NuGet 套件管理員 ]，然後選取 [ 新增程式庫套件參考]。

在 [MVCMovie - 管理 NuGet 套件 ] 對話方塊中，按一下左側的 [ 線上 ] 索引標籤，然後在搜尋方塊中輸入「jQuery.UI」。選取 [j 查詢 UI Widgets：Datepicker]，然後選取 [ 安裝 ] 按鈕。

NuGet 會將這些偵錯版本和 jQuery UI Core 和 jQuery UI 日期選擇器新增至您的專案：

jquery.ui.core.js
jquery.ui.core.min.js
jquery.ui.datepicker.js
jquery.ui.datepicker.min.js

注意：偵錯版本 (沒有 .min.js 副檔名) 的檔案，對於偵錯很有用，但在生產網站中，您只包含縮小的版本。

若要實際使用 jQuery 日期選擇器，您必須建立 jQuery 腳本，將行事曆小工具連結至編輯範本。在Solution Explorer中，以滑鼠右鍵按一下[腳本] 資料夾，然後選取 [新增]、[新增專案]，然後選取[JScript 檔案]。將檔案 命名為DatePickerReady.js。

將下列程式碼新增至 DatePickerReady.js 檔案：

$(function () {
    $(".datefield").datepicker(); 
});

如果您不熟悉 jQuery，以下是這一點的簡短說明：第一行是「jQuery ready」函式，這是載入頁面中的所有 DOM 元素時所呼叫的。第二行會選取所有具有類別名稱 datefield 的 DOM 元素，然後為每個專案叫 datepicker 用函式。 (請記住，您已將類別新增 datefield 至 tutorial.) 稍早的 Views\Shared\EditorTemplates\Date.cshtml 範本

接下來，開啟 Views\Shared\_Layout.cshtml 檔案。您需要新增下列檔案的參考，這是所有必要的檔案，以便使用日期選擇器：

Content/themes/base/jquery.ui.core.css
Content/themes/base/jquery.ui.datepicker.css
Content/theme/base/jquery.ui.theme.css
jquery.ui.core.min.js
jquery.ui.datepicker.min.js
DatePickerReady.js

下列範例顯示您應該在Views\Shared\_Layout.cshtml檔案中元素底部 head 新增的實際程式碼。

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

完整 head 區段如下所示：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
        rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
        type="text/javascript"></script>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

URL 內容協助程式方法會將資源路徑轉換成絕對路徑。當應用程式在 IIS 上執行時，您必須使用 @URL.Content 來正確參考這些資源。

按 CTRL+F5 執行應用程式。選取編輯連結，然後將插入點放入 ReleaseDate 欄位。隨即顯示 jQuery UI 快顯行事曆。

就像大部分的 jQuery 控制項一樣，datepicker 可讓您廣泛自訂它。如需詳細資訊，請參閱視覺化自訂：在 jQuery UI 網站上設計 jQuery UI 主題。

支援 HTML5 日期輸入控制項

隨著瀏覽器支援 HTML5，您將想要使用原生 HTML5 輸入，例如 date 輸入元素，而不使用 jQuery UI 行事曆。如果瀏覽器支援 HTML5 控制項，您可以將邏輯新增至應用程式，以自動使用 HTML5 控制項。若要這樣做，請使用下列內容取代 DatePickerReady.js 檔案的內容：

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

此腳本的第一行會使用 Modernizr 來確認支援 HTML5 日期輸入。如果不支援，則會改為連結 jQuery UI 日期選擇器。 (Modernizr 是開放原始碼 JavaScript 程式庫，可偵測 HTML5 和 CSS3 原生實作的可用性。Modernizr 會包含在您所建立的任何新 ASP.NET MVC 專案中。)

進行這項變更之後，您可以使用支援 HTML5 的瀏覽器進行測試，例如 Opera 11。使用 HTML5 相容的瀏覽器執行應用程式，並編輯電影專案。會使用 HTML5 日期控制項，而不是 jQuery UI 快顯行事曆：

因為新版本的瀏覽器會以累加方式實作 HTML5，所以目前良好的方法是將程式碼新增至您的網站，以容納各種不同的 HTML5 支援。例如，以下顯示更健全 的DatePickerReady.js 腳本，可讓您的網站支援僅部分支援 HTML5 日期控制項的瀏覽器。

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

此腳本會選取不支援 HTML5 日期控制項之類型的 date HTML5 input 元素。針對這些元素，它會連結 jQuery UI 快顯行事曆， type 然後將屬性從 date 變更為 text 。藉由將 type 屬性從 date 變更為 text ，就會消除部分 HTML5 日期支援。您可以在JSFIDDLE找到更強大的DatePickerReady.js腳本。

將可為 Null 的日期新增至範本

如果您使用其中一個現有的日期範本並傳遞 Null 日期，您將會收到執行階段錯誤。若要讓日期範本更健全，您將加以變更以處理 Null 值。若要支援可為 Null 的日期，請將 Views\Shared\DisplayTemplates\DateTime.cshtml 中的程式碼變更為下列內容：

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

當模型為 null時，程式碼會傳回空字串。

將 Views\Shared\EditorTemplates\Date.cshtml 檔案中的程式碼變更為下列內容：

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

當此程式碼執行時，如果模型不是 Null，則會使用模型 DateTime 的值。如果模型為 null，則會改用目前的日期。

包裝

本教學課程涵蓋 ASP.NET 樣板化協助程式的基本概念，並示範如何在 ASP.NET MVC 應用程式中使用 jQuery UI datepicker 快顯行事曆。如需詳細資訊，請嘗試下列資源：

如需 jQuery UI 的相關資訊，請參閱 jQuery UI。
如需如何將 datepicker 控制項當地語系化的資訊，請參閱 UI/Datepicker/Localization。
如需 ASP.NET MVC 範本的詳細資訊，請參閱 ASP.NET MVC 2 範本上的 Brad Wilson 部落格系列。雖然此系列是針對 ASP.NET MVC 2 所撰寫，但材質仍適用于目前版本的 ASP.NET MVC。

[上一步]

共用方式為

新增編輯日期的範本

支援 HTML5 日期輸入控制項

將可為 Null 的日期新增至範本

包裝

意見反應

意見反應

其他資源

共用方式為

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

新增編輯日期的範本

使用 NuGet 新增 jQuery UI Datepicker 快顯行事曆

支援 HTML5 日期輸入控制項

將可為 Null 的日期新增至範本

包裝

意見反應

意見反應

其他資源