Integrazione di JQuery UI Datepicker con l'associazione di modelli e il web form

di Tom FitzMacken

Questa serie di esercitazioni illustra gli aspetti di base dell'uso dell'associazione di modelli con un progetto Web Form ASP.NET. L'associazione di modelli rende l'interazione dei dati più semplice rispetto alla gestione di oggetti origine dati, ad esempio ObjectDataSource o SqlDataSource. Questa serie inizia con materiale introduttivo e passa a concetti più avanzati nelle esercitazioni successive.

Questa esercitazione illustra come aggiungere il widget Datepicker dell'interfaccia utente JQuery a un Web Form e usare l'associazione di modelli per aggiornare il database con il valore selezionato.

Questa esercitazione si basa sul progetto creato nella prima e nella seconda parte della serie.

È possibile scaricare il progetto completo in C# o VB. Il codice scaricabile funziona con Visual Studio 2012 o Visual Studio 2013. Usa il modello di Visual Studio 2012, leggermente diverso dal modello di Visual Studio 2013 illustrato in questa esercitazione.

Cosa costruirai

In questa esercitazione si apprenderà come:

1. Aggiungere una proprietà al modello per registrare la data di registrazione dello studente
2. Abilitare l'utente per selezionare la data di registrazione usando il widget Datepicker dell'interfaccia utente JQuery
3. Applicare le regole di convalida per la data di registrazione

Il widget Datepicker dell'interfaccia utente di JQuery consente agli utenti di selezionare facilmente una data da un calendario che viene visualizzato quando l'utente interagisce con il campo. L'uso di questo widget può essere più pratico per gli utenti rispetto alla digitazione manuale di una data. L'integrazione del widget Datepicker in una pagina che usa l'associazione di modelli per le operazioni sui dati richiede solo una piccola quantità di lavoro aggiuntivo.

Aggiungere una nuova proprietà al modello

Prima di tutto, si aggiungerà una proprietà Datetime al modello Student e si eseguirà la migrazione di tale modifica al database. Aprire UniversityModels.cs e aggiungere il codice evidenziato al modello 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 è incluso per applicare le regole di convalida per la proprietà . Per questa esercitazione si presuppone che Contoso University sia stata fondata il 1° gennaio 2013 e pertanto le date di registrazione precedenti non siano valide.

Nella finestra Gestione pacchetti aggiungere una migrazione eseguendo il comando add-migration AddEnrollmentDate. Si noti che il codice di migrazione aggiunge la nuova colonna Datetime alla tabella Student. Per trovare la corrispondenza con il valore specificato in RangeAttribute, aggiungere un valore predefinito per la nuova colonna, come illustrato nel codice evidenziato di seguito.

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

Salvare la modifica nel file di migrazione.

Non è necessario eseguire di nuovo il seeding dei dati. Pertanto, aprire Configuration.cs nella cartella Migrations e rimuovere o impostare come commento il codice all'interno del metodo Seed. Salva e chiudi il file.

Eseguire ora il comando update-database. Si noti che la colonna esiste ora nel database e tutti i record esistenti hanno il valore predefinito per EnrollmentDate.

Aggiungere controlli dinamici per la data di registrazione

A questo punto verranno aggiunti controlli per la visualizzazione e la modifica della data di registrazione. A questo punto, il valore viene modificato tramite una casella di testo. Più avanti nell'esercitazione, la casella di testo verrà modificata nel widget JQuery Datepicker.

Prima di tutto, è importante notare che non è necessario apportare alcuna modifica al file AddStudent.aspx . Il controllo DynamicEntity eseguirà automaticamente il rendering della nuova proprietà.

Aprire Students.aspx e aggiungere il codice evidenziato seguente.

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

Eseguire l'applicazione e notare che è possibile impostare il valore della data di registrazione digitando una data. Quando si aggiunge un nuovo studente:

In alternativa, modificando un valore esistente:

La digitazione della data funziona, ma potrebbe non essere l'esperienza del cliente da fornire. Nella sezione successiva si abiliterà la selezione di una data tramite un calendario.

Installare il pacchetto NuGet per l'uso con l'interfaccia utente di JQuery

Il pacchetto NuGet di Juice UI consente di integrare facilmente i widget dell'interfaccia utente JQuery nell'applicazione Web. Per usare questo pacchetto, installarlo tramite NuGet.

La versione dell'interfaccia utente di Juice installata può essere in conflitto con la versione di JQuery nell'applicazione. Prima di procedere con questa esercitazione, provare a eseguire l'applicazione. Se si verifica un errore JavaScript, è necessario riconciliare la versione di JQuery. È possibile aggiungere la versione prevista di JQuery alla cartella Scripts (versione 1.8.2 al momento della stesura di questa esercitazione) oppure in Site.master specificare il percorso del file JQuery.

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

Personalizzare il modello DateTime per includere il widget Datepicker

Il widget Datepicker verrà aggiunto al modello di dati dinamici per la modifica di un valore datetime. Aggiungendo il widget al modello, viene eseguito automaticamente il rendering in entrambi i moduli per aggiungere un nuovo studente e nella visualizzazione griglia per la modifica degli studenti. Aprire DateTime_Edit.ascx e aggiungere il codice evidenziato seguente.

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

Nel file code-behind verranno impostate le date minime e massime per DatePicker. Impostando questi valori, si impedisce agli utenti di passare a date non valide. Si recupereranno i valori minimo e massimo da RangeAttribute nella proprietà DateTime, se disponibile. Aprire DateTime_Edit.ascx.cs e aggiungere il codice evidenziato seguente al metodo 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();
    }
}

Eseguire l'applicazione Web e passare alla pagina AddStudent. Specificare i valori per i campi e notare che quando si fa clic sulla casella di testo data di registrazione, viene visualizzato il calendario.

Selezionare una data e fare clic su Inserisci. RangeAttribute applica la convalida sul server. Impostando la proprietà minDate in Datepicker, si applica anche la convalida nel client. Il calendario non consente all'utente di passare a una data precedente al valore di minDate.

Quando si modifica un record nella visualizzazione griglia, viene visualizzato anche il calendario.

Conclusione

In questa esercitazione si è appreso come incorporare un widget JQuery in un modulo Web che usa l'associazione di modelli.

Nell'esercitazione successiva si userà un valore della stringa di query quando si selezionano i dati.