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:
Para EditorFor : ~/Views/Shared/EditorTemplates e ~/Views/Controller_Name/EditorTemplates
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:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
ASP .NET MVC - Filtrando registros com Dropdownlist - Macoratti
ASP .NET MVC - Movendo itens entre dois DropDownList ... - Macoratti
ASP .NET MVC - Exibindo uma lista de itens selecionáveis - Macoratti