Integração do Datepicker do JQuery UI com associação de modelos e formulários web

por Tom FitzMacken

Esta série de tutoriais demonstra aspetos básicos da utilização de binding de modelos num projeto ASP.NET Web Forms. A ligação de modelos torna a interação de dados mais simples do que lidar com objetos fonte de dados (como ObjectDataSource ou SqlDataSource). Esta série começa com material introdutório e avança para conceitos mais avançados em tutoriais posteriores.

Este tutorial mostra como adicionar o widget JQuery UI Datepicker a um Formulário Web e usar a ligação de modelos para atualizar a base de dados com o valor selecionado.

Este tutorial baseia-se no projeto criado nas primeiras e segundas partes da série.

Podes descarregar o projeto completo em C# ou VB. O código descarregável funciona com Visual Studio 2012 ou Visual Studio 2013. Utiliza o modelo Visual Studio 2012, que é ligeiramente diferente do modelo Visual Studio 2013 mostrado neste tutorial.

O que vais construir

Neste tutorial, você:

1. Adicione uma propriedade ao seu modelo para registar a data de inscrição do estudante
2. Permita ao utilizador selecionar a data de inscrição usando o widget JQuery UI Datepicker
3. Aplicar regras de validação para a data de inscrição

O widget JQuery UI Datepicker permite aos utilizadores selecionar facilmente uma data de um calendário que aparece quando o utilizador interage com o campo. Usar este widget pode ser mais conveniente para os utilizadores do que digitar manualmente uma data. Integrar o widget do Datepicker numa página que utiliza binding de modelos para operações de dados requer apenas um pequeno trabalho adicional.

Adicionar uma nova propriedade ao modelo

Primeiro, irá adicionar uma propriedade Datetime ao seu modelo Estudante e migrar essa alteração para a base de dados. Abra UniversityModels.cs e adicione o código destacado ao modelo Estudante.

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

O RangeAttribute está incluído para impor as regras de validação da propriedade. Para este tutorial, vamos assumir que a Contoso University foi fundada a 1 de janeiro de 2013 e, por isso, datas de inscrição mais cedo não são válidas.

Na janela de Gestão de Pacotes, adicione uma migração executando o comando add-migration AddEnrollmentDate. Repare que o código de migração adiciona a nova coluna Datetime à tabela Estudante. Para igualar o valor especificado no RangeAttribute, adicione um valor padrão para a nova coluna, conforme mostrado no código realçado abaixo.

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

Guarda a tua alteração no ficheiro de migração.

Não precisa de voltar a inicializar os dados. Por isso, abra Configuration.cs na pasta Migrations e remova ou comente o código no método Seed . Salve e feche o arquivo.

Agora, execute o comando update-database. Note que a coluna agora existe na base de dados e todos os registos existentes têm o valor default para a Data de Inscrição.

Adicionar controlos dinâmicos para a data de inscrição

Agora vais adicionar controlos para mostrar e editar a data de inscrição. Neste ponto, o valor é editado através de uma caixa de texto. Mais tarde no tutorial, vais mudar a caixa de texto para o widget JQuery Datepicker.

Em primeiro lugar, é importante notar que não precisa de alterar o ficheiro AddStudent.aspx . O controlo DynamicEntity irá renderizar automaticamente a nova propriedade.

Abra Students.aspx e adicione o código destacado a seguir.

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

Execute a candidatura e repare que pode definir o valor da data de inscrição escrevendo uma data. Ao adicionar um novo aluno:

Ou, editar um valor existente:

Digitar a data funciona, mas pode não ser a experiência do cliente que deseja oferecer. Na secção seguinte, irá permitir a seleção de uma data através de um calendário.

Instalar o pacote NuGet para funcionar com a interface do JQuery

O pacote Juice UI NuGet permite a integração fácil dos widgets da interface JQuery na sua aplicação web. Para usar este pacote, instale-o através do NuGet.

A versão do Juice UI que instala pode entrar em conflito com a versão do JQuery na sua aplicação. Antes de avançar com este tutorial, tenta executar a tua aplicação. Se encontrar um erro JavaScript, precisa de reconciliar a versão do JQuery. Podes adicionar a versão esperada do JQuery à tua pasta Scripts (versão 1.8.2 na altura em que escrevi este tutorial), ou no Site.master especificar o caminho para o ficheiro JQuery.

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

Personalize o modelo DateTime para incluir o widget Datepicker

Adicionará o widget Datepicker ao modelo de dados dinâmicos para editar um valor de data-hora. Ao adicionar o widget ao modelo, este é automaticamente renderizado tanto no formulário para adicionar um novo aluno como na vista em grelha para editar alunos. Abra DateTime_Edit.ascx e adicione o código destacado a seguir.

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

No ficheiro code-behind, irá definir as datas mínima e máxima para o DatePicker. Ao definir estes valores, irá impedir que os utilizadores naveguem para datas inválidas. Irá recuperar os valores mínimo e máximo do RangeAttribute na propriedade DateTime, se for fornecido um. Abra DateTime_Edit.ascx.cs e adicione o seguinte código destacado ao 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();
    }
}

Execute a aplicação web e navegue até à página AddStudent. Forneça valores para os campos e repare que, ao clicar na caixa de texto da Data de Inscrição, o calendário é exibido.

Escolhe uma data e clica em Inserir. O RangeAttribute impõe validação no servidor. Ao definir a propriedade minDate no Datepicker, também aplicas validação ao cliente. O calendário não permite ao utilizador navegar até uma data anterior ao valor de minDate.

Quando editas um registo na vista de grelha, o calendário também é exibido.

Conclusion

Neste tutorial, aprendeste a incorporar um widget JQuery num formulário web que usa binding de modelos.

No próximo tutorial, irá usar um valor de cadeia de consulta ao selecionar dados.