Integrando o Datepicker da interface do usuário do JQuery com model binding e web forms

por Tom FitzMacken

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

Este tutorial mostra como adicionar o widget Datepicker da interface do usuário do JQuery a um Formulário web e usar a associação de modelo para atualizar o banco de dados com o valor selecionado.

Este tutorial baseia-se no projeto criado na primeira e segunda partes da série.

Você pode baixar o projeto completo em C# ou VB. O código para download funciona com o Visual Studio 2012 ou o Visual Studio 2013. Ele usa o modelo do Visual Studio 2012, que é ligeiramente diferente do modelo do Visual Studio 2013 mostrado neste tutorial.

O que você vai criar

Neste tutorial, você aprenderá a:

1. Adicionar uma propriedade ao seu modelo para registrar a data de inscrição do aluno
2. Permitir que o usuário selecione a data de registro usando o widget Datepicker da interface do usuário do JQuery
3. Impor regras de validação para a data de registro

O widget Datepicker da interface do usuário do JQuery permite que os usuários selecionem facilmente uma data de um calendário que aparece quando o usuário interage com o campo. Usar esse widget pode ser mais conveniente para os usuários do que digitar manualmente uma data. A integração do widget Datepicker em uma página que usa a associação de modelo para operações de dados requer apenas uma pequena quantidade de trabalho adicional.

Adicionar uma nova propriedade ao modelo

Primeiro, você adicionará uma propriedade Datetime ao modelo Student e migrará essa alteração para o banco de dados. Abra UniversityModels.cs e adicione o código realçado ao 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; }
}

O RangeAttribute está incluído para impor regras de validação para a propriedade. Para este tutorial, assumiremos que a Contoso University foi fundada em 1º de janeiro de 2013 e, portanto, as datas de inscrição anteriores não são válidas.

Na janela Gerenciamento de Pacotes, adicione uma migração executando o comando add-migration AddEnrollmentDate. Observe que o código de migração adiciona a nova coluna Datetime à tabela Student. Para corresponder ao 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");
        }
    }
}

Salve sua alteração no arquivo de migração.

Você não precisa semear os dados novamente. Portanto, abra Configuration.cs na pasta Migrações e remova ou comente o código no método Semente . Salve e feche o arquivo.

Agora, execute o comando update-database. Observe que a coluna agora existe no banco de dados e todos os registros existentes têm o valor padrão para EnrollmentDate.

Adicionar controles dinâmicos para a data de registro

Agora você adicionará controles para exibir e editar a data de registro. Neste ponto, o valor é editado por meio de uma caixa de texto. Posteriormente, no tutorial, você alterará a caixa de texto para o widget JQuery Datepicker.

Primeiro, é importante observar que você não precisa fazer nenhuma alteração no arquivo AddStudent.aspx . O controle DynamicEntity renderizará automaticamente a nova propriedade.

Abra Students.aspx e adicione o código realçado 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 o aplicativo e observe que você pode definir o valor da data de registro digitando uma data. Ao adicionar um novo aluno:

Ou editando um valor existente:

Digitar a data funciona, mas pode não ser a experiência do cliente que você deseja fornecer. Na próxima seção, você habilitará a seleção de uma data por meio de um calendário.

Instalar o pacote NuGet para trabalhar com a interface do usuário do JQuery

O pacote NuGet Juice UI permite a integração fácil dos widgets do JQuery UI no seu aplicativo web. Para usar esse pacote, instale-o por meio do NuGet.

A versão da interface do usuário do Juice que você instala pode entrar em conflito com a versão do JQuery em seu aplicativo. Antes de prosseguir com este tutorial, tente executar seu aplicativo. Se você encontrar um erro JavaScript, precisará reconciliar a versão do JQuery. Você pode adicionar a versão esperada do JQuery à pasta Scripts (versão 1.8.2 no momento da gravação deste tutorial) ou, no Site.master, especificar o caminho para o arquivo JQuery.

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

Personalizar o modelo DateTime para incluir o widget Datepicker

Você adicionará o widget Datepicker ao modelo de dados dinâmicos para editar um valor de datetime. Ao adicionar o widget ao modelo, ele é renderizado automaticamente no formulário para adicionar um novo aluno e no modo de exibição de grade para editar alunos. Abra DateTime_Edit.ascx e adicione o código realçado 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 arquivo code-behind, você definirá as datas mínimas e máximas para o DatePicker. Ao definir esses valores, você impedirá que os usuários naveguem até datas inválidas. Você recuperará os valores mínimos e máximos do RangeAttribute na propriedade DateTime, se um for fornecido. Abra DateTime_Edit.ascx.cs e adicione o seguinte código realçado 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 o aplicativo Web e navegue até a página AddStudent. Forneça valores para os campos e observe que quando você clica na caixa de texto da Data de Registro, o calendário é exibido.

Escolha uma data e clique em Inserir. O RangeAttribute impõe a validação no servidor. Ao definir a propriedade minDate no Datepicker, você também aplica a validação no cliente. O calendário não permite que o usuário navegue até uma data anterior ao valor de minDate.

Quando você edita um registro no modo de exibição de grade, o calendário também é exibido.

Conclusion

Neste tutorial, você aprendeu a incorporar um widget JQuery em um formulário da Web que usa a associação de modelos.

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