整合 JQuery UI Datepicker 與模型系結和 Web 表單

發行項
07/13/2023

本教學課程系列示範搭配 ASP.NET Web Forms專案使用模型系結的基本層面。模型系結讓資料互動比處理資料來源物件更直接， (例如 ObjectDataSource 或 SqlDataSource) 。本系列從簡介內容開始，並移至稍後教學課程中的更進階概念。

本教學課程示範如何將 JQuery UI Datepicker 小工具新增至 Web Form，並使用模型系結以選取的值更新資料庫。

本教學課程是以系列第一個和第二個部分建立的專案為基礎。

您可以在 C# 或 VB 中下載完整的專案。可下載的程式碼適用于 Visual Studio 2012 或 Visual Studio 2013。它會使用 Visual Studio 2012 範本，這與本教學課程中顯示的Visual Studio 2013範本稍有不同。

您將建置什麼

在本教學課程中，您將會：

將屬性新增至您的模型，以記錄學生的註冊日期
讓使用者使用 JQuery UI Datepicker 小工具選取註冊日期
強制執行註冊日期的驗證規則

JQuery UI Datepicker 小工具可讓使用者輕鬆地從使用者與欄位互動時快顯的行事曆中選取日期。相較于手動輸入日期，使用此小工具可讓使用者更方便。將 Datepicker 小工具整合到使用資料作業模型系結的頁面只需要少量的額外工作。

將新的屬性新增至模型

首先，您會將 Datetime 屬性新增至 Student 模型，並將該變更移轉至資料庫。開啟 UniversityModels.cs，並將醒目提示的程式碼新增至 Student 模型。

public class Student
{
    [Key, Display(Name = "ID")]
    [ScaffoldColumn(false)]
    public int StudentID { get; set; }

    [Required, StringLength(40), Display(Name="Last Name")]
    public string LastName { get; set; }

    [Required, StringLength(20), Display(Name = "First Name")]
    public string FirstName { get; set; }

    [EnumDataType(typeof(YearEnum)), Display(Name = "Academic Year")]
    public YearEnum AcademicYear { get; set; }

    [Range(typeof(DateTime), "1/1/2013", "1/1/3000", ErrorMessage="Please provide an enrollment date after 1/1/2013")]
    [DisplayFormat(ApplyFormatInEditMode=true, DataFormatString="{0:d}")]
    public DateTime EnrollmentDate { get; set; }

    public virtual ICollection Enrollments { get; set; }
}

包含 RangeAttribute以強制執行屬性的驗證規則。在本教學課程中，我們將假設 Contoso University 于 2013 年 1 月 1 日找到，因此先前的註冊日期無效。

在 [封裝管理] 視窗中，執行命令 add-migration AddEnrollmentDate 來新增移轉。請注意，移轉程式碼會將新的 Datetime 資料行新增至 Student 資料表。若要符合您在 RangeAttribute 中指定的值，請新增新資料行的預設值，如以下醒目提示的程式碼所示。

namespace ContosoUniversity.Migrations
{
    using System;
    using System.Data.Entity.Migrations;
    
    public partial class AddEnrollmentDate : DbMigration
    {
        public override void Up()
        {
            AddColumn("dbo.Students", "EnrollmentDate", c => 
              c.DateTime(nullable: false, defaultValue: new DateTime(2013, 1, 1)));
        }
        
        public override void Down()
        {
            DropColumn("dbo.Students", "EnrollmentDate");
        }
    }
}

將變更儲存至移轉檔案。

您不需要再次植入資料。因此，在 Migrations 資料夾中開啟 Configuration.cs ，然後移除或批註 Seed 方法中的程式碼。儲存並關閉檔案。

現在，執行命令 update-database。請注意，資料行現在存在於資料庫中，而且所有現有的記錄都有 EnrollmentDate 的預設值。

新增註冊日期的動態控制項

您現在會新增控制項來顯示和編輯註冊日期。此時，值會透過文字方塊編輯。稍後在本教學課程中，您會將文字方塊變更為 JQuery Datepicker 小工具。

首先，請務必注意，您不需要對 AddStudent.aspx 檔案進行任何變更。 DynamicEntity 控制項會自動轉譯新的屬性。

開啟 Students.aspx，並新增下列醒目提示的程式碼。

<asp:GridView runat="server" ID="studentsGrid"
        ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
        SelectMethod="studentsGrid_GetData"
        UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
        AllowSorting="true" AllowPaging="true" PageSize="4"
        AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"   
        AutoGenerateColumns="false">
  <Columns>
    <asp:DynamicField DataField="StudentID" />
    <asp:DynamicField DataField="LastName" />
    <asp:DynamicField DataField="FirstName" />
    <asp:DynamicField DataField="Year" />
    <asp:DynamicField DataField="EnrollmentDate" />
    <asp:TemplateField HeaderText="Total Credits">
      <ItemTemplate>
        <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>" 
            runat="server" />
      </ItemTemplate>
    </asp:TemplateField>        
  </Columns>
</asp:GridView>

執行應用程式，並注意您可以輸入日期來設定註冊日期的值。新增學生時：

設定日期

或者，編輯現有的值：

編輯日期

輸入日期可以運作，但可能不是您想要提供的客戶體驗。在下一節中，您將啟用透過行事曆選取日期。

安裝 NuGet 套件以使用 JQuery UI

「儲存體 UI NuGet」套件可讓您輕鬆地將 JQuery UI 小工具整合到 Web 應用程式中。若要使用此套件，請透過 NuGet 加以安裝。

新增冰箱 UI

您安裝之「冰箱」UI 的版本可能會與應用程式中的 JQuery 版本發生衝突。繼續進行本教學課程之前，請嘗試執行您的應用程式。如果您遇到 JavaScript 錯誤，則需要協調 JQuery 版本。您可以在撰寫本教學課程) 或 Site.master 中指定 JQuery 檔案的路徑時，將預期的 JQuery 版本新增至您的 Scripts 資料夾 (1.8.2 版。

<asp:ScriptReference Name="jquery" Path="~/Scripts/jquery-1.10.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.9.2.js" />

您會將 Datepicker 小工具新增至動態資料範本，以編輯 datetime 值。藉由將小工具新增至範本，它會自動在表單中轉譯，以便新增學生，以及在編輯學生的方格檢視中呈現。開啟 DateTime_Edit.ascx，然後新增下列醒目提示的程式碼。

<%@ Control Language="C#" CodeBehind="DateTime_Edit.ascx.cs" Inherits="ContosoUniversityModelBinding.DateTime_EditField" %>

<juice:Datepicker runat="server" ID="t1" TargetControlID="TextBox1"/>
<asp:TextBox ID="TextBox1" runat="server" CssClass="DDTextBox" Text='<%# FieldValueEditString %>' Columns="20"></asp:TextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" />
<asp:CustomValidator runat="server" ID="DateValidator" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" EnableClientScript="false" Enabled="false" OnServerValidate="DateValidator_ServerValidate" />

在程式碼後置檔案中，您將設定 DatePicker 的最小和最大日期。藉由設定這些值，您將防止使用者流覽至不正確日期。如果有提供，您將會從 DateTime 屬性上的 RangeAttribute 擷取最小值和最大值。開啟 DateTime_Edit.ascx.cs，並將下列反白顯示的程式碼新增至 Page_Load 方法。

protected void Page_Load(object sender, EventArgs e) {
    TextBox1.ToolTip = Column.Description;
            
    SetUpValidator(RequiredFieldValidator1);
    SetUpValidator(RegularExpressionValidator1);
    SetUpValidator(DynamicValidator1);
    SetUpCustomValidator(DateValidator);

    RangeAttribute ra = (RangeAttribute)Column.Attributes[typeof(RangeAttribute)];
    if (ra != null)
    {
        t1.MinDate = ra.Minimum.ToString();
        t1.MaxDate = ra.Maximum.ToString();
    }
}

執行 Web 應用程式並流覽至 AddStudent 頁面。提供欄位的值，並注意當您按一下 [註冊日期] 文字方塊時，會顯示行事曆。

日期選擇器

挑選日期，然後按一下 [插入]。 RangeAttribute 會在伺服器上強制執行驗證。藉由在 Datepicker 上設定 minDate 屬性，您也可以在用戶端上套用驗證。行事曆不會讓使用者流覽至 minDate 值之前的日期。

當您在方格檢視中編輯記錄時，也會顯示行事曆。

GridView 中的 Datepicker

結論

在本教學課程中，您已瞭解如何將 JQuery 小工具併入使用模型系結的 Web 表單中。

在下一個教學課程中，您會在選取資料時使用查詢字串值。

上一個下一個

共用方式為

整合 JQuery UI Datepicker 與模型系結和 Web 表單

您將建置什麼

將新的屬性新增至模型

新增註冊日期的動態控制項

安裝 NuGet 套件以使用 JQuery UI

自訂 DateTime 範本以包含 Datepicker 小工具

結論

意見反應

其他資源