Интеграция JQuery UI Datepicker с привязкой модели и веб-формами

Tom FitzMacken

В этом руководстве показаны основные аспекты использования привязки модели с проектом веб-форм ASP.NET. Привязка модели позволяет напрямую взаимодействовать с данными, чем с объектами источника данных (например, ObjectDataSource или SqlDataSource). Эта серия начинается с вводного материала и переходит к более сложным концепциям в последующих руководствах.

В этом руководстве показано, как добавить мини-приложение JQuery UI Datepicker в веб-форму и использовать привязку модели для обновления базы данных с выбранным значением.

Это руководство основывается на проекте, созданном в первой и второй частях серии.

Полный проект можно скачать в 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 и добавьте выделенный код в модель 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 был основан 1 января 2013 года, и поэтому более ранние даты зачисления не являются допустимыми.

В окне управления пакетами добавьте миграцию, выполнив команду 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");
        }
    }
}

Сохраните изменения в файле миграции.

Вам не нужно снова инициализировать данные. Поэтому откройте Configuration.cs в папке Migrations и удалите или закомментируйте код в методе 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

Пакет NuGet Juice UI позволяет легко интегрировать виджеты JQuery UI в ваше веб-приложение. Чтобы использовать этот пакет, установите его через NuGet.

добавление Juice UI

Версия Juice UI, которую вы устанавливаете, может конфликтовать с версией JQuery в вашем приложении. Прежде чем продолжить работу с этим руководством, попробуйте запустить приложение. Если возникла ошибка JavaScript, необходимо выполнить согласование версии JQuery. Вы можете добавить ожидаемую версию JQuery в папку "Скрипты" (версия 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. Задав эти значения, пользователи не смогут переходить к недопустимым датам. Вы получите минимальные и максимальные значения из RangeAttribute в свойстве DateTime, если он указан. Откройте 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();
    }
}

Запустите веб-приложение и перейдите на страницу AddStudent. Укажите значения полей и обратите внимание, что при щелчке текстового поля для даты регистрации отображается календарь.

Выбор даты

Выберите дату и нажмите кнопку "Вставить". RangeAttribute применяет проверку на сервере. Задав свойство minDate в Datepicker, вы также применяете проверку к клиенту. Календарь не позволяет пользователю переходить к дате до значения minDate.

При изменении записи в представлении сетки календарь также отображается.

Выбор даты в сетке

Conclusion

В этом руководстве вы узнали, как включить мини-приложение JQuery в веб-форму, использующую привязку модели.

В следующем руководстве при выборе данных будет использоваться строковое значение запроса.

НазадДалее

  • Last updated on