将 JQuery UI Datepicker 与模型绑定和 Web 窗体集成

作者 Tom FitzMacken

本教程系列演示了将模型绑定与 ASP.NET Web Forms项目配合使用的基本方面。 模型绑定使数据交互比处理数据源对象（如 ObjectDataSource 或 SqlDataSource) ） (更直接。 本系列从介绍性材料开始，在后面的教程中将介绍更高级的概念。

本教程演示如何将 JQuery UI Datepicker 小组件 添加到 Web 窗体，并使用模型绑定使用所选值更新数据库。

本教程基于在系列 的第一 部分和第 二 部分中创建的项目。

可以使用 C# 或 VB 下载 完整的项目。 可下载的代码适用于 Visual Studio 2012 或 Visual Studio 2013。 它使用 Visual Studio 2012 模板，该模板与本教程中显示的Visual Studio 2013模板略有不同。

生成目标

在本教程中，你将：

1. 向模型添加属性以记录学生的注册日期
2. 允许用户使用 JQuery UI Datepicker 小组件选择注册日期
3. 强制实施注册日期的验证规则

JQuery UI Datepicker 小组件使用户能够轻松地从用户与字段交互时弹出的日历中选择日期。 比手动键入日期更方便用户使用此小组件。 将 Datepicker 小组件集成到使用模型绑定执行数据操作的页面中只需少量的额外工作。

向模型添加新属性

首先，将 Datetime 属性添加到 Student 模型，并将该更改迁移到数据库。 打开 UniversityModels.cs，并将突出显示的代码添加到学生模型。

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

使用 Juice UI NuGet 包，可以轻松地将 JQuery UI 小组件集成到 Web 应用程序中。 若要使用此包，请通过 NuGet 进行安装。

安装的 Juice UI 版本可能与应用程序中的 JQuery 版本冲突。 在继续学习本教程之前，请尝试运行应用程序。 如果遇到 JavaScript 错误，则需要协调 JQuery 版本。 在编写本教程) 时，可以将预期版本的 JQuery 添加到 Scripts 文件夹 (版本 1.8.2，或在 Site.master 中指定 JQuery 文件的路径。

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

自定义 DateTime 模板以包含 Datepicker 小组件

将 Datepicker 小组件添加到动态数据模板中，以便编辑日期时间值。 通过将小组件添加到模板中，它会自动呈现在用于添加新学生的窗体和用于编辑学生的网格视图中。 打开 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 值之前的日期。

在网格视图中编辑记录时，也会显示日历。

结论

本教程介绍了如何将 JQuery 小组件合并到使用模型绑定的 Web 窗体中。

在下一 教程中，选择数据时将使用查询字符串值。

上一页下一页