Intégration de JQuery UI Datepicker aux formulaires web et à la liaison de modèles

par Tom FitzMacken

Cette série de tutoriels illustre les aspects de base de l’utilisation de la liaison de modèle avec un projet web Forms ASP.NET. La liaison de modèle rend l’interaction des données plus simple que la gestion des objets de source de données (par exemple, ObjectDataSource ou SqlDataSource). Cette série commence par le matériel d’introduction et passe à des concepts plus avancés dans les didacticiels ultérieurs.

Ce tutoriel montre comment ajouter le widget JQuery UI Datepicker à un formulaire Web et utiliser la liaison de modèle pour mettre à jour la base de données avec la valeur sélectionnée.

Ce didacticiel s’appuie sur le projet créé dans les premières et deuxième parties de la série.

Vous pouvez télécharger le projet complet en C# ou VB. Le code téléchargeable fonctionne avec Visual Studio 2012 ou Visual Studio 2013. Il utilise le modèle Visual Studio 2012, légèrement différent du modèle Visual Studio 2013 présenté dans ce tutoriel.

Ce que vous allez construire

Dans ce didacticiel, vous allez :

Ajouter une propriété à votre modèle pour enregistrer la date d’inscription de l’étudiant
Permettre à l’utilisateur de sélectionner la date d’inscription à l’aide du widget JQuery UI Datepicker
Appliquer des règles de validation pour la date d’inscription

Le widget JQuery UI Datepicker permet aux utilisateurs de sélectionner facilement une date dans un calendrier qui s’affiche lorsque l’utilisateur interagit avec le champ. L’utilisation de ce widget peut être plus pratique pour les utilisateurs que pour taper manuellement une date. L’intégration du widget Datepicker dans une page qui utilise la liaison de modèle pour les opérations de données ne nécessite qu’une petite quantité de travail supplémentaire.

Ajouter une nouvelle propriété au modèle

Tout d’abord, vous allez ajouter une propriété Datetime à votre modèle Student et migrer cette modification vers la base de données. Ouvrez UniversityModels.cs et ajoutez le code mis en surbrillance au modèle 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 est inclus pour appliquer des règles de validation pour la propriété. Pour ce tutoriel, nous partons du principe que Contoso University a été fondée le 1er janvier 2013 et que les dates d’inscription antérieures ne sont donc pas valides.

Dans la fenêtre Gestion des packages, ajoutez une migration en exécutant la commande add-migration AddEnrollmentDate. Notez que le code de migration ajoute la nouvelle colonne Datetime à la table Student. Pour correspondre à la valeur que vous avez spécifiée dans RangeAttribute, ajoutez une valeur par défaut pour la nouvelle colonne, comme indiqué dans le code mis en surbrillance ci-dessous.

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

Enregistrez votre modification dans le fichier de migration.

Vous n’avez pas besoin de procéder à l'amorçage des données. Par conséquent, ouvrez Configuration.cs dans le dossier Migrations et supprimez ou commentez le code dans la méthode Seed . Enregistrez et fermez le fichier.

Exécutez maintenant la commande update-database. Notez que la colonne existe maintenant dans la base de données et que tous les enregistrements existants ont la valeur par défaut pour EnrollmentDate.

Ajouter des contrôles dynamiques pour la date d’inscription

Vous allez maintenant ajouter des contrôles pour afficher et modifier la date d’inscription. À ce stade, la valeur est modifiée via une zone de texte. Plus loin dans le tutoriel, vous allez remplacer la zone de texte par le widget JQuery Datepicker.

Tout d’abord, il est important de noter que vous n’avez pas besoin d’apporter de modification au fichier AddStudent.aspx . Le contrôle DynamicEntity affiche automatiquement la nouvelle propriété.

Ouvrez Students.aspx et ajoutez le code en surbrillance suivant.

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

Exécutez l’application et notez que vous pouvez définir la valeur de la date d’inscription en tapant une date. Lors de l’ajout d’un nouvel étudiant :

régler la date

Vous pouvez également modifier une valeur existante :

modifier la date

La saisie de la date fonctionne, mais il peut ne pas s’agir de l’expérience client que vous souhaitez fournir. Dans la section suivante, vous allez activer la sélection d’une date dans un calendrier.

Installer le package NuGet pour utiliser l’interface utilisateur JQuery

Le package NuGet Juice UI permet d’intégrer facilement les widgets JQuery UI à votre application web. Pour utiliser ce package, installez-le via NuGet.

Ajouter Juice UI

La version de l’interface utilisateur de Juice que vous installez peut entrer en conflit avec la version de JQuery dans votre application. Avant de poursuivre ce didacticiel, essayez d’exécuter votre application. Si vous rencontrez une erreur JavaScript, vous devez réconcilier la version de jQuery. Vous pouvez ajouter la version attendue de JQuery à votre dossier Scripts (version 1.8.2 au moment de l’écriture de ce didacticiel), ou dans Site.master, spécifiez le chemin d’accès au fichier JQuery.

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

Vous allez ajouter le widget Datepicker au modèle de données dynamiques pour modifier une valeur datetime. En ajoutant le widget au modèle, il est automatiquement affiché dans le formulaire pour ajouter un nouvel étudiant et dans la grille pour modifier les étudiants. Ouvrez DateTime_Edit.ascx et ajoutez le code en surbrillance suivant.

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

Dans le fichier code-behind, vous allez définir les dates minimales et maximales du DatePicker. En définissant ces valeurs, vous empêcherez les utilisateurs de naviguer vers des dates non valides. Vous allez récupérer les valeurs minimales et maximales de la propriété RangeAttribute sur la propriété DateTime, si une valeur est fournie. Ouvrez DateTime_Edit.ascx.cs et ajoutez le code en surbrillance suivant à la méthode 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();
    }
}

Exécutez l’application web et accédez à la page AddStudent. Fournissez des valeurs pour les champs et notez que lorsque vous cliquez sur la zone de texte date d’inscription, le calendrier s’affiche.

Sélecteur de dates

Sélectionnez une date, puis cliquez sur Insérer. RangeAttribute applique la validation sur le serveur. En définissant la propriété minDate sur le Datepicker, vous appliquez également la validation sur le client. Le calendrier ne permet pas à l’utilisateur d’accéder à une date antérieure à la valeur minDate.

Lorsque vous modifiez un enregistrement en mode Grille, le calendrier s’affiche également.

Datepicker dans GridView

Conclusion

Dans ce tutoriel, vous avez appris à incorporer un widget JQuery dans un formulaire web qui utilise la liaison de modèle.

Dans le tutoriel suivant, vous allez utiliser une valeur de chaîne de requête lors de la sélection des données.

Précédent Suivant

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-03-27