Integración del DatePicker de JQuery UI con el enlace de modelos y formularios Web Forms

por Tom FitzMacken

En esta serie de tutoriales se muestran los aspectos básicos del uso del enlace de modelos con un proyecto de formularios Web Forms ASP.NET. El enlace de modelos hace que la interacción de datos sea más directa que tratar con objetos de origen de datos (como ObjectDataSource o SqlDataSource). Esta serie comienza con material introductorio y se traslada a conceptos más avanzados en los tutoriales posteriores.

En este tutorial se muestra cómo agregar el Widget DatePicker de la interfaz de usuario de jQuery a un formulario web y cómo usar el enlace de modelos para actualizar la base de datos con el valor seleccionado.

Este tutorial se basa en el proyecto creado en la primera y segunda parte de la serie.

Puede Descargar el proyecto completo en C# o VB. El código descargable funciona con Visual Studio 2012 o Visual Studio 2013. Usa la plantilla de Visual Studio 2012, que es ligeramente diferente de la plantilla de Visual Studio 2013 que se muestra en este tutorial.

Lo que va a compilar

En este tutorial, hará lo siguiente:

  1. Agregar una propiedad al modelo para registrar la fecha de inscripción del estudiante
  2. Permitir al usuario seleccionar la fecha de inscripción mediante el widget DatePicker de JQuery UI
  3. Aplicar reglas de validación para la fecha de inscripción

El widget DatePicker de la interfaz de usuario de JQuery permite a los usuarios seleccionar fácilmente una fecha de un calendario que aparece cuando el usuario interactúa con el campo. El uso de este widget puede ser más cómodo para los usuarios que escribir manualmente una fecha. La integración del widget DatePicker en una página que usa el enlace de modelos para las operaciones de datos requiere solo una pequeña cantidad de trabajo adicional.

Agregar una nueva propiedad al modelo

En primer lugar, agregará una propiedad DateTime a su modelo Student y migrará ese cambio a la base de datos. Abra UniversityModels.CSy agregue el código resaltado al modelo 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 se incluye para aplicar reglas de validación para la propiedad. En este tutorial, supondremos que contoso University se fundó el 1 de enero de 2013 y, por lo tanto, las fechas de inscripción anteriores no son válidas.

En la ventana de Administración de paquetes, agregue una migración ejecutando el comando Add-Migration AddEnrollmentDate. Tenga en cuenta que el código de migración agrega la nueva columna de fecha y hora a la tabla Student. Para que coincida con el valor especificado en RangeAttribute, agregue un valor predeterminado para la nueva columna, tal como se muestra en el código resaltado a continuación.

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

Guarde el cambio en el archivo de migración.

No es necesario volver a inicializar los datos. Por lo tanto, Abra Configuration.CS en la carpeta Migrations y quite o comente el código en el método de inicialización . Guarde y cierre el archivo.

Ahora, ejecute el comando Update-Database. Observe que la columna existe ahora en la base de datos y todos los registros existentes tienen el valor predeterminado para EnrollmentDate.

Agregar controles dinámicos para la fecha de inscripción

Ahora agregará controles para mostrar y editar la fecha de inscripción. En este punto, el valor se edita a través de un cuadro de texto. Más adelante en el tutorial, cambiará el cuadro de texto al widget DatePicker de JQuery.

En primer lugar, es importante tener en cuenta que no es necesario realizar ningún cambio en el archivo AddStudent. aspx . El control DynamicEntity representará automáticamente la nueva propiedad.

Abra Students. aspxy agregue el siguiente código resaltado.

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

Ejecute la aplicación y observe que puede establecer el valor de la fecha de inscripción escribiendo una fecha. Al agregar un estudiante nuevo:

establecer fecha

O bien, editando un valor existente:

Editar fecha

Escribir la fecha funciona, pero puede que no sea la experiencia del cliente que desea proporcionar. En la siguiente sección, habilitará la selección de una fecha a través de un calendario.

Instalación de un paquete NuGet para trabajar con JQuery UI

El paquete NuGet de la interfaz de usuario de zumo permite integrar fácilmente los widgets de la interfaz de usuario de jQuery en la aplicación Web. Para usar este paquete, instálelo a través de NuGet.

agregar la interfaz de usuario de zumo

La versión de la interfaz de usuario de zumo que instale puede entrar en conflicto con la versión de JQuery en la aplicación. Antes de continuar con este tutorial, intente ejecutar la aplicación. Si encuentra un error de JavaScript, debe conciliar la versión de JQuery. Puede Agregar la versión esperada de JQuery a la carpeta scripts (versión 1.8.2 en el momento de escribir este tutorial) o en site. Master especifique la ruta de acceso al archivo JQuery.

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

Personalización de la plantilla de fecha y hora para incluir el widget DatePicker

Agregará el widget DatePicker a la plantilla de datos dinámicos para editar un valor DateTime. Al agregar el widget a la plantilla, se representa automáticamente en el formulario para agregar un nuevo estudiante y en la vista de cuadrícula para editar alumnos. Abra DateTime_Edit. ascxy agregue el siguiente código resaltado.

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

En el archivo de código subyacente, se establecerán las fechas mínima y máxima del DatePicker. Al establecer estos valores, impedirá que los usuarios naveguen a fechas no válidas. Recuperará los valores mínimo y máximo de RangeAttribute en la propiedad DateTime, si se proporciona uno. Abra DateTime_Edit.ascx.CSy agregue el siguiente código resaltado a la página_método 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();
    }
}

Ejecute la aplicación web y vaya a la página AddStudent. Proporcione valores para los campos y tenga en cuenta que al hacer clic en el cuadro de texto para la fecha de inscripción, se muestra el calendario.

Selector de fecha

Seleccione una fecha y haga clic en Insertar. RangeAttribute aplica la validación en el servidor. Al establecer la propiedad minDate en DatePicker, también se aplica la validación en el cliente. El calendario no permite al usuario desplazarse a una fecha anterior al valor de minDate.

Al editar un registro en la vista de cuadrícula, también se muestra el calendario.

DatePicker en GridView

Conclusión

En este tutorial, aprendió a incorporar un widget de JQuery a un formulario web que usa el enlace de modelos.

En el siguiente tutorial, usará un valor de cadena de consulta al seleccionar los datos.