Prévia do material em texto
HTML Helpers em ASP.NET MVC – Parte 1- Visão Geral
Publicado em 16 de dezembro de 2014 por Renato Person
O uso de HTML Helper visa facilitar o desenvolvimento de Views miminizando a quantidade de declarações HTML que o desenvolvedor precisa definir
nas páginas web. Os HTML Helpers são “extension methods” da classe HtmlHelper e podem ser utilizados em Views Razor ou ASPX. Existe uma
grande variedade de HTML Helpers com o objetivo de criar elementos HTML como <form>, <input>, <select>, <label> dentre outros.
Este é um tema abrangente e portanto o mesmo será dividido em 3 partes:
Parte 1 – Visão Geral da Utilização de HTML Helpers
Esta primeira parte tem como objetivo dar uma visão geral do que são os HTML Helpers e montar uma página com um formulário simples de “Fale
Conosco”. É realizada uma demonstração de criação do formulário sem a utilização de HTML Helpers e com a sua utilização. Também são
apresentados as diferenças entre HTML Helpers não tipados e HTML Helpers Tipados.
Parte 2 – Criando Elementos Select
Nesta segunda parte do artigo são apresentados detalhes sobre a criação de elementos Select e utilização das classes SelectList e SelectListItem. Por
se tratar de um HTML Helper de configuração mais complexa foi reservado um post exclusivo para esse assunto.
Parte 3 – Validações, ModelState e DataBinding em postback de formulários
Nesta terceira e última parte do artigo são demonstradas as configurações necessárias para realização de validações de dados de formulários. São
abordadas as configurações de Data Annotations necessárias no modelo, configuração de Unobstrusive Javascript e por fim apresentadas algumas
peculiaridades a respeito da utilização da classe ModelState e sobre DataBinding em postback de dados de formulário via requisição POST.
Criando um Formulário sem HTML Helpers
Vamos considerar uma simples página web com os dados de um formulário de “Fale Conosco”:
É necesário um modelo para armazenar as informações de contato. Para manter o artigo simples o modelo não será persistido em base de dados.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace HtmlHelpers.Models
{
public class Contato
{
public Contato() {
this.Data = DateTime.Now;
}
public string Nome { get; set; }
public string Email { get; set; }
public string Telefone { get; set; }
// 0 = Dúvida; 1 = Elogio; 2 = Reclamação; 3 = Sugestão
public int TipoContato { get; set; }
public string Descricao { get; set; }
public DateTime Data { get; set; }
}
}
A seguir segue o código da View necessário para apresentar o formulário na página. A View deve ser criada dentro da pasta /Views/FaleConosco e
deve possuir o nome Contato.cshtml.
1
2
3
4
5
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Fale Conosco</title>
</head>
HTML Helpers em ASP.NET MVC – Parte 1- Visão Geral
domingo, 14 de junho de 2015 18:12
Página 1 de HTML Helpers no MVC
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
</head>
<body>
<form action="/FaleConosco/Contato" method="post">
<h1>Fale Conosco</h1>
<div class="dataElement">
<label for="Nome">Nome</label>
<input id="Nome" name="Nome" type="text" value="" />
</div>
<div class="dataElement">
<label for="Email">E-mail</label>
<input id="Email" name="Email" type="text" value="" />
</div>
<div class="dataElement">
<label for="Telefone">Telefone</label>
<input id="Telefone" name="Telefone" type="text" value="" />
</div>
<div class="dataElement">
<label for="TipoContato">Tipo Contato</label>
<select id="TipoContato" name="TipoContato">
<option value="0">Dúvida</option>
<option value="1">Elogio</option>
<option value="2">Reclamação</option>
<option value="3">Sugestão</option>
</select>
</div>
<div class="dataElement">
<label for="Descricao">Descrição</label>
<textarea id="Descricao" name="Descricao" rows="3">@Model.Descricao</textarea>
</div>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
O código da View é bem simples. A página possui apenas um elemento <form> e dentro dele os elementos <input> necesário para apresentar os
campos que usuário deverá preencher. Observe que o action do formulário está apontando para a URL “/FaleConosco/Contato” e o método Http a
ser utilizado é POST.
Para que esta página possa ser apresentada e submetida com os dados informados pelo usuário ainda é necessário que seja desenvolvido o
Controller do FaleConosco. Controller deve ser criado dentro da pasta Controllers e chamar-se FaleConoscoController.cs:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class FaleConoscoController : Controller
{
//
// GET: /FaleConosco/
public ActionResult Index()
{
return View("Contato", new Contato());
}
public ActionResult Contato() {
return View(new Contato());
}
[HttpPost]
public ActionResult Contato(Contato contato) {
// armazena informações de contato
return View(new Contato());
}
}
}
A Action Index() é chamada quando o usuário faz uma requisição à URLhttp://localhost/FaleConosco sem indicar uma Action específica. A Action
Index é chamada porque estou considerando que a aplicação está utilizando o esquema de rota padrão inserido pelo Visual Studio em um novo
projeto ASP.NET MVC onde a action Index é a action padrão caso não seja definida uma na URL requisitada. O método View é chamado criando-se
uma nova instância do modelo Contato.
1
2
3
4
5
6
7
8
9
10
11
12
13
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
Observe que existem duas Actions Contato, sendo que a primeira não possui parâmetros e a segunda além de possuir um parâmetro possui também
o atributo HttpPost. A primeira Action será chamada quando o usuário acessar um link com a URLhttp://localhost/FaleConosco/Contato ou entrar
esta URL diretamente na barra de endereço do navegador. A segunda Action será chamada quando esta URL for submetida com o verbo HTTP POST.
Isso irá correr na submissão do nosso formulário de “Fale Conosco”. Observe no código da View que a action do elemento form é justamente essa
URL e que o método está definido como “post”. Quando o formuário for submetido o sistema de rotas irá identificar que a URL foi requisitada como
Página 2 de HTML Helpers no MVC
URL e que o método está definido como “post”. Quando o formuário for submetido o sistema de rotas irá identificar que a URL foi requisitada como
um POST e o sistema de Binding irá capturar todos os campos do formulário presentes na requisição HTTP, criar uma instância do modelo Contato e
pelo nome das propriedades popular os seus valores.
A partir deste ponto já é possível acessar as URL’s http://localhost/FaleConosco/ ouhttp://localhost/FaleConosco/Contato que o formulário será
devidamente apresentado. Umavez que os dados estejam preenchidos e o botão “Enviar” seja selecionado será realizado uma subm issão para a
mesma URL porém agora a requisição será um POST. O Controller FaleConosco será acionado e a Action Contato (com parâmetro) será executada,
Dentro da Action os dados do formulário poderão ser manipulados – note que haverá uma variável local do tipo Contato instanciada com os
dados submetidos pelo formulário – e as devidas ações necessárias poderão ser tomadas. Neste caso a ação mais óbvia seria persistir
a entidade Contato com as informações provenientes do formulário para futuro tratamento. Ao término da execução da Action, o próprio
formulário “Fale Conosco” é reapresentado, porém com os campos vazios. O fluxo poderia também ser redirecionado para uma página
de sucesso se assim fosse desejado – para isso bastaria informar o nome da View como parâmetro do método View().
É importante observar que neste momento não é realizado nenhum tratamento para validar formato de dados ou campos obrigatórios mas isso será
feito mais adiante na Parte 3 deste artigo.
Criando Formulário com HTML Helpers
Os HTML Helpers visam facilitar o desenvolvimento das Views permitindo que o elementos HTML’s sejam gerados de forma mais dinâmica. Ainda
assim não devemos confundí-los com o modelo de componentes do ASP.NET WebForms visto que os HTML Helpers servem apenas de facilitador e o
desenvolvedor possui pleno controle sobre o HTML que é gerado na página, ao contrários dos componentes ASP.NET WebForms.
Helper do Elemento<form>
O primeiro HTML Helper a ser apresentado será o de criação de elementos <form>. São elesHtml.BeginForm e Html.EndForm.
Existem diferentes versões sobrecarga de BeginForm permitindo diversas configurações de como o
elemento <form> deverá ser gerado. Para nosso exemplo precisamos inicialmente apenas da versão mais
simples, sem parâmetros.
Formato básico de utilização do Html.BeginForm():
1
2
3
4
5
@Html.BeginForm()
<!-- elementos do formulário -->
...
...
@{ Html.EndForm(); }
Observe que a chamada a Html.EndForm() deve ser tratada como uma declaração C#. Isso se deve ao fato de que o método EndForm escreve sua tag
diretamente para a saída da resposta http e não retorna um resultado que pode ser inserido dentro da View da mesma forma que BeginForm faz.
Existe uma outra forma de utilização mais “elegante” e mais recomendada de utilização do Helper de Formulário. Esta outra forma utiliza a
declaração using que chama o métodoDispose do objeto retornado pelo método BeginForm e que por sua vez
chama o métodoEndForm para você.
1
2
3
4
5
@using(Html.BeginForm()){
<!-- elementos do formulário -->
...
...
}
A utilização do método BeginForm sem parâmetros vai fazer com que a action do formulário seja gerada como um postback para a própria URL que
foi requisitada. Se a requisição da página for pela URL http://localhost/FaleConosco/Contato/ a action do formulário será “/FaleConosco/Contato”.
1 <form action="/FaleConosco/Contato" method="post">
Entretanto, se a requisição da página do formulário for pela URL http://localhost/FaleConosco, quando o formulário for subtido teremos um erro pois
não existe no Controller do formulário uma Action Index que responda pelo método HTTP. Como a URL não possui o segmento da Action, a action
default da rota é selecionada ou seja, Index.
Para que possamos forçar que o submit da página seja feito sempre para a Action Contato do Controller FaleConosco é necessário utilizar uma
variação do método BeginForm onde passamos essas informações.
1
2
3
4
5
@using(Html.BeginForm("Contato", "FaleConosco")) {
<!-- elementos do formulário -->
...
...
}
Sobrecargas do Helper BeginForm:
Utilizando Input Helpers
Os Helpers de Input são utilizados para geração dos campos de entrada de um formulário. Existem 2 tipos de Input Helpers – os não tipados e os
tipados. A diferença entre eles é que o primeiro trabalha com o nome do elemento e o segundo trabalha diretamente com uma
propriedade do modelo.
Página 3 de HTML Helpers no MVC
propriedade do modelo.
Input Helpers Não Tipados
A forma mais simples dos Input Helpers não tipados recebe como argumento apenas uma string com o nome de uma propriedade. No momento de
gerar a View, o framework procura o valor correspondente desta propriedade no contexto atual da requisição verificando as estruturas ViewData e
ViewBag bem como o próprio modelo.
Lista parcial de HTML Input Helpers não Tipados:
View Contato.cshtml utilizando HTML Input Helpers Não-Tipados:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@model HtmlHelpers.Models.Contato
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Fale Conosco</title>
</head>
<body>
@using (Html.BeginForm("Contato", "FaleConosco"))
{
<h1>Fale Conosco</h1>
<div class="dataElement">
@Html.Label("Nome")
@Html.TextBox("Nome")
</div>
<div class="dataElement">
@Html.Label("Email")
@Html.TextBox("Email")
</div>
<div class="dataElement">
@Html.Label("Telefone")
@Html.TextBox("Telefone")
</div>
<div class="dataElement">
@Html.Label("TipoContato")
@Html.DropDownList("TipoContato", new SelectList(new List<Object> { new {Value=0, Text="Dúvida"},
new {Value=1, Text="Elogio"},
new {Value=2, Text="Reclamação"},
new {Value=3, Text="Sugestão"}}, "Value", "Text",
(int) Model.TipoContato))
</div>
<div class="dataElement">
@Html.Label("Descricao")
@Html.TextArea("Descricao", null, new { rows = "3" })
</div>
<input type="submit" id="contato-submit" value="Enviar" />
}
</body>
</html>
Página 4 de HTML Helpers no MVC
38 </html>
Input Helpers Tipados
Os HTML Helpers Tipados foram adicionado na versão 2 do ASP.NET MVC. Os HTML Helpers Tipados somente podem ser utilizados em Views Tipadas
(que possuem um modelo associado). Em vez de se basearem em um algorítimo de binding para buscar seus valores, esses métodos tipados utilizam
uma determinada propriedade do modelo usando lambda expression configurada na chamada do método. Quando criamos uma View pelo Visual
Studio e selecionamos a opção de Scaffolding (Template para Create, Details, Delete, Edit, etc.) são utilizados Html Helpers Tipados para todos os
campos do modelo informado.
Lista parcial de HTML Input Helpers Tipados:
View Contato.cshtml utilizando HTML Input Helpers Tipados:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@model HtmlHelpers.Models.Contato
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Fale Conosco</title>
</head>
<body>
@using (Html.BeginForm("Contato", "FaleConosco"))
{
<h1>Fale Conosco</h1>
<div class="dataElement">
@Html.LabelFor(model => model.Nome)
@Html.TextBoxFor(model => model.Nome)
</div>
<div class="dataElement">
@Html.LabelFor(model => model.Email)
@Html.TextBoxFor(model => model.Email)
</div>
<div class="dataElement">
@Html.LabelFor(model=> model.Telefone)
@Html.TextBoxFor(model => model.Telefone)
</div>
<div class="dataElement">
@Html.LabelFor(model => model.TipoContato)
@Html.DropDownListFor(model => model.TipoContato, new SelectList(new List<Object> { new {Value=0, Text="Dúvida"},
new {Value=1, Text="Elogio"},
new {Value=2, Text="Reclamação"},
new {Value=3, Text="Sugestão"}}, "Value", "Text"))
</div>
<div class="dataElement">
@Html.LabelFor(model => model.Descricao)
@Html.TextAreaFor(model => model.Descricao, new { rows = "3" })
</div>
<input type="submit" value="Enviar" />
}
</body>
</html>
O formulário utilizando os método HTML Input Helpers Tipados produzirá.basicamente a mesma saída HTML do formuário utilizando os HTML Input
Página 5 de HTML Helpers no MVC
O formulário utilizando os método HTML Input Helpers Tipados produzirá.basicamente a mesma saída HTML do formuário utilizando os HTML Input
Helpers Não-Tipados, porém a utilização do segundo permite que eventais erros sejam identificados em tempo de compilação além de ofereceer a
facilidade do Intellisense dentro do Visual Studio.
Sobre Renato Person
Instrutor, Arquiteto de Sistemas, Desenvolvedor e Consultor. Microsoft Certified Trainer (MCT), MCSD, MCPD. Especialista em desenvolvimento de
soluções web e serviços distribuídos.
De <http://www.dotnetdevelopers.com.br/html-helpers-em-asp-net-mvc-parte-1-visao-geral/>
Página 6 de HTML Helpers no MVC
HTML Helpers em ASP.NET MVC – Parte 2 – Criando Elementos Select
Publicado em 17 de dezembro de 2014 por Renato Person
Clique aqui para ver a Parte 1 deste artigo sobre HTML Helpers.
Esta é a segunda parte do artigo sobre HTML Helpers em ASP.NET MVC. Nesta parte irei falar sobre a
criação de elementos HTML select utilizando HTML Helpers.
Antes de mais nada é importante observar existe uma grande fonte de confusão quando aos frameworks
ASP.NET WebPages e ASP.NET MVC. Tratam-se de frameworks diferentes que se baseiam em conceitos
diferentes. WebPages é um modelo de desenvolvimento de páginas web mais simples do que MVC e que
é utilizado na ferramenta no IDE WebMatrix da Microsoft (apesar de também poder ser utilizado no
Visual Studio). Apesar WebPages e MVC poderem utilizar o mecanismo de templates templates Razor,
são modelos de desenvolvimento bem diferentes. Dentre essas diferenças podemos citar:
WebPages não utilizam o conceito de separação de View, Controller e Model.•
WebPages utilizam o conceito de Web Site enquando MVC utiliza o conceito de Web Applications.•
WebPages não são pré-compiladas.•
Mas porque estou falando sobre as diferenças entre WebPages e MVC quando o assunto é HTML
Helpers? Acontece que WebPages também possui HTML Helpers, porém utilizam bibliotecas diferentes
localizadas em outro Namespace. Apesar de possuirem nomes iguais e chamados de forma semelhante
(ex: @Html.TextBox(…)), possuem sobrecarga de métodos diferentes. Esse é um ponto que causa
confusão para os iniciantes, principalmente para aqueles que começaram a aprender desenvolvimento
web utilizando a ferramenta WebMatrix.
Os HTML Helpers do ASP.NET MVC utilizam as classes (na verdade Extension Methods) do
Namespace System.Web.Mvc.Html, enquanto os HTML Helpers do framework WebPages utilizam as
classes do Namespace System.Web.WebPages.Html. Esclarecidas essas diferenças vamos seguir falando
sobre a criação de elementos Select utilizando HTML Helpers.
Existem dois HTML Helpers destinados à criação de elementos Select: DropDownList eListBox. A
principal diferença entre eles é que o DropDownList é destinado à criação de caixa de seleção
(combobox) que permitem a seleção de apenas 1 item, enquanto que o ListBox é destinado à criação de
caixas de listagem que permitem seleção de múltiplas opções.
Voltando ao HTML puro do formulário de “Fale Conosco” apresentado na Parte 1 do artigo, o HTML da
caixa de seleção do tipo de contato é o seguinte:
1
2
3
4
5
6
<select name="TipoContato">
<option selected="selected" value="0">Dúvida</option>
<option value="1">Elogio</option>
<option value="2">Reclamação</option>
<option value="3">Sugestão</option>
</select>
Para cada opção da caixa de seleção existe um elemento <option> que por sua vez possui um valor
associado e uma descrição textual do item.
O Html Helper DropDownList recebe como parâmetro uma instância de SelectList. Essa classe é a
responsável por armazenar as opções que deverão ser apresentadas para o usuário. Ao criar uma
instância de SelectList, um dos parâmetros é uma coleção do tipo IEnumerable. Tipicamente, os itens de
um DropDownList é uma coleção de SelectListItem.
Para produzir a mesma marcação HTML anterior utilizando o Helper DropDownList devemos inserir o
seguinte código na View:
1
2
3
4
5
6
@Html.DropDownListFor(model => model.TipoContato,
new SelectList(new List<SelectListItem> {new SelectListItem{Value="0", Text="Dúvida"},
new SelectListItem{Value="1", Text="Elogio"},
new SelectListItem{Value="2", Text="Reclamação"},
new SelectListItem{Value="3", Text="Sugestão"}},
"Value", "Text"))
Usei neste exemplo a versão tipada de DropDownList, ou seja, DropDownListFor. Ele recebe como
parâmetro além da propriedade do modelo a ser utilizado para do Data Binding, uma instância de
SelectList inicializada com uma lista de SelectListItem. A classe SelectListItempossui 3 propriedades:
Value: indica o valor do item;•
Text: indica o texto do do item;•
Selected: indica se o item está selecionado.•
Além da lista de itens, a classe SelectList pode receber em seu construtor mais dois parâmetros:
dataValueField: indica qual propriedade dos itens possui o valor do item;•
dataTextField: indica qual propriedade dos itens possui o texto descritivo do item.•
Neste exemplo, a propriedade “Value” possui o valor do item e a propriedade “Text” possui o texto
descritivo do item.
Mas existe uma maneira mais simples de inicializar este DropDownList. Em vez de inicializarmos a
instância da classe SelectList com uma lista de SelectListItem, basta passarmos uma lista de instâncias de
classes anônimas que possuam duas propriedades: uma para o valor e outra para a descrição. Desta
forma, a declaração ficaria um pouco menor facilitando “um pouco” a digitação do código:
1
2
3
@Html.DropDownListFor(model => model.TipoContato,
new SelectList(new List<Object> {new {Value=0, Text="Dúvida"},
new {Value=1, Text="Elogio"},
HTML Helpers em ASP.NET MVC – Parte 2 – Criando
Elementos Select
domingo, 14 de junho de 2015 18:12
Página 7 de HTML Helpers no MVC
3
4
5
6
new {Value=1, Text="Elogio"},
new {Value=2, Text="Reclamação"},
new {Value=3, Text="Sugestão"}},
"Value", "Text"))
Na submissão do formulário, o valor do item selecionado será atribuído à propriedadeTipoContato do
modelo. Por exemplo, se o usuário selecionar o item Reclamação, será atribuído o valor 2 à
propriedade TipoContato do modelo (Contato).
A marcação HTML que é gerada pelos Helpers DropDownlist e ListBox é semelhante – a diferença
reside no fato de que o Helper ListBox acrescenta o atributo multiple=”multiple” ao
elemento <select> gerado. Além disso, em se tratando do ListBox, como o usuário pode selecionar
múltiplas opções, o elemento deve estar associado a uma propriedade do modelo que seja
um IEnumerable visto que ao realizar a submissão do formulário o mecanismo de Data Binding deverá
popular esta propriedade com a lista de valores dos itens selecionados.
Vamos considerar que o faça sentido selecionar maisde um tipo de contato para o mesmo cadastro do
“Fale Conosco”, ou seja, imaginemos que o usuário possa dizer que o contato em questão é referente a
uma “Dúvida” e a um “Elogio” ao mesmo tempo. Neste caso a lista de seleção “Tipo Contato” deveria
permitir que o usuário pudesse selecionar mais do que 1 item simultaneamente. Para que isso seja
possível, devemos utilizar o HTML Helper ListBox.
Podemos substiuir o código da View do DropDownList pelo código abaixo:
1
2
3
4
5
6
@Html.ListBoxFor(model => model.TipoContato,
new SelectList(new List<Object> {new {Value=0, Text="Dúvida"},
new {Value=1, Text="Elogio"},
new {Value=2, Text="Reclamação"},
new {Value=3, Text="Sugestão"}},
"Value", "Text"))
Mas ao tentar executar a aplicação e exibir a View você vai ser surpreendido pelo erro a seguir:
O que o erro está querendo dizer é que quando houver múltipla seleção, o valor resultante da seleção
deve ser um IEnumerable. Veja que o erro destaca a propriedade TipoContato do nosso modelo. No caso
em questão, model.TipoContato é um int, e por isso, caso o usuário selecionar mais do que 1 item não
haverá como armazenar esses múltiplos valores em uma propriedade do tipo inteiro.
Para que possamos corrigir esse problema, basta alterar o modelo Contato fazendo com que a
propriedade TipoContato seja um IEnumerable<int>.
1 public IEnumerable<int> TipoContato { get; set; }
Feito isso, o erro não será mais exibido e a View será renderizada conforme apresentado a seguir:
Se selecionarmos 2 itens (digamos Elogio e Sugestão), quando a action Contato for chamada na
Página 8 de HTML Helpers no MVC
Se selecionarmos 2 itens (digamos Elogio e Sugestão), quando a action Contato for chamada na
submissão do formulário, poderemos observar que esses dois valores estarão populados na lista
de TipoContato, ou seja, a lista irá conter os valores 1 e 3.
É importante observar também que o mecanismo de Data Binding desempenha um papel importante
nesse processo. Quando o formulário é submetido e uma action seleciona para processar a submissão, o
mecanismo de Data Binding tenta disponiblizar as informações postadas de diversas maneiras. No nosso
exemplo, ele irá criar uma instância de Contato e populare as suas propriedades com os valores
informados nos campos do formulário. Da mesma forma, quando a partir de uma action direcionamos o
fluxo para uma View o mecanismo de DataBinding irá tentar localizar os dados que devem ser
apresentados na View com base bas informações disponibilizadas a partir do modelo ou de estruturas de
armazenamento auxiliar como ViewBag e ViewData. Esse processo será detalhado na Parte 3 deste
artigo.
Por hora, basta saber que caso queiramos apresentar o formulário com valores pré-preenchido, podemos
atribuir ao modelo os valores desejados e chamar o método auxiliar View(model), conforme pode ser
visto a seguir:
1
2
3
4
5
6
7
8
9
10
11
public ActionResult Contato()
{
return View(new Contato()
{
Nome = "Renato Person",
Email = "renato.person@dotnetdevelopers.com.br",
Descricao = "teste\rteste\r\n",
Telefone = "11-99999-1111",
TipoContato = (IEnumerable<int>)new List<int>(new List<int> { 1, 3 })
});
}
Se digitarmos no browser a URL http://localhost/FaleConosco/Contato, será apresentado o formulário
com os dados já populados.
Na parte 3 do artigo você vai entender a importância disso no processo de validação de dados e entender
mais a fundo o processo de Data Binding do ASP.NET MVC. Não perca!
Sobre Renato Person
Instrutor, Arquiteto de Sistemas, Desenvolvedor e Consultor. Microsoft Certified Trainer (MCT), MCSD,
MCPD. Especialista em desenvolvimento de soluções web e serviços distribuídos.
De <http://www.dotnetdevelopers.com.br/html-helpers-em-asp-net-mvc-parte-2-criando-elementos-select/>
Página 9 de HTML Helpers no MVC
HTML Helpers: criando componentes Web customizados em ASP.NET MVC
Veja neste artigo o que são e como implementar as estruturas conhecidas como HTML Helpers. Este tipo de
recurso pode contribuir para uma maior agilidade no desenvolvimento de aplicações ASP.NET.
O reuso de código, evitando assim a existência de trechos com instruções repetidas
ao longo de todo um sistema;
•
Uma maior facilidade para a manutenção de funcionalidades encapsuladas por um
controle, visto que o código que implementa o mesmo encontra-se normalmente
centralizado em um uma biblioteca específica;
•
Novas aplicações podem ser elaboradas combinando componentes já criados
anteriormente, fato este que contribui para uma maior agilidade no
desenvolvimento de tais projetos.
•
O desenvolvimento de componentes para posterior reutilização é, sem sombra de
dúvidas, uma prática bastante difundida dentro da área de software. Diversas são as
vantagens decorrentes desta abordagem:
A própria plataforma ASP.NET dispõe de alternativas que permitem o desenvolvimento
de novos componentes. No caso de aplicações baseadas na tecnologia Web Forms, são
oferecidas opções para a construção de controles tanto a partir de recursos pré-
existentes (via herança de classes), quanto por meio da combinação de vários
componentes formando assim uma nova estrutura (User Controls). Já em projetos
criados através do framework MVC, um dos meios possíveis para isto está na definição
de HTML Helpers customizados.
A geração de links que apontam automaticamente para os locais corretos, partindo
para isto de caminhos relativos;
•
A execução de forma transparente do processo de data binding (ligação) entre
dados de objetos pertencentes à camada Model com campos HTML presentes em
uma View;
•
Validações de dados presentes em um formulário HTML (dispensando em muitos
casos a escrita de extensos trechos de código em Javascript).
•
Considerando o processo de implementação de Views no ASP.NET MVC, um HTML
Helper pode ser definido, em termos gerais, como um tipo de funcionalidade que auxilia
no trabalho com elementos HTML. Muito embora pareça fácil a simples inclusão de tags
HTML no conteúdo de uma View, o grande benefício decorrente do uso de HTML Helpers
está na simplicidade que os mesmos oferecem para a codificação de instruções mais
complexas como:
Na prática, um HTML Helper nada mais é do que um método acionado a partir da
propriedade Html (instância do tipo System.Web.Mvc.HtmlHelper), com isto acontecendo
dentro de uma View. Como resultado da execução de tal operação, espera-se que a
mesma retorne uma string contendo um trecho de código HTML.
A Listagem 1 apresenta um exemplo bastante simples de utilização de um HTML Helper.
Neste caso, foi empregado o método CheckBox, o qual produzirá como retorno de sua
execução um item/caixa para seleção (recebendo como parâmetro o id/nome do controle
a ser gerado), com o texto “CheckBox de Exemplo” posicionado à direita do mesmo.
Listagem 1: Utilizando um HTML Helper em ASP.NET MVC
@Html.CheckBox("chkExemplo")
CheckBox de Exemplo
A finalidade deste artigo é demonstrar como HTML Helpers customizados podem ser
criados, adicionando assim novas funcionalidades para a construção de Views em
aplicações ASP.NET MVC. Buscando cumprir este objetivo, será implementado um
projeto de exemplo abordando os conceitos aqui descritos.
HTML Helpers: criando componentes Web customizados
em ASP.NET MVC
domingo, 14 de junho de 2015 18:24
Página 10 de HTML Helpers no MVC
projeto de exemplo abordando os conceitos aqui descritos.
Criando a solução de exemplo
A aplicação apresentada neste artigo foi gerada a partir do Visual Studio 2012
Professional, utilizando para isto o .NET Framework 4.5, além da versão 4.0 do ASP.NET
MVC. O exemplo aqui discutido procura demonstrar como um HTML Helper pode ser
criado, a fim de possibilitar com isto o reuso de trechos de códigoHTML ao longo de uma
ou mais aplicações.
Para gerar o projeto de testes será necessário, dentro do Visual Studio, acessar o menu
File, opção New e, por fim, opção Project. Dentro da tela New Project (Figura 1)
selecionar o template ASP.NET MVC 4 Web Application, preenchendo o campo Name com
o nome da aplicação a ser gerada (“TesteHTMLHelper”, neste caso); no campo Location
é possível ainda definir o diretório no qual serão criados os arquivos para este projeto.
Figura 1: Criando um projeto ASP.NET MVC 4 para testes
Aparecerá então uma janela como a que consta na Figura 2. Deverão ser escolhidos o
template para a criação do projeto (selecionar “Internet Application”), assim como o
Engine utilizado para a geração das Views (marcar a opção “Razor”).
Página 11 de HTML Helpers no MVC
Figura 2: Criando um projeto ASP.NET MVC 4 para testes
Implementando um novo HTML Helper
Com o projeto TesteHTMLHelper já criado, chega o momento de prosseguir com a
construção da classe em que será definido um novo HTML Helper. O objetivo é
implementar um método que gere, como resultado de sua execução, um link (em código
HTML) que permita ao usuário retornar a uma página em que se encontrava
anteriormente; trata-se de uma funcionalidade de comportamento idêntico ao do botão
“Voltar” dos browsers convencionais.
Para que isto seja possível, um novo projeto do tipo Class Library deverá ser criado,
tendo por nome “TesteHTMLHelper.Html” (conforme indicado na Figura 3).
Página 12 de HTML Helpers no MVC
Figura 3: Criando a Class Library TesteHTMLHelper.Html
Como próximo passo, adicionar ao projeto referências aos assemblies System.Web e
System.Web.Mvc (Figura 4). Este procedimento possibilitará a utilização das classes
necessárias à implementação do Helper já mencionado.
Figura 4: Adicionando bibliotecas requeridas pelo projeto TesteHTMLHelper.Html
Do ponto de vista prático, HTML Helpers customizados representam exemplos de
estruturas conhecidas como Extension Methods. Construções deste tipo permitem a
definição de novas funcionalidades, sem que isto implique na necessidade de herdar
classes pré-existentes a fim de incluir ou, até mesmo, remodelar certos
comportamentos. Os próprios HTML Helpers nativos do framework ASP.NET MVC foram
criados sob a forma de Extension Methods.
A operação LinkVoltar é um Extension Method que adiciona uma nova capacidade
ao tipo HtmlHelper (namespace System.Web.Mvc), sem que isto implique na
necessidade de se gerar uma nova classe derivada do mesmo. Esse método recebe
como parâmetro uma instância da classe HtmlString precedida pela palavra-chave
“this” (isto é uma característica típica de um Extension Method), além de dois
outros parâmetros que correspondem à identificação (id) do link HTML a ser gerado
e ao texto de exibição para este controle (com este último sendo opcional,
•
Na Listagem 2 encontra-se o código referente à classe estática HtmlHelperExtension.
Este tipo foi estruturado da seguinte maneira:
Página 13 de HTML Helpers no MVC
e ao texto de exibição para este controle (com este último sendo opcional,
assumindo o valor default “Voltar” caso não tenha sido informado);
O retorno do método LinkVoltar será uma instância do tipo MvcHtmlString
(namespace System.Web.Mvc), a qual é gerada repassando-se à mesma a string
que define o link HTML. Conforme é possível observar, ao se acionar tal link o
usuário será redirecionado para a página em que se encontrava anteriormente,
com isto acontecendo através da Javascript “history.go(-1)”.
•
Listagem 2: Classe HtmlHelperExtension
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Html;
namespace TesteHTMLHelper.Html
{
public static class HtmlHelperExtension
{
public static MvcHtmlString LinkVoltar(
this HtmlHelper html,
string idLink,
string textoLink = "Voltar")
{
string strLink = String.Format(
"<a id=\"{0}\" href=\"javascript:history.go(-1);\">{1}</a>",
idLink, textoLink);
return new MvcHtmlString(strLink);
}
}
}
Utilizando o novo HTML Helper
Com o tipo HtmlHelperExtension já definido, deve-se proceder agora com o acerto das
Views que farão uso do mesmo dentro do site TesteHTMLHelper.
O primeiro passo será incluir no projeto MVC uma referência que aponte para a
biblioteca TesteHTMLHelper (Figura 5).
Figura 5: Adicionando uma referência à biblioteca TesteHTMLHelper.Html
Página 14 de HTML Helpers no MVC
O arquivo Web.config que se encontra dentro da pasta Views também deverá ser
alterado: incluir em “system.web.webPages.razor > pages > namespaces” uma
declaração que aponte para o namespace TesteHTMLHelper.Html. O objetivo deste
ajuste é possibilitar que o HTML Helper LinkVoltar esteja disponível para todas as Views
da aplicação (com isto sendo feito a partir da propriedade Html).
Listagem 3: Ajustes no arquivo Web.config da pasta Views
<?xml version="1.0"?>
<configuration>
...
<system.web.webPages.razor>
...
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
...
<add namespace="TesteHTMLHelper.Html" />
</namespaces>
</pages>
</system.web.webPages.razor>
...
</configuration>
Com o namespace TesteHTMLHelper.Html já listado no arquivo Web.config, o método
LinkVoltar estará disponível para utilização nas Views da aplicação. A Figura 6
exemplifica isto.
Figura 6: HTML Helper já disponível para utilização em Views
Caso não se opte por efetuar a alteração no Web.config, uma alternativa é declarar o
namespace TesteHTMLHelper.Html em todas as Views que dependam do método
LinkVoltar. Na Listagem 4 está um exemplo disto.
Listagem 4: Declarando o namespace TesteHTMLHelper.Html em uma View
@using TesteHTMLHelper.Html
...
A Listagem 5 apresenta o código referente à View About. A página HTML correspondente
conterá uma descrição dos objetivos que motivaram a construção desta aplicação de
testes. Quanto ao uso do HTML Helper LinkVoltar, foi informado apenas um “id” como
parâmetro de entrada (assumindo-se com isto o valor default “Voltar” para o texto do
link).
Listagem 5: View About.cshtml
Página 15 de HTML Helpers no MVC
Listagem 5: View About.cshtml
<hgroup class="title">
<h1>Sobre</h1>
<h2>Informações a respeito desta
aplicação de exemplo</h2>
</hgroup>
<article>
<p>
Aplicação MVC criada com o objetivo de se
testar o uso de HTML Helpers.
</p>
</article>
<br />
<br />
<p>
@Html.LinkVoltar("lnkVoltar")
</p>
Já na Listagem 6 está a implementação da View Contact, a qual exibirá informações para
contato. Neste último caso, foi empregado o método LinkVoltar, preenchendo para isto
os dois parâmetros possíveis para este HTML Helper (um id que identifica o link a ser
criado, bem como o texto associado ao mesmo).
Listagem 6: View Contact.cshtml
<hgroup class="title">
<h1>Contato</h1>
<h2>Informações sobre o Autor</h2>
</hgroup>
<section class="contact">
<header>
<h3>Email</h3>
</header>
<p>
<span class="label">Dúvidas / Outras informações:</span>
<span><a href="mailto:renato.groffe@yahoo.com.br">
renato.groffe@yahoo.com.br</a></span>
</p>
</section>
<p>
@Html.LinkVoltar("lnkVoltar", "Retornar à página anterior")
</p>
Executando a aplicação de testes
Iniciando a execução da do projeto de testes, será exibida uma tela como a que consta
na Figura 7.
Página 16 de HTMLHelpers no MVC
Figura 7: Aplicação em execução
Acionando a aba “Sobre”, aparecerá uma página similar à da Figura 8. Ao clicar no link
“Voltar”, acontecerá então o redirecionamento para o local em que o usuário se
encontrava anteriormente (a página inicial da aplicação se respeitada a sequência de
testes indicada até este momento)
Figura 8: Página Sobre
Já na Figura 9 está a visualização da página “Contato” (acessível através da aba de
mesmo nome). Assim como aconteceu com a página “Sobre”, o link “Retornar à página
anterior” reconduzirá um usuário ao documento HTML que o mesmo vinha acessando
anteriormente.
Figura 9: Página Contato
Página 17 de HTML Helpers no MVC
Figura 9: Página Contato
Conclusão
Embora o exemplo de HTML Helper aqui apresentado seja extremamente simples,
procurei através do mesmo demonstrar como estruturas deste tipo podem
implementadas em projetos baseados na tecnologia ASP.NET MVC. Por mais que este
framework conte com um extenso conjunto de funcionalidades para a geração de
interfaces HTML, em alguns casos poderá ser necessária a construção de controles
combinando vários elementos pré-existentes.
Conforme já discutido neste artigo, a implementação de controles visuais customizados
para posterior reutilização pode, se bem estruturada, trazer uma série de vantagens. A
adoção deste tipo de abordagem possibilita não apenas uma economia de tempo durante
o desenvolvimento de novos projetos, como também torna mais simplificada a
manutenção de uma funcionalidade comum a vários sistemas (ou mesmo, a diversos
pontos de uma aplicação).
Espero que este conteúdo possa ser útil no seu dia a dia. Até uma próxima
oportunidade!
Renato Jose Groffe
Atua como consultor em atividades voltadas ao desenvolvimento de softwares há mais de 10 anos. Bacharel
em Sistemas de Informação, com especialização em Engenharia de Software. Microsoft Certified Technology
Specialist (Web, WCF, [...]
Leia mais em: HTML Helpers: criando componentes Web customizados em ASP.NET
MVC http://www.devmedia.com.br/html-helpers-criando-componentes-web-customizados-em-asp-
net-mvc/27703#ixzz3d4ecwigP
De <http://www.devmedia.com.br/html-helpers-criando-componentes-web-customizados-em-asp-net-mvc/27703>
Página 18 de HTML Helpers no MVCMais conteúdos dessa disciplina
Arquitetura de Software- Av2 - Arquitetura de Software
- Arquitetura de Software
- Oque é Arquitetura de Software
- Arquitetura de Software
- Arquitetura de Software - QUIZ
- Colaborar - Av - Subst 1 - Arquitetura de Software
- Av - Subst 1 - Arquitetura de Software
- Av - Subst 2 - Arquitetura de Software
- Segurança e Arquitetura de Software
- Importância das Soft e Hard Skills
- Aula_02 - Arquitetura de Aplicações
- TPM1 - Trabalho Prático do Módulo 1
- Os viewpoints são cruciais, pois cada um representa as necessidades e preocupações específicas de diferentes stakeholders, permitindo que as decisõ...
- Qual é o objetivo dos princípios de design de software?
Organizar o código de forma estética e elegante.
Facilitar a compreensão e manutenção do so...
- Considere as assertivas abaixo sobre a visão de componentes e conectores A visão de componentes e conectores representa elementos de implementação...
- Em que camada da arquitetura de referência para Data Lake a solução Amazon Quicksight seria mais utilizada? Grupo de escolhas da pergunta Camada d...
- Em que camada da arquitetura de referência para Data Lake a solução AWS Glue seria mais utilizada? Grupo de escolhas da pergunta Camada de Ingestã...
- Questão 1 | ARQUITETURA DE SOFTWARE E COMPUTACAO EM NUVEM Código da questão: 241203 Leia o trecho a seguir: “O uso da Criptografia não é recente e ...
- Questão 1 | ARQUITETURA DE SOFTWARE E COMPUTACAO EM NUVEM Código da questão: 241203 Leia o trecho a seguir: “O uso da Criptografia não é recente e ...
- Questão 5 | ARQUITETURA DE SOFTWARE E COMPUTACAO EM NUVEM Código da questão: 241754 Ao se definirem estratégias arquiteturais e criar seu design, a...
- Ao se definirem estratégias arquiteturais e criar seu design, a visão arquitetural continua sendo uma das formas mais importantes de se comunicar a...
- Conteúdo do teste Pergunta 1 0 Pontos O modelo arquitetural SOA, normalmente, utiliza ferramentas para auxiliar na sustentação e na implantação de...
- Em um processo de desenvolvimento de software, a confecção de um projeto arquitetural traz grandes vantagens, uma vez que ele é responsável por emp...
- O modelo arquitetural SOA, normalmente, utiliza ferramentas para auxiliar na sustentação e na implantação de suas regras e definições. Uma das ferr...
- Qual dos seguintes NÃO é um elemento fundamental da arquitetura de software, segundo Pressman?
a.
Componentes
b.
Interfaces
c.
Propriedades
...
- Redação sobre EAD
- CADERNO DE EXERCICIOS
