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!
Você sabe se é possível separar essa View Page em outro Assembly?
Augusto,
Nunca tentei colocar uma View Page em outro assembly diferente do web, ja que sempre uma view page pertence ha um projeto web
att,
Leandro Prado
Razor Single File Generator for MVC
http://visualstudiogallery.msdn.microsoft.com/f28290ce-d987-4f91-b034-707031e10ce6
Valeu Cesar pela dica!!
Fiz o download do seu projeto, porém quando clico em Editar, aparede o seguinte erro.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /Pessoa/Editar/1
Pode me ajudar por favor?
Obrigado
Bruno,
Esse exemplo era apenas para listar os registros usando um helper, por isso está ocorrendo do erro 404
att,
Leandro Prado
Leandro, estou trabalhando em um projeto de um site que estou usando MVC 3 razor, a area administrativa do site eu consegui terminar sem problemas, estou precisando de uma ajuda para listar o conteudo nas paginas do site. qual maneira eu posso fazer isso?
Ricardo,
Pode usar o Razor, assim como fez na parte administrativa, poderá fazer na parte do portal!
att,
Leandro Prado
Leandro, tenho um sistema de gerenciamento de conteudo que ira alimentar os dados em um website estou usando o asp.net mvc 3 razor, com tudo eu estou com dificuldades para listar o conteudo nas paginas do site, queria saber si eu usar as helper customizadas ira funcionar? ou tem outra maneira mais simples?
Ricardo,
Dentro de um Helper você conesegue renderizar qualquer conteúdo em HTML, nessa caso seu creio que vai dar certo!
att,
Leandro Prado
Muito obrigado deu certo aqui, só que surgiu uma outra duvida, na minha aplicação não estou usando nenhuma mensagem de returno para usuário, como eu posso criar uma mensagem avisando que um cadastro foi realizado com sucesso?
Ricardo
O mais comum é usar o objeto ViewBag
Em seu controler vc faz ViewBag.Mensagem = “Cadastro realizado” ai no seu HTML você recupera o ViewBag.Mensagem
att,
Leandro Prado
Muito Obrigado, sua dica foi de grande utilidade pra mim, consegui resolver meus problemas com aplicação asp.net mvc 3 vlw mesmo [].
Leandro, vc sabe como eu posso fazer para colocar um evento onclick em checkbox do razor para atualizar a linha selecionada de um tabela?
Ricardo
Você terá que fazer uma função JS para selecionar a linha da tabela, e depois você chama essa função assim – @Html.CheckBox(“chkStatus”, true, new { onclick = “SelecionaLinha();” })
att,
Leandro Prado
Deu certo aqui, vlw pela ajuda, agora estou tentando fazer um carrinho que envia os pedidos do cliente para um email.
Leandro, vc sabe como eu posso fazer para ler xml externo com Ajax?
Estou usando um HtmlExtension para construir uma Telerik DropDownList. Mas não consigo retornar este objecto como MVCHtmlString. Há alguma maneira de o fazer?
Olá Leandro onde consigo baixar esse projeto?
Olá Leandro, você sabe me dizer se dá pra criar um helper para um formulário de cadastro? Tentei implementar seguindo o exemplo acima e realmente agora eu tenho acesso ao @Html dentro do helper, mas o @Html.EditorFor não aparece quando dou Crtl + espaço(Lembrando que eu terei que associar esse helper à uma de minhas models). Abraço.
Como faz funcionar no MVC 4?
Obtenho o erro
Erro de Compilação
Descrição: Erro ao compilar um recurso necessário para atender esta solicitação. Examine os detalhes específicos do erro e modifique o código fonte apropriadamente.
Mensagem de Erro do Compilador: CS0029: Não é possível converter implicitamente o tipo ‘System.Web.Mvc.HtmlHelper’ em ‘System.Web.WebPages.Html.HtmlHelper’
Erro de Origem:
Linha 12: public static new HtmlHelper Html
Linha 13: {
Linha 14: get { return ((System.Web.Mvc.WebViewPage)WebPageContext.Current.Page).Html; }
Linha 15: }
Linha 16: }