ASP .NET - Model Binding com Web Forms - Integrando JQuery UI Datepicker - IV

Na terceira parte desta série de tutoriais vimos como realizar as operações de ordenação, paginação e filtragem dos dados.

Neste tutorial vamos incrementar a interface com o usuário pela interação com jQuery Datepicker com o Web Form e usar o model binding para atualizar o banco de dados com o valor selecionado.

Vamos continuar usando o projeto criado na primeira parte do tutorial : Escola_Macoratti

Neste tutorial você vai aprender a:

Recursos usados neste tutorial:

O JQuery UI Datepicker permite que os usuários selecionem a data a partir de um calendário que é exibido na tela quando o usuário interage com o campo de data. Para realizar a integração do componente JQuery com o model binding não requer muito trabalho.

Adicionando uma nova propriedade ao modelo

Abra a solução Escola_Macoratti criada na primeira parte deste artigo.

Na pasta Models abra o arquivo EscolaModel.vb o código destacado em azul abaixo na classe Aluno que define o campo DataMatricula como do tipo DateTime : 

 Public Class Aluno

        <Key, Display(Name:="ID")> _
        <ScaffoldColumn(False)> _
        Public Property AlunoID() As Integer

        <Required, StringLength(40), Display(Name:="Sobrenome")> _
        Public Property Sobrenome() As String

        <Required, StringLength(20), Display(Name:="Nome")> _
        Public Property Nome() As String

        <EnumDataType(GetType(AnoAcademico)), Display(Name:="Ano Acadêmico")> _
        Public Property Ano() As AnoAcademico

        <Range(GetType(DateTime), "1/1/2013", "1/1/3000", ErrorMessage:="Informe uma data de matrícula depois de 1/1/2013")>
       <DisplayFormat(ApplyFormatInEditMode:=True, DataFormatString:="{0:d}")>
       Public Property DataMatricula As DateTime

        Public Overridable Property Matriculas() As ICollection(Of Matricula)
    End Class

O atributo Range incluído impõe a regra de validação para a propriedade. No exemplo estamos impondo que a data de matrícula informada deve ser superior a 1 de janeiro de 2013.

Vamos agora ajustar o nosso modelo de dados usando migrations.

No menu TOOLS clique em Library Package Manage -> Package Manager Console e a seguir na janela Package Management digite o comando add-migration addDataMatricula:

Este comando adiciona uma nova coluna do tipo DateTime à tabela Aluno conforme mostra a figura a seguir:

Para coincidir com o valor especificado na RangeAttribute, adicionar um valor padrão para a nova coluna, como mostrado no código destacado em azul abaixo:

Namespace Migrations
    Public Partial Class addDataMatricula
        Inherits DbMigration
    
        Public Overrides Sub Up()
            AddColumn("dbo.Alunoes", "DataMatricula", Function(c) c.DateTime(nullable:=False, defaultValue:=New DateTime(2013, 1, 1)))
        End Sub
        
        Public Overrides Sub Down()
            DropColumn("dbo.Alunoes", "DataMatricula")
        End Sub
    End Class
End Namespace

Salve as alterações para o arquivo de migração.

Como não precisamos alimentar os dados novamente vamos abrir o arquivo Configuration.vb na pasta Migrations e comentar o código do método Seed. Salvar e fechar o arquivo.

Agora execute o comando update-database na janela Package Manager Console;

Se você abrir a tabela Aluno verá que o compo DataMatricula já foi incluído com os valores padrão conforme abaixo:

Adicionando controles dinâmicos para a data de matrícula

Vamos agora incluir controles para exibir e editar a data de matrícula. Neste ponto, o valor é editado usando uma caixa de texto, posteriormente vamos alterar a caixa de texto para o controle jQuery UI Datepicker.

Não precisamos fazer nenhuma alteração na página IncluirAluno.aspx o controle DynamicEntity irá automaticamente renderizar a nova propriedade. (basta indicarmos o campo no arquivo)

Abra a página Alunos.aspx e inclua o código destacado em azul abaixo que inclui o campo DataMatricula como DynamicField:

...   
<asp:GridView runat="server" ID="alunosGrid"
        ItemType="Escola_Macoratti.Macoratti.Models.Aluno" DataKeyNames="AlunoID" 
        SelectMethod="alunosGrid_GetDados" UpdateMethod="alunosGrid_UpdateItem"
        DeleteMethod="alunosGrid_DeleteItem"
        AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" 
        AutoGenerateColumns="false" AllowPaging="True" AllowSorting="True" PageSize="5">
        <Columns>
            <asp:DynamicField DataField="AlunoID" />
            <asp:DynamicField DataField="Sobrenome" />
            <asp:DynamicField DataField="Nome" />
            <asp:DynamicField DataField="Ano" /> 
            <asp:DynamicField DataField="DataMatricula" />         
            <asp:TemplateField HeaderText="Total de Créditos">
              <ItemTemplate>
                <asp:Label ID="Label1" Text="<%# Item.Matriculas.Sum(Function(en) en.Curso.Creditos)%>" 
                    runat="server" />
              </ItemTemplate>
            </asp:TemplateField>        
        </Columns>
</asp:GridView>
...

Execute o projeto novamente e perceba que podemos definir valores para data de matrícula digitando diretamente na caixa de texto quando estamos incluindo um novo aluno:

ou editando um valor existente conforme mostra a figura a seguir:

Digitar uma data diretamente no campo texto pode não ser a melhor interface que o usuário pode ter. A seguir veremos como podemos melhorar a interface incluindo um calendário onde o usuário poderá selecionar uma data.

Instalando o pacote Nuget para usar o JQuery UI

O pacote Juice UI do Nuget permite realizar uma fácil integração do JQuery UI widgets em nossa aplicação web.

No menu TOOLS clique em Library Package Manage -> Manage Nuget Package for Solution;

Na janela a seguir selecione o pacote Juice UI e clique no botão Install;

Confirme a instalação e aguarde até que o processo termine com sucesso.

A versão do Juice UI que você instalou pode entrar em conflito com a versão do JQuery na sua aplicação. Antes de prosseguir com este tutorial, tente executar o aplicativo. Se você encontrar um erro de JavaScript, é preciso conciliar a versão JQuery.

Você pode adicionar a versão esperada do JQuery para a pasta Scripts (versão 1.8.3 no momento da escrita deste tutorial), ou no arquivo Site.master especificar o caminho para o arquivo JQuery incluindo a linha abaixo:

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

Personalizando o template  DateTime para incluir o Widget Datepicker

Vamos adicionar o widget Datepicker para o modelo dinâmico de dados para a editar um valor Datetime. Ao adicionar o widget para o modelo, ele é automaticamente processado no formulário para incluir um novo aluno e no GridView para editar os alunos.

Abra o arquivo DateTime_Edit.ascx, na pasta DynamicData->FieldTemplates  e adicione o seguinte código:

No arquivo code-behind DateTime_Edit.ascx.vb, vamos definir as datas mínimas e máximas para o DatePicker. Ao definir esses valores, vamos impedir que os usuários naveguem para datas inválidas. Vamos recuperar os valores mínimo e máximo de RangeAttribute na propriedade DateTime, se uma delas for fornecida.

Abra o arquivo DateTime_Edit.ascx.vb e adicione o seguinte código para o método Page_Load.

Agora execute a aplicação:

Navegando para a página para incluir um novo aluno ao informar os valores no campo DataMatricula teremos a exibição do calendário:

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

Editando um registro ao acessarmos o campo DataMatricula o calendário também é exibido conforme abaixo:

Antes de concluir o arquivo um pequeno detalhe. Você notou que o calendário esta em inglês ?

Como fazer para 'traduzir' o calendário para o português ?

Simples...

Baixe o pacote para a linguagem portuguesa neste link: http://jquery-ui.googlecode.com/svn/tags/latest/ui/i18n/

Coloque o pacote na pasta scripts do projeto.

A seguir inclua a referência ao pacote baixado no arquivo Site.master:

<asp:ScriptReference Name="jquery" Path="~/Scripts/jquery.ui.datepicker-pt-BR.js" />

Abaixo vemos o trecho do arquivo Site.Master com a alteração:

  <asp:ScriptManager runat="server">
        <Scripts>
            <%--Framework scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" Path="~/Scripts/jquery-1.8.3.js" />
            <asp:ScriptReference Name="jquery" Path="~/Scripts/jquery.ui.datepicker-pt-BR.js" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site scripts--%>
        </Scripts>
    </asp:ScriptManager>

Executando novamente o projeto e acionando o calendário veremos agora o mesmo em português:

E assim concluímos a implementação do calendário usando o Juice UI datepicker.

No próximo tutorial vamos mostrar como passar um valor em uma query string e usar o valor para retornar os dados através do model binding.

Referências:

José Carlos Macoratti