ASP.NET MVC 3: Razor Helpers

Yo Joe!

De volta com mais um post sobre Razor.

Como sabemos, podemos (e devemos) encapsular código de uma view para permitir seu reuso. Podemos fazer isso escrevendo métodos de extensão para a classe HtmlHelper.

Abaixo segue um exemplo bem simples:

namespace RazorHelpers
{
    public static class NonSenseListHelper
    {
        public static MvcHtmlString CriarLista(this HtmlHelper htmlHelper, string[] itens)
        {
            var tagBuilder = new TagBuilder("ul");

            foreach (var item in itens)
            {
                var itemTag = new TagBuilder("li");
                itemTag.SetInnerText(item);
                tagBuilder.InnerHtml += itemTag.ToString();
            }
            return new MvcHtmlString(tagBuilder.ToString());
        }
    }
}

Criado o helper, podemos utilizá-lo em qualquer view, como a seguir (notem a importação do namespace onde está o método de extensão: RazorHelpers):

@{
    var lista = new[] { "Robson", "Castilho" };
}
@using RazorHelpers

<h2>Minha lista via Helper:</h2>

@Html.CriarLista(lista)

Razor helpers inline

Agora, com o Razor, podemos criar um helper usando a tag @helper. Abaixo segue o mesmo método usado no primeiro exemplo, agora criado na própria view:

@{
    var lista = new[] { "Robson", "Castilho" };
}

@helper CriarLista(string[] itens)
{
    <ul>
    @foreach (var item in itens)
    {
        <li>@item</li>
    }
    </ul>
}

<b>Chamando 1ª vez:</b>
@CriarLista(lista)

<b>Chamando 2ª vez</b>
@CriarLista(lista)

Com essa segunda abordagem não precisamos criar um método de extensão para HtmlHelper porque o método é implementado diretamente na view (helper inline). Notem que o método CriarLista é chamado 2 vezes. Sem o helper inline, teríamos que ter repetido o bloco foreach pela view!

Colocando Razor helpers em arquivos separados

Com o helper inline, não podemos reutilizar o bloco em outras views. Para que isso seja possível, devemos criar o helper em um arquivo .cshtml separado, seguindo os seguintes passos:

1. Crie uma nova pasta na aplicação MVC com o nome de App_Code (pasta especial do ASP.NET).

2. Crie uma nova view dentro da pasta App_Code e chame-a, por exemplo, de Helpers.cshtml.

3. Coloque o bloco de código do helper dentro do arquivo App_Code\Helpers.cshtml:

@helper CriarLista(string[] itens)
{
    <ul>
    @foreach (var item in itens)
    {
        <li>@item</li>
    }
    </ul>
}

4. Altere a view para utilizar o helper do arquivo Helpers.cshtml, como abaixo:

@{
    var lista = new[] { "Robson", "Castilho" };
}

<b>Chamando 1ª vez:</b>
@Helpers.CriarLista(lista)

<b>Chamando 2ª vez</b>
@Helpers.CriarLista(lista)

Pronto! Agora o helper do Razor pode ser reaproveitado em várias views.

Conclusão

Vimos como é bem simples de se utilizar um helper do Razor com a tag @helper.

Para reuso de código em mais de uma view, podemos colocar o helper em um arquivo .cshtml (que deve ficar na pasta App_Code) ou ainda criarmos métodos de extensão para a classe HtmlHelper. Com a última opção, é possível deixar os helpers em outra class library. Utilize a opção mais adequada para sua solução.

[]s e até a próxima!

Anúncios

6 comentários em “ASP.NET MVC 3: Razor Helpers

    1. Olá Alexis
      Obrigado pelo contato.
      Eu desconheço uma forma de usar os helpers do Razor fora do App_Code (que não seja inline na view).
      Nestes casos de helpers que irei utilizar em mais de uma view, prefiro implementar métodos de extensão para o HtmlHelper.
      []s

  1. Robson, estou trabalhando em site usando MVC 3 Razor, eu ja terminei a parte do gerenciador de conteudo, e agora estou dificuldades para jogar o conteudo para o frontend do site, na pagina inicial exibe varios conteudos de tabalas diferentes, como eu posso fazer isso?

    1. Olá, Ricardo

      Desculpa pela demora em te responder! Acredito até que você já tenha solucionado seu problema (espero!) mas enfim….
      Fique difícil te responder sem muitas informações, sem saber como está sua aplicação. Conhece o conceito de view models? O caminho é por aí..agregar as informações que você precisa exibir (que podem vir de vários outros objetos) em uma classe “burra” somente pra isso.
      Você também pode fazer uso de Partial Views ou preencher “pedaços” do conteúdo com JSON.

      Desculpe não ser muito objetivo mas sem mais detalhes de sua aplicação, complica.
      []s

Participe! Vamos trocar uma ideia sobre desenvolvimento de software!

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s