Integrera JQuery UI Datepicker med modellbindning och webbformulär

av Tom FitzMacken

Den här självstudieserien visar grundläggande aspekter av att använda modellbindning med ett ASP.NET Web Forms-projekt. Modellbindning gör datainteraktion mer direkt jämfört med att hantera datakällobjekt (till exempel ObjectDataSource eller SqlDataSource). Den här serien börjar med introduktionsmaterial och går vidare till mer avancerade koncept i senare handledningar.

Den här självstudien visar hur du lägger till JQuery UI Datepicker-widgeten i ett webbformulär och använder modellbindning för att uppdatera databasen med det valda värdet.

Den här handledningen bygger på projektet som skapades i den första och andra delen av serien.

Du kan ladda ned hela projektet i C# eller VB. Den nedladdningsbara koden fungerar med antingen Visual Studio 2012 eller Visual Studio 2013. Den använder Visual Studio 2012-mallen, som skiljer sig något från Visual Studio 2013-mallen som visas i den här självstudien.

Vad du kommer att bygga

I den här handledningen kommer du att:

1. Lägg till en egenskap i din modell för att registrera elevens registreringsdatum
2. Gör det möjligt för användaren att välja registreringsdatum med hjälp av JQuery UI Datepicker-widgeten
3. Framtvinga verifieringsregler för registreringsdatumet

Med JQuery UI Datepicker-widgeten kan användarna enkelt välja ett datum från en kalender som visas när användaren interagerar med fältet. Det kan vara enklare för användarna att använda den här widgeten än att skriva ett datum manuellt. Att integrera Datepicker-widgeten på en sida som använder modellbindning för dataåtgärder kräver bara en liten mängd ytterligare arbete.

Lägg till en ny egenskap i modellen

Först lägger du till en Datetime-egenskap i studentmodellen och migrerar den ändringen till databasen. Öppna UniversityModels.cs och lägg till den markerade koden i studentmodellen.

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 ingår för att framtvinga verifieringsregler för egenskapen. I den här självstudien förutsätter vi att Contoso University grundades den 1 januari 2013 och därför är tidigare registreringsdatum ogiltiga.

I fönstret Pakethantering lägger du till en migrering genom att köra kommandot add-migration AddEnrollmentDate. Observera att migreringskoden lägger till den nya Datetime-kolumnen i tabellen Student. Om du vill matcha det värde som du angav i RangeAttribute lägger du till ett standardvärde för den nya kolumnen, som du ser i den markerade koden nedan.

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

Spara ändringen i migreringsfilen.

Du behöver inte initiera data igen. Öppna därför Configuration.cs i mappen Migreringar och ta bort eller kommentera ut koden i seed-metoden . Spara och stäng filen.

Kör nu kommandot update-database. Observera att kolumnen nu finns i databasen och att alla befintliga poster har standardvärdet för EnrollmentDate.

Lägga till dynamiska kontroller för registreringsdatum

Nu ska du lägga till kontroller för att visa och redigera registreringsdatumet. I det här läget redigeras värdet via en textruta. Senare i handledningen kommer du att ändra textrutan till JQuery Datepicker-widgeten.

För det första är det viktigt att observera att du inte behöver göra några ändringar i AddStudent.aspx-filen . DynamicEntity-kontrollen återger automatiskt den nya egenskapen.

Öppna Students.aspx och lägg till följande markerade 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>

Kör programmet och observera att du kan ange värdet för registreringsdatumet genom att skriva ett datum. När du lägger till en ny elev:

Eller redigera ett befintligt värde:

Att skriva datumet fungerar, men det kanske inte är den kundupplevelse du vill tillhandahålla. I nästa avsnitt aktiverar du att välja ett datum via en kalender.

Installera NuGet-paketet för att fungera med JQuery-användargränssnittet

Juice UI NuGet-paketet möjliggör enkel integrering av JQuery UI-widgetarna i webbappen. Om du vill använda det här paketet installerar du det via NuGet.

Den version av Juice-användargränssnittet som du installerar kan vara i konflikt med versionen av JQuery i ditt program. Innan du fortsätter med handledningen, försök att köra din applikation. Om du får ett JavaScript-fel måste du stämma av JQuery-versionen. Du kan antingen lägga till den förväntade versionen av JQuery i mappen Scripts (version 1.8.2 när du skriver den här självstudien) eller i Site.master ange sökvägen till JQuery-filen.

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

Anpassa DateTime-mall för att inkludera Datepicker-widget

Du lägger till Datepicker-widgeten i den dynamiska datamallen för redigering av ett datetime-värde. Genom att lägga till widgeten i mallen återges den automatiskt i både formuläret för att lägga till en ny elev och i rutnätsvyn för redigering av elever. Öppna DateTime_Edit.ascx och lägg till följande markerade 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" />

I filen code-behind anger du minsta och högsta datum för DatePicker. Genom att ange dessa värden förhindrar du att användare navigerar till ogiltiga datum. Du hämtar minimi- och maxvärdena från RangeAttribute på egenskapen DateTime, om en anges. Öppna DateTime_Edit.ascx.cs och lägg till följande markerade kod i metoden 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();
    }
}

Kör webbprogrammet och gå till sidan Lägg till student. Ange värden för fälten och observera att kalendern visas när du klickar på textrutan för Registreringsdatum.

Välj ett datum och klicka på Infoga. RangeAttribute framtvingar validering på servern. Genom att ange egenskapen minDate på Datepicker tillämpar du även validering på klienten. Kalendern låter inte användaren navigera till ett datum före värdet minDate.

När du redigerar en post i rutnätsvyn visas även kalendern.

Conclusion

I den här självstudien har du lärt dig hur du införlivar en JQuery-widget i ett webbformulär som använder modellbindning.

I nästa självstudie använder du ett frågesträngsvärde när du väljer data.