Integrieren von JQuery UI Datepicker in Modellbindung und Webformulare

von Tom FitzMacken

In dieser Lernprogrammreihe werden grundlegende Aspekte der Verwendung der Modellbindung mit einem ASP.NET Web Forms-Projekt veranschaulicht. Die Modellbindung macht die Dateninteraktion einfacher als das Behandeln von Datenquellenobjekten (z. B. ObjectDataSource oder SqlDataSource). Diese Reihe beginnt mit Einführungsmaterial und wechselt zu komplexeren Konzepten in späteren Lernprogrammen.

In diesem Lernprogramm wird gezeigt, wie Sie das JQuery UI Datepicker-Widget zu einem Webformular hinzufügen und die Modellbindung verwenden, um die Datenbank mit dem ausgewählten Wert zu aktualisieren.

Dieses Lernprogramm basiert auf dem Projekt, das in den ersten und zweiten Teilen der Reihe erstellt wurde.

Sie können das vollständige Projekt in C# oder VB herunterladen . Der herunterladbare Code funktioniert entweder mit Visual Studio 2012 oder Visual Studio 2013. Sie verwendet die Visual Studio 2012-Vorlage, die sich geringfügig von der visual Studio 2013-Vorlage unterscheidet, die in diesem Lernprogramm gezeigt wird.

Was Sie erstellen werden

In diesem Tutorial gehen Sie wie folgt vor:

1. Fügen Sie Ihrem Modell eine Eigenschaft hinzu, um das Anmeldedatum des Kursteilnehmers aufzuzeichnen.
2. Aktivieren des Benutzers zum Auswählen des Registrierungsdatums mithilfe des JQuery UI Datepicker-Widgets
3. Durchsetzung von Validierungsregeln für das Immatrikulationsdatum

Mit dem JQuery UI Datepicker-Widget können Benutzer ganz einfach ein Datum aus einem Kalender auswählen, der angezeigt wird, wenn der Benutzer mit dem Feld interagiert. Die Verwendung dieses Widgets kann für Benutzer bequemer sein als manuelle Eingabe eines Datums. Das Integrieren des Datepicker-Widgets in eine Seite, die die Modellbindung für Datenvorgänge verwendet, erfordert nur eine geringe Menge zusätzlicher Arbeit.

Hinzufügen einer neuen Eigenschaft zum Modell

Zuerst fügen Sie Ihrem Student-Modell eine Datetime-Eigenschaft hinzu und migrieren diese Änderung in die Datenbank. Öffnen Sie UniversityModels.cs, und fügen Sie dem Schülermodell den hervorgehobenen Code hinzu.

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 ist enthalten, um Gültigkeitsprüfungsregeln für die Eigenschaft zu erzwingen. Für dieses Lernprogramm wird davon ausgegangen, dass die Contoso University am 1. Januar 2013 gegründet wurde und daher frühere Anmeldedaten ungültig sind.

Fügen Sie im Fenster "Paketverwaltung" eine Migration hinzu, indem Sie das Befehls-Add-Migration AddEnrollmentDate ausführen. Beachten Sie, dass der Migrationscode der Tabelle "Student" die neue Spalte "Datetime" hinzufügt. Um dem wert zu entsprechen, den Sie im RangeAttribute angegeben haben, fügen Sie einen Standardwert für die neue Spalte hinzu, wie im folgenden hervorgehobenen Code dargestellt.

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

Speichern Sie Ihre Änderung in der Migrationsdatei.

Sie müssen die Daten nicht erneut initialisieren. Öffnen Sie daher Configuration.cs im Ordner "Migrationen", und entfernen oder kommentieren Sie den Code in der Seed-Methode aus. Speichern und schließen Sie die Datei.

Führen Sie jetzt den Befehl update-database aus. Beachten Sie, dass die Spalte jetzt in der Datenbank vorhanden ist und alle vorhandenen Datensätze den Standardwert für EnrollmentDate aufweisen.

Hinzufügen dynamischer Steuerelemente für das Registrierungsdatum

Sie fügen nun Steuerelemente zum Anzeigen und Bearbeiten des Registrierungsdatums hinzu. An diesem Punkt wird der Wert über ein Textfeld bearbeitet. Später im Tutorial ändern Sie das Textfeld in das JQuery Datepicker-Widget.

Zunächst ist es wichtig zu beachten, dass Sie keine Änderung an der AddStudent.aspx Datei vornehmen müssen. Das DynamicEntity-Steuerelement rendert automatisch die neue Eigenschaft.

Öffnen Sie Students.aspx, und fügen Sie den folgenden hervorgehobenen Code hinzu.

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

Führen Sie die Anwendung aus, und beachten Sie, dass Sie den Wert des Registrierungsdatums festlegen können, indem Sie ein Datum eingeben. Beim Hinzufügen eines neuen Kursteilnehmers:

Oder bearbeiten Sie einen vorhandenen Wert:

Das Eingeben des Datums funktioniert, aber es ist möglicherweise nicht die Kundenerfahrung, die Sie bereitstellen möchten. Im nächsten Abschnitt aktivieren Sie die Auswahl eines Datums über einen Kalender.

Installieren des NuGet-Pakets für die Arbeit mit JQuery UI

Das Juice UI NuGet-Paket ermöglicht eine einfache Integration der JQuery UI-Widgets in Ihre Webanwendung. Um dieses Paket zu verwenden, installieren Sie es über NuGet.

Die version von Juice UI, die Sie installieren, kann mit der Version von JQuery in Ihrer Anwendung in Konflikt geraten. Bevor Sie mit diesem Lernprogramm fortfahren, versuchen Sie, Ihre Anwendung auszuführen. Wenn ein JavaScript-Fehler auftritt, müssen Sie die JQuery-Version abgleichen. Sie können entweder die erwartete Version von JQuery zu Ihrem Skriptordner hinzufügen (Version 1.8.2 zum Zeitpunkt des Schreibens dieses Lernprogramms), oder in Site.master geben Sie den Pfad zur JQuery-Datei an.

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

Anpassen der DateTime-Vorlage, um das Datepicker-Widget einzuschließen

Sie fügen das Datepicker-Widget zur dynamischen Datenvorlage zum Bearbeiten eines Datetime-Werts hinzu. Durch Hinzufügen des Widgets zur Vorlage wird es automatisch sowohl im Formular zum Hinzufügen eines neuen Kursteilnehmers als auch in der Rasteransicht zum Bearbeiten von Kursteilnehmern gerendert. Öffnen Sie DateTime_Edit.ascx, und fügen Sie den folgenden hervorgehobenen Code hinzu.

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

In der CodeBehind-Datei legen Sie die Mindest- und Höchstdaten für das DatePicker-Element fest. Durch Festlegen dieser Werte verhindern Sie, dass Benutzer zu ungültigen Datumsangaben navigieren. Sie rufen die Mindest- und Höchstwerte aus dem RangeAttribute für die DateTime-Eigenschaft ab, wenn eine angegeben wird. Öffnen Sie DateTime_Edit.ascx.cs, und fügen Sie der Page_Load-Methode den folgenden hervorgehobenen Code hinzu.

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

Führen Sie die Webanwendung aus, und navigieren Sie zur AddStudent-Seite. Geben Sie Werte für die Felder an, und beachten Sie, dass beim Klicken auf das Textfeld für das Registrierungsdatum der Kalender angezeigt wird.

Wählen Sie ein Datum aus, und klicken Sie auf "Einfügen". RangeAttribute erzwingt die Überprüfung auf dem Server. Durch Festlegen der minDate-Eigenschaft auf dem Datepicker wenden Sie auch die Überprüfung auf den Client an. Der Kalender lässt den Benutzer nicht zu einem Datum vor dem Wert von "minDate" navigieren.

Wenn Sie einen Datensatz in der Rasteransicht bearbeiten, wird der Kalender ebenfalls angezeigt.

Fazit

In diesem Lernprogramm haben Sie gelernt, wie Sie ein JQuery-Widget in ein Webformular integrieren, das die Modellbindung verwendet.

Im nächsten Lernprogramm verwenden Sie beim Auswählen von Daten einen Abfragezeichenfolgenwert.