ASP .NET MVC 5 - Usando o atributo UIHint - I

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

O atributo UIHint especifica o template ou o controle de usuário que o Dynamic Data vai usar para exibir um campo de dados.

O atributo UIHint especifica o template ou o controle de usuário que o Dynamic Data vai usar para exibir um campo de dados. Este recurso primeiro foi introduzido para aplicativos de dados dinâmicos e a seguir foi adaptado pela ASP.NET MVC.

Se você anotar uma propriedade do seu modelo com o atributo UIHint e usar EditorFor ou DisplayFor dentro de suas views, o framework ASP.NET MVC vai procurar o modelo especificado que você definiu no atributo UIHint.

Os diretórios de procura são:

  1. Para EditorFor   :  ~/Views/Shared/EditorTemplates    e   ~/Views/Controller_Name/EditorTemplates

  2. Para DisplayFor :  ~/Views/Shared/DisplayTemplates  e   ~/Views/Controller_Name/DisplayTemplates

Assim, se por exemplo, você definir o código a seguir em seu modelo :

public class Pessoa { 
    [UIHint("Teste")]
    public string Nome { get; set; }
}

O framework MVC procurará a partial view chamada Teste nos diretórios especificados se você tentar usar a propriedade com EditorFor ou DisplayFor conforme trecho de código abaixo:

  @model App.Models.Pessoa
  <h2>Pessoa</h2>
  @Html.DisplayFor(m => m.Nome)

Então podemos usar esse recursos para marcar em nosso modelo que um determinado campo irá se comportar como um DropDownList e toda sua lógica ficará definida em um único local.

No exemplo que irei usar neste artigo vou criar um projeto ASP .NET MVC 5 referenciando o Entity Framework 6.2 e acessar o banco de dados SQL Server Estudo.mdf onde temos as tabelas Categorias e Produtos.

Vamos ver como implementar isso usando o ASP .NET MVC 5.

Recursos Usados

Criando o projeto no VS 2017

Abra o Visual Studio 2017 Community crie um novo projeto ASP .NET Web Application usando a linguagem C# e Informe o nome Mvc_UIHint1;

Use o template MVC, sem autenticação e clique em OK;

Temos que referenciar o Entity Framework 6.x e definir uma classe de contexto chamada ProdutoDbContext na pasta Models. Além disso vamos definir a string de conexão com o banco de dados no arquivo Web.Config.

Esses detalhes eu não vou mostrar para focar apenas na utilização do atributo UIHint.

Vamos definir o nosso modelo de domínio criando as classes Produto e Categoria na pasta Models:

1- Categoria

using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations.Schema;
namespace Mvc_UIHint1.Models
{
    [Table("Categorias")]
    public class Categoria
    {
        public int CategoriaId { get; set; }
        [DisplayName("Nome da Categoria")]
        public string Nome { get; set; }
        public List<Produto> Produtos { get; set; }
    }
}

2- 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; }
        public virtual Categoria Categoria { get; set; }
    }
}

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

Primeiro vamos criar a pasta EditorTemplates dentro da pasta Views/Shared.

A seguir vamos criar a partial view ListaCategoria nesta pasta com o código abaixo:

@using Mvc_UIHint1.Models
@{
    // as categorias poderiam vir de uma fonte de dados qualquer
    var lista = new[] {
            new Categoria { CategoriaId = 1, Nome = "Bebidas" },
            new Categoria { CategoriaId = 2, Nome = "Condimentos" },
            new Categoria { CategoriaId = 3, Nome = "Acessórios" },
            new Categoria { CategoriaId = 4, Nome = "Refrigerantes" },
        };
    var selecList = new SelectList(lista, "CategoriaId", "Nome", Model);
}
@Html.DropDownListFor(model => model, selecList, "Selecione")

 

Na partial ListaCategoria estamos criando um dropdownlist com uma lista de categorias definidas.

Cadastrando produtos e exibindo a lista de categorias em um DropDownList

Agora podemos por a nossa implementação para funcionar. Vamos criar um controlador ProdutosController na pasta Controllers com o seguinte código:

using Mvc_UIHint1.Models;
using System.Linq;
using System.Web.Mvc;
namespace Mvc_UIHint1.Controllers
{
    public class ProdutosController : Controller
    {
        ProdutoDbContext db;
        public ProdutosController()
        {
            db = new ProdutoDbContext();
        }
        // GET: Produtos
        public ActionResult Index()
        {
            var produtos = db.Produtos.ToList();
            return View(produtos);
        }
        public ActionResult Create()
        {
            var model = new Produto();
            return View(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Produto model)
        {
            if (ModelState.IsValid)
            {
                var produto = new Produto();
                produto.Nome = model.Nome;
                produto.CategoriaId = model.CategoriaId;
                db.Produtos.Add(produto);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(model);
        }
    }
}

Agora vamos criar as Views Index para exibir a lista de produtos e a view Create para incluir um novo produto.

Vou mostrar apenas o código da view Create.cshtml que é onde vamos renderizar a partial ListaCategoria 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>
        <p>
            <input type="submit" value="Criar Produto" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Retorna para a lista", "Index")
</div>

 

Na view que criamos usamos   @Html.EditorFor(model => model.CategoriaId)  que vai renderizar a partial view ListaCategoria e exibir um dropdownlist de categorias definida nesta partial view.

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

Conforme o esperado temos um dropdownlist renderizado exibindo as categorias definidas na partial ListaCategoria graças ao atributo UIHint.

Na próxima parte do artigo veremos uma outra implementação usando o atributo UIHint.

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

(Disse Jesus)"Mas a hora vem, e agora é, em que os verdadeiros adoradores adorarão o Pai em espírito e em verdade; porque o Pai procura a tais que assim o adorem."
João 4:23

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