Criando HTML Helpers para ASP NET MVC 3

Criado por
Leandro Prado
em 12 de fevereiro de 2011Postado em: ASP NET MVC 3

Fala Galera.. blz???

Continuando os estudos com o ASP NET MVC 3, hoje vou falar sobre os Helpers

O que são HTML Helpers?

Um HTML Helper é apenas um método que retorna um string com o conteúdo das tags HTML, também podemos usar HTML Helpers para tornar os conteúdos mais complexos fáceis de usar. A estrutura do ASP.NET MVC já inclui alguns HTML Helpers padrão, veja alguns deles abaixo:

  • Html.ActionLink ()
  • Html.CheckBox ()
  • Html.DropDownList ()
  • Html.Hidden ()
  • Html.TextArea ()
  • Html.TextBox ()

A grande vantagem de usar os HTML Helpers, podemos reduzir a quantidade de digitação tediosa de tags HTML e reutilizar em todo o nosso site – ou até mesmo em múltiplos sites diferentes.

Exemplo

Imagine que em sua aplicação vamos ter uma entidade Pessoa, e que em vários lugares vamos precisar listar as pessoas cadastradas em uma grid, em vez de em todas as telas criar uma tabela e mostrar as informações, vamos criar um Helper que passamos uma lista de pessoa para criar a grid.

Dentro do seu projeto ASP NET MVC 3 crie uma pasta chamada App_Code

Agora vamos criar um novo arquivo chamado HelperListaPessoa.cshtml, clique com o botão direito sobre a pasta App_Code e selecione Add -> New Item e selecione o tipo de arquivo MVC 3 View Page (Razor)

Agora vamos adicionar o código responsável por criar a nossa grid como os dados da pessoa, veja abaixo:

[sourcecode language=”html”]
@using FirstProjectAspNetMvc3.Models

@helper ListaPessoa(IEnumerable<PessoaModel> listaPessoa)
{
<table>
<tr>
<th></th>
<th>Nome</th>
<th>Endereco</th>
<th>DataNascimento</th>
</tr>

@foreach (var item in listaPessoa)
{
<tr>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
<td>@item.Nome</td>
<td>@item.Endereco</td>
<td>@item.DataNascimento</td>
</tr>
}
</table>
}
[/sourcecode]

Linha 1: Referência para o nosso model – PessoaModel
Linha 3: Declaramos o @helper com o nome ListaPessoa que recebe como parâmetro um IEnumerable do tipo PessoaModel
Linha 13: Fazemos um foreach para criar a grid

Agora temos que chamar o nosso Helper na página, veja como é simples…

[sourcecode language=”html”]
<div>
@HelperListaPessoa.ListaPessoa(Model)
</div>
[/sourcecode]

Para chamar o helper passamos o nome do Arquivo + Nome do helper passando o parâmetro esperado!

Veja que “teoricamente” nosso helper está pronto, porém se executa o projeto vamos ver que vamos receber um belo erro, PAM!!

Compiler Error Message: CS1061: ‘System.Web.WebPages.Html.HtmlHelper’ does not contain a definition for ‘ActionLink’ and no extension method ‘ActionLink’ accepting a first argument of type ‘System.Web.WebPages.Html.HtmlHelper’ could be found (are you missing a using directive or an assembly reference?)

Que erro é esse?

Quando apareceu esse erro, aparentemente era uma referência que estava faltando, porque dentro do nosso helper estamos usando outro helper padrão do ASP NET MVC que é o ActionLink, porém mesmo adicionando um using para o namespace System.Web.Mvc.Html continua o erro.

Fazendo uma pesquisa no Google não consegui achar nada referente ao erro, também postei esse erro no grupo de discussão DotNetBr, e no Fórum da Microsoft, mas ambos sem sucesso, foi aí que postei uma thread no Stackoverflow e lá consegui a solução para o problema.

Acontece que o Helper criado não consegue ter acesso aos controles do ASP NET MVC, para isso foi criado um classe HelperPage dentro da pasta App_Code que herda de System.Web.WebPages.HelperPage dessa forma criando novamente a diretiva @Html, veja abaixo

[sourcecode language=”csharp”]
namespace FirstProjectAspNetMvc3.App_Code
{
public class HelperPage : System.Web.WebPages.HelperPage
{
// Workaround – exposes the MVC HtmlHelper instead of the normal helper
public static new HtmlHelper Html
{
get { return ((System.Web.Mvc.WebViewPage)WebPageContext.Current.Page).Html; }
}
}
}
[/sourcecode]

Agora em nosso helper ListaPessoa temos que herdar dessa classe criada.

[sourcecode language=”html”]
@inherits FirstProjectAspNetMvc3.App_Code.HelperPage
@using System.Web.Mvc
@using System.Web.Mvc.Html
@using FirstProjectAspNetMvc3.Models

@helper ListaPessoa(IEnumerable<PessoaModel> listaPessoa)
{
<table>
<tr>
<th></th>
<th>Nome</th>
<th>Endereco</th>
<th>DataNascimento</th>
</tr>

@foreach (var item in listaPessoa)
{
<tr>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
<td>@item.Nome</td>
<td>@item.Endereco</td>
<td>@item.DataNascimento</td>
</tr>
}
</table>
}
[/sourcecode]

Dessa forma coseguimos ter acesso aos controles do ASP NET MVC

Conclusão

HTML Helpers são métodos que podem ser chamados dentro dos blocos de código, e que encapsulam a geração de código HTML dessa forma agilizando a codificação

Qualquer dúvida, opinião, reclamação mande seu comentário!

Aquele Abraço!

Tags: , ,

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.