ASP .NET MVC 5 - Usando um template customizado (Calendar) - III


  Neste artigo vou mostrar como usar um template customizado para exibir um calendário em aplicações ASP .NET MVC.

Na segunda parte do artigo continuamos a usar o atributo UIHint e mostramos um exemplo prático de utilização do atributo para renderização de um dropdownlist.

Neste artigo vou mostrar como criar um template customizado para exibir um calendário com ajuda da biblioteca jQuery.

Partindo do exemplo do artigo anterior vamor incluir um novo campo em nosso mode de domínio para exibir a data de aquisição do produto.

A seguir vamos implementar um template customizado de forma a exibir no formulário de entrada o calendário para informar a data.

Recursos Usados

Alterando o modelo de domínio

Abra o projeto criado na primeira parte e vamos alterar a classe Produto incluindo o campo DataAquisicao que deve conter a data de aquisição do produto no formato dd/MM/yyyy.

Classe Produto:

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace Mvc_UIHint1.Models
{
    [Table("Produtos")]
    public class Produto
    {
        public int ProdutoId { get; set; }
        [DisplayName("Nome do Produto")]
        public string Nome { get; set; }
        [DisplayName("Categoria")]
        [UIHint("ListaCategoria")]
        public int CategoriaId { get; set; }
      [DataType(DataType.Duration)] 
        [DisplayName("Validade Produtos (meses)")] 
        [UIHint("ListaMeses")] 
        public Decimal ValidadeProdutoMeses { get; set; }

        [DisplayName("Data Entrada :")] 
        public DateTime? DataAquisicao { get; set; } 
        public virtual Categoria Categoria { get; set; }
    }
}

Observe que na propriedade ValidadeProdutoMeses da classe Produto usamos o atributo UIHint("ListaMeses") isso significa que teremos que criar uma partial view chamada ListaMeses na pasta Views/Shared/EditorTemplates onde vamos definir o dropdownlist que será renderizado pelo EditFor.

Vamos criar a partial view ListaMeses na pasta EditorTemplates  com o código abaixo:

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datepicker" })

Na partial ListaMeses estamos definindo um dropdownlist contendo valores entre 1 a 24.

Cadastrando produtos e exibindo o número de meses

Agora vamos ajustar a view Create usada para incluir um novo produto para exibir o campo Validade do Produto e exibir o número de meses em uma lista supensa.

Abaixo temos o código da view Create.cshtml onde vamos renderizar a partial ListaMeses definida no atributo UIHint :

@model Mvc_UIHint1.Models.Produto
@{
    ViewBag.Title = "Criar";
}
<h2>Criar Produto</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)
    <fieldset>
        <div class="editor-label">
            @Html.LabelFor(model => model.Nome)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Nome)
            @Html.ValidationMessageFor(model => model.Nome)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.CategoriaId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CategoriaId)
            @Html.ValidationMessageFor(model => model.CategoriaId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ValidadeProdutoMeses)
        </div>
        <div class="editor-field">
          @Html.EditorFor(model => model.ValidadeProdutoMeses, "ListaMeses")
           @Html.ValidationMessageFor(model => model.ValidadeProdutoMeses)
       </div>
        <p>
            <input type="submit" value="Criar Produto" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Retorna para a lista", "Index")
</div>

 

Na view que ajustamos usamos  @Html.EditorFor(model => model.ValidadeProdutoMeses)  que vai renderizar a partial view ListaMeses e exibir um dropdownlist o número de meses nesta partial view.

Executando o projeto e clicando no link para criar um novo produto teremos o resultado abaixo:

Selecionando um mês teremos :

Temoa agora um dropdownlist renderizado para o campo Validade do Produto exibindo os números entre 1 e 24 definidos na partial ListaMeses graças ao atributo UIHint.

Pegue o projeto completo aqui:  Mvc_UIHint2.zip (sem as referências)

"Jesus lhes respondeu, e disse: A minha doutrina não é minha, mas daquele que me enviou.
Se alguém quiser fazer a vontade dele, pela mesma doutrina conhecerá se ela é de Deus, ou se eu falo de mim mesmo."

João 7:16,17

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:


José Carlos Macoratti