Integracja JQuery UI Datepicker z wiązaniem modelu i formularzami webowymi

Autor: Tom FitzMacken

W tej serii samouczków przedstawiono podstawowe aspekty używania powiązania modelu z projektem ASP.NET Web Forms. Powiązanie modelu sprawia, że interakcja danych jest bardziej prosta niż w przypadku obiektów źródła danych (takich jak ObjectDataSource lub SqlDataSource). Ta seria rozpoczyna się od materiałów wprowadzających i przechodzi do bardziej zaawansowanych pojęć w kolejnych samouczkach.

W tym samouczku pokazano, jak dodać widżet datepicker interfejsu użytkownika JQuery do formularza internetowego i użyć powiązania modelu, aby zaktualizować bazę danych przy użyciu wybranej wartości.

Ten samouczek opiera się na projekcie utworzonym w pierwszej i drugiej części serii.

Kompletny projekt można pobrać w języku C# lub VB. Kod do pobrania działa z programem Visual Studio 2012 lub Visual Studio 2013. Używa szablonu programu Visual Studio 2012, który jest nieco inny niż szablon programu Visual Studio 2013 przedstawiony w tym samouczku.

Co będziesz tworzyć

W tym samouczku nauczysz się:

1. Dodaj właściwość do modelu, aby zarejestrować datę zapisania się ucznia
2. Umożliwia użytkownikowi wybór daty rejestracji za pomocą widżetu Datepicker z jQuery UI
3. Wymuszanie reguł walidacji dla daty rejestracji

Widżet datepicker interfejsu użytkownika JQuery umożliwia użytkownikom łatwe wybieranie daty z kalendarza, który pojawia się, gdy użytkownik wchodzi w interakcję z polem. Korzystanie z tego widżetu może być wygodniejsze dla użytkowników niż ręczne wpisywanie daty. Zintegrowanie widżetu platformy Datepicker ze stroną korzystającą z powiązania modelu na potrzeby operacji danych wymaga tylko niewielkiej ilości dodatkowej pracy.

Dodawanie nowej właściwości do modelu

Najpierw dodasz właściwość Datetime do modelu Student i zmigrujesz te zmiany do bazy danych. Otwórz UniversityModels.cs i dodaj wyróżniony kod do modelu 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; }
}

Atrybut RangeAttribute jest dołączany do wymuszania reguł walidacji dla właściwości. W tym samouczku zakładamy, że Uniwersytet Contoso został założony 1 stycznia 2013 r., dlatego wcześniejsze daty zapisów są nieprawidłowe.

W oknie Zarządzanie pakietami dodaj migrację, uruchamiając polecenie add-migration AddEnrollmentDate. Zwróć uwagę, że kod migracji dodaje nową kolumnę Datetime do tabeli Student. Aby dopasować wartość określoną w poleceniu RangeAttribute, dodaj wartość domyślną dla nowej kolumny, jak pokazano w wyróżnionym kodzie poniżej.

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");
        }
    }
}

Zapisz zmianę w pliku migracji.

Nie trzeba ponownie inicjalizować danych. W związku z tym otwórz Configuration.cs w folderze Migrations i usuń lub oznacz jako komentarz kod w metodzie Seed . Zapisz i zamknij plik.

Teraz uruchom polecenie update-database. Zwróć uwagę, że kolumna istnieje teraz w bazie danych, a wszystkie istniejące rekordy mają wartość domyślną EnrollmentDate.

Dodawanie kontrolek dynamicznych dla daty rejestracji

Teraz dodasz kontrolki do wyświetlania i edytowania daty rejestracji. W tym momencie wartość jest edytowana za pomocą pola tekstowego. W dalszej części samouczka zmienisz pole tekstowe na widżet JQuery Datepicker.

Najpierw należy pamiętać, że nie trzeba wprowadzać żadnych zmian w pliku AddStudent.aspx . Kontrolka DynamicEntity automatycznie renderuje nową właściwość.

Otwórz Students.aspx i dodaj następujący wyróżniony kod.

<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>

Uruchom aplikację i zwróć uwagę, że możesz ustawić wartość daty rejestracji, wpisując datę. Podczas dodawania nowego ucznia:

Możesz też edytować istniejącą wartość:

Wpisywanie daty działa, ale może nie być doświadczeniem klienta, które chcesz zapewnić. W następnej sekcji włączysz wybieranie daty w kalendarzu.

Instalowanie pakietu NuGet do pracy z interfejsem użytkownika JQuery

Pakiet NuGet Juice UI umożliwia łatwą integrację widżetów JQuery UI z Twoją aplikacją internetową. Aby użyć tego pakietu, zainstaluj go za pomocą narzędzia NuGet.

Zainstalowana wersja Juice UI może powodować konflikt z wersją JQuery w aplikacji. Przed kontynuowaniem pracy z tym samouczkiem spróbuj uruchomić aplikację. Jeśli wystąpi błąd języka JavaScript, musisz uzgodnić wersję zapytania JQuery. Możesz dodać oczekiwaną wersję JQuery do folderu Scripts (wersja 1.8.2 w momencie pisania tego samouczka) lub w obrazie Site.master określ ścieżkę dostępu do pliku JQuery.

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

Dostosowywanie szablonu DateTime w celu uwzględnienia widżetu platformy Datepicker

Widżet Datepicker zostanie dodany do dynamicznego szablonu danych do edytowania wartości daty/godziny. Dodając widżet do szablonu, jest on automatycznie renderowany zarówno w formularzu do dodawania nowego ucznia, jak i w widoku siatki do edycji uczniów. Otwórz plik DateTime_Edit.ascx i dodaj następujący wyróżniony kod.

<%@ 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" />

W pliku code-behind ustawisz minimalną i maksymalną datę dla kontrolki DatePicker. Ustawiając te wartości, uniemożliwisz użytkownikom przechodzenie do nieprawidłowych dat. Jeśli zostanie podana właściwość DateTime, pobierzesz wartości minimalne i maksymalne z atrybutu RangeAttribute . Otwórz DateTime_Edit.ascx.cs i dodaj następujący wyróżniony kod do metody 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();
    }
}

Uruchom aplikację internetową i przejdź do strony AddStudent. Podaj wartości pól i zwróć uwagę, że po kliknięciu pola tekstowego Data rejestracji zostanie wyświetlony kalendarz.

Wybierz datę, a następnie kliknij przycisk Wstaw. Atrybut RangeAttribute wymusza walidację na serwerze. Ustawiając właściwość minDate na platformie Datepicker, należy również zastosować walidację na kliencie. Kalendarz nie zezwala użytkownikowi na przechodzenie do daty przed wartością minDate.

Podczas edytowania rekordu w widoku siatki jest również wyświetlany kalendarz.

Podsumowanie

W tym samouczku przedstawiono sposób dołączania widżetu JQuery do formularza internetowego korzystającego z powiązania modelu.

W następnym samouczku użyjesz parametru ciągu zapytania podczas wybierania danych.