ASP .NET MVC 5 - Usando o atributo UIHint (dropdownlist) - II

  Neste artigo vou mostrar como usar o atributo UIHint em aplicações ASP .NET MVC.

Na primeira parte do artigo apresentamos o atributo UIHint e mostramos um exemplo prático de utilização do atributo para renderização de um dropdownlist.

Vamos continuar mostrando outra implementação usando o atributo. Vamos supor que precisamos exibir o número de meses ou horas ou qualquer outra quantidade finita de valores inteiros em uma página de uma aplicação ASP .NET MVC.

A partir do exemplo do artigo anterior vamor incluir um novo campo em nosso modelo de domínio produto, para exibir a quantidade de meses referente a validade do produto. Então precisaremos exibir números de 1 a 24 em uma lista suspensa.

Vamos usar o atributo UIHint e mostrar como implementar isso na a ASP .NET MVC 5.

Recursos Usados

Alterando o modelo de domínio

Abra o projeto criado na primeira parte e vamos alterar a classe Produto incluindo o campo ValidadeProdutoMeses que deve conter um número entre 1 a 24 representando a validade do produto.

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; }
        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 Decimal?
<select>
    <option value="0">Selecione</option>
    @for (int i = 1; i <= 24; i++)
    {
        if (Model.HasValue && ((int)Model.Value) == i)
        {
            <option value="@i" selected="selected">@i</option>
        }
        else
        {
            <option value="@i">@i</option>
        }
    }
</select>

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.

Na próxima parte do artigo veremos como definir um template customizado para exibir um calendário em um campo para entrada de datas.

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

"Levantai os vossos olhos para os céus, e olhai para a terra em baixo, porque os céus desaparecerão como a fumaça, e a terra se envelhecerá como roupa, e os seus moradores morrerão semelhantemente; porém a minha salvação durará para sempre, e a minha justiça não será abolida."
Isaías 51:6

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