Integrowanie interfejsu użytkownika JQuery DatePicker z powiązaniem modelu i formularzami sieci Web

Autor FitzMacken

Ta seria samouczków pokazuje podstawowe aspekty używania powiązania modelu z projektem formularzy sieci Web ASP.NET. Powiązanie modelu sprawia, że interakcje danych są bardziej proste, niż w przypadku obiektów źródła danych (np. ObjectDataSource lub kontrolki SqlDataSource). Ta seria rozpoczyna się od materiału wstępnego i przenosi do bardziej zaawansowanych koncepcji w kolejnych samouczkach.

W tym samouczku pokazano, jak dodać widżet DatePicker interfejsu użytkownika jQuery do formularza sieci Web, a następnie użyć powiązania modelu w celu zaktualizowania bazy danych przy użyciu wybranej wartości.

Ten samouczek jest oparty na projekcie utworzonym w pierwszej i drugiej części serii.

Możesz pobrać kompletny projekt w C# języku lub VB. Kod do pobrania współ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 Visual Studio 2013 przedstawiony w tym samouczku.

Co będziesz kompilować

W tym samouczku przedstawiono następujące instrukcje:

  1. Dodaj właściwość do modelu, aby zarejestrować datę rejestracji ucznia
  2. Umożliwia użytkownikowi wybranie daty rejestracji za pomocą widżetu DatePicker interfejsu użytkownika JQuery
  3. Wymuś reguły walidacji dla daty rejestracji

Widżet DatePicker interfejsu użytkownika JQuery pozwala użytkownikom łatwo wybrać datę z kalendarza, który pojawia się, gdy użytkownik współdziała z polem. Korzystanie z tego widżetu może być wygodniejsze dla użytkowników niż Ręczne wpisywanie daty. Integrowanie widżetu DatePicker ze stroną, która używa powiązania modelu dla operacji na danych, wymaga jedynie niewielkiej ilości dodatkowego nakładu pracy.

Dodaj nową właściwość do modelu

Najpierw należy dodać właściwość DateTime do modelu studenta i zmigrować tę zmianę do bazy danych. Otwórz UniversityModels.csi Dodaj wyróżniony kod do modelu ucznia.

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

Element RangeAttribute jest dołączany do wymuszania reguł walidacji dla właściwości. W tym samouczku przyjęto założenie, że firma Contoso University była oparta na 1 stycznia 2013 i dlatego wcześniejsze daty rejestracji 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 polu 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 zmiany w pliku migracji.

Nie trzeba ponownie wypełniać danych. W związku z tym Otwórz Configuration.cs w folderze migrations i Usuń lub Skomentuj kod w metodzie inicjatora . Zapisz i zamknij plik.

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

Dodaj kontrolki dynamiczne 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 tego samouczka zmienisz pole tekstowe do widżetu JQuery DatePicker.

Najpierw należy zauważyć, że nie trzeba wprowadzać zmian w pliku addstudent. aspx . Kontrolka DynamicControl automatycznie renderuje nową właściwość.

Otwórz uczniów. aspxi 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 wartość daty rejestracji można ustawić, wpisując datę. Podczas dodawania nowego ucznia:

Ustaw datę

Lub, edytując istniejącą wartość:

Edytuj datę

Wpisywanie daty działa, ale może to nie być środowisko klienta, które chcesz podać. W następnej sekcji zostanie włączone wybieranie daty przez kalendarz.

Zainstaluj pakiet NuGet do pracy z interfejsem użytkownika JQuery

Pakiet NuGet interfejsu użytkownika soku umożliwia łatwą integrację WIDŻETÓW interfejsu użytkownika jQuery z aplikacją sieci Web. Aby użyć tego pakietu, zainstaluj go za pomocą narzędzia NuGet.

Dodaj interfejs użytkownika soku

Instalowana wersja interfejsu użytkownika soku 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, należy uzgodnić wersję JQuery. Możesz dodać oczekiwaną wersję platformy JQuery do folderu Scripts (wersja 1.8.2 w czasie pisania tego samouczka) lub w obszarze site. Master określ ścieżkę do pliku JQuery.

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

Dostosuj szablon DateTime w celu uwzględnienia widżetu DatePicker

Do edycji wartości DateTime zostanie dodany widżet DatePicker do szablonu danych dynamicznych. Przez dodanie widżetu do szablonu, jest on automatycznie renderowany w formularzu dodawania nowego ucznia i w widoku siatki do edytowania uczniów. Otwórz element DateTime_Edit. ascxi 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 związanym z kodem należy określić minimalną i maksymalną datę dla DatePicker. Ustawienie tych wartości uniemożliwi użytkownikom przechodzenie do nieprawidłowych dat. Wartości minimalne i maksymalne zostaną pobrane z klasy RangeAttribute we właściwości DateTime, jeśli została podana. Otwórz element DateTime_Edit.ascx.csi Dodaj następujący wyróżniony kod do strony_metody ładowania.

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ę sieci Web i przejdź do strony addstudent. Podaj wartości pól i Zauważ, że po kliknięciu pola tekstowego dla daty rejestracji zostanie wyświetlony kalendarz.

wybór daty

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

Podczas edytowania rekordu w widoku siatki zostanie również wyświetlony kalendarz.

DatePicker w GridView

Podsumowanie

W tym samouczku dowiesz się, jak dołączyć widżet JQuery do formularza sieci Web, który używa powiązania modelu.

W następnym samouczkupodczas wybierania danych zostanie użyta wartość ciągu zapytania.