Integrazione di JQuery UI Datepicker con associazione di modelli e moduli Web
Questa serie di esercitazioni illustra gli aspetti di base dell'uso dell'associazione di modelli con un progetto di Web Forms ASP.NET. L'associazione di modelli rende più semplice l'interazione dei dati 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.
Obiettivo
In questa esercitazione si apprenderà come:
- Aggiungere una proprietà al modello per registrare la data di registrazione dello studente
- Abilitare l'utente per selezionare la data di registrazione usando il widget Datepicker dell'interfaccia utente JQuery
- Applicare le regole di convalida per la data di registrazione
Il widget Datepicker dell'interfaccia utente 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 corrispondere al 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 inizializzare nuovamente i dati. Aprire Quindi Configuration.cs nella cartella Migrations e rimuovere o commentare il codice nel metodo Seed . Salvare e chiudere 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
Verranno ora 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 si modifica la casella di testo 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, modificare 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 usare l'interfaccia utente JQuery
Il pacchetto NuGet dell'interfaccia utente di Juice 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 potrebbe 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 JQuery. È possibile aggiungere la versione prevista di JQuery alla cartella Script (versione 1.8.2 al momento della scrittura di questa esercitazione) o 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
Si aggiungerà il widget Datepicker al modello di dati dinamico per la modifica di un valore datetime. Aggiungendo il widget al modello, viene eseguito automaticamente il rendering nel modulo per l'aggiunta di 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 si impostano le date minime e massime per DatePicker. Impostando questi valori, si impedirà agli utenti di passare a date non valide. Si recuperano i valori minimi e massimi dalla proprietà RangeAttribute nella proprietà DateTime, se ne viene specificato uno. 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 registrazione, viene visualizzato il calendario.
Selezionare una data e fare clic su Inserisci. RangeAttribute applica la convalida nel server. Impostando la proprietà minDate sul datepicker, si applica anche la convalida nel client. Il calendario non consente all'utente di passare a una data prima del 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 stringa di query durante la selezione dei dati.