Integrar Datepicker de JQuery UI con el enlace de modelos y los formularios web
En esta serie de tutoriales se muestran aspectos básicos del uso del enlace de modelos con un proyecto de ASP.NET Web Forms. El enlace de modelos hace que la interacción de datos sea más sencilla que tratar con objetos de origen de datos (como ObjectDataSource o SqlDataSource). Esta serie comienza con material introductorio y pasa a conceptos más avanzados en tutoriales posteriores.
En este tutorial se muestra cómo agregar el widget Datepicker de JQuery UI a un formulario web y usar el enlace de modelos para actualizar la base de datos con el valor seleccionado.
Este tutorial se basa en el proyecto creado en las partes primera y segunda 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.
Qué va a crear
En este tutorial, hará lo siguiente:
- Agregar una propiedad al modelo para registrar la fecha de inscripción del alumno
- Habilitar al usuario para que seleccione la fecha de inscripción mediante el widget Datepicker de JQuery UI
- Aplicar reglas de validación para la fecha de inscripción
El widget Datepicker de JQuery UI habilita a los usuarios para 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 al modelo Estudiante y migrará ese cambio a la base de datos. Abra UniversityModels.cs y agregue el código resaltado al modelo Estudiante.
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 se supone que la Universidad Contoso se fundó el 1 de enero de 2013 y, por tanto, las fechas de inscripción anteriores no son válidas.
En la ventana Administración de paquetes, agregue una migración ejecutando el comando add-migration AddEnrollmentDate. Observe que el código de migración agrega la nueva columna Datetime a la tabla Student. Para que coincida con el valor especificado en RangeAttribute, agregue un valor predeterminado para la nueva columna, como se muestra en el código resaltado siguiente.
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 propagar los datos. Por lo tanto, abra Configuration.cs en la carpeta Migraciones y quite o comente el código en el método Seed. Guarde y cierre el archivo.
Ahora ejecute el comando update-database. Observe que ahora la columna existe en la base de datos y que 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.aspx y agregue el código resaltado siguiente.
<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 nuevo alumno:
O bien, al editar un valor existente:
Escribir la fecha funciona, pero es posible que no sea la experiencia de cliente que desea proporcionar. En la sección siguiente habilitará la selección de una fecha a través de un calendario.
Instalar el paquete NuGet para trabajar con JQuery UI
El paquete NuGet Juice UI permite una fácil integración de los widgets de JQuery UI en la aplicación web. Para usar este paquete, instálelo a través de NuGet.
La versión de Juice UI que instale puede entrar en conflicto con la versión de JQuery en la aplicación. Antes de continuar con este tutorial, pruebe a ejecutar la aplicación. Si se produce 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 al 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" />
Personalizar la plantilla DateTime 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 alumno y en la vista de cuadrícula para editar alumnos. Abra DateTime_Edit.ascx y agregue el código resaltado siguiente.
<%@ 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 establecerá las fechas mínimas y máximas para 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. Abra DateTime_Edit.ascx.cs y agregue el código resaltado siguiente al método 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();
}
}
Ejecute la aplicación web y vaya a la página AddStudent. Proporcione valores para los campos y observe que al hacer clic en el cuadro de texto de la fecha de inscripción, se muestra el calendario.
Elija una fecha y haga clic en Insertar. RangeAttribute hace cumplirse 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 navegar a una fecha anterior al valor de minDate.
Al editar un registro en la vista de cuadrícula también se muestra el calendario.
Conclusión
En este tutorial ha aprendido a incorporar un widget JQuery en un formulario web que usa el enlace de modelos.
En el siguiente tutorial usará un valor de cadena de consulta al seleccionar datos.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de