ASP.NET MVC Custom Helpers

Introdução

Nos artigos anteriores, pode-se notar que há um gasto desnecessário em codificação na escrita de URLs por exemplo. O ASP.NET MVC permite que customizemos os os membros da classe Html e Url, facilitando o uso dos mesmos nas Views.

Em alguns casos, podemos customizar até mesmo componentes, como foi o caso do DropDownList Helper que sobrescrevi, e pode ser encontrado neste link: http://andrebaltieri.insidedotnet.com.br/andre_baltieri/post/ASPNET-MVC-DropDownList-Helper.aspx. Deste modo, temos um DropDownList que trabalha facilmente com Enumeradores.

Neste artigo vamos explorar esta liberdade que o ASP.NET MVC nos fornece.

HTML Helpers

Os HTML Helpers fornecem acesso a controles HTML através de Tags do ASP.NET, como por exemplo <%= Html.TextBox("nome") %>. Os HTML Helpers disponíveis por padrão são:

Html.ActionLink()
Html.BeginForm()
Html.CheckBox()
Html.DropDownList()
Html.EndForm()
Html.Hidden()
Html.ListBox()
Html.Password()
Html.RadioButton()
Html.TextArea()
Html.TextBox()

Estas tags devem ser utilizadas entre as tags <% using (Html.BeginForm()) { %> e <% } %>, que identificam a região de um formulário na página.

Por fim, quando renderizada, esta tag utilizando o HTML Helper teremos o input clássico do HTML <input id="nome" name="nome" type="text" value="" />.

Um detalhe interessante nesta parte é que temos que utilizar o caractere "=" para que o TextBox seja renderizado (<%= Html.TextBox("nome") %>). Quando não utilizamos nenhum caractere após inicial a tag <%, significa que não haverá nada para ser renderizado na tela.

Criando HTML Helpers

Basicamente existem duas formas de se criar Helpers customizados, e elas são através de Static Methods e Extension Methods.

Para este exemplo, criei uma nova pasta na raiz da minha aplicação MVC chamada de Helpers, e em seguida adicionei uma nova classe, chamada LabelHelper.

Nos Static Methods, o que devemos fazer é retornar uma string com o código do controle HTML. Neste caso, retornaremos uma Label, como mostrado na Listagem 1.

 
using System;
 
namespace MvcCustomHtmlHelper.Helpers
{
    public class LabelHelper
    {
        public static string Label(string target, string text)
        {
            return String.Format("{1}", target, text);
        }
    }
}

Listagem 1 - Static Method para criação de Labels.

Deste modo, podemos importar o namespace no qual nosso helper está criado e utilizá-lo normalmente em nossas Views, como mostrado na Figura 1.

Figura 1 - Utilizando o LabelHelper criado.

Na outra mão, temos os Extension Methods, onde extendemos o próprio Html Helper, e então adicionamos funcionalidades ao membro Html.

Deste modo, temos um código similar, mas não estamos criando um novo Helper, e sim extendendo ele. A Listagem 2 ilustra o código dessa classe.

 
public static class LabelExtensions
{
    public static string Label(this HtmlHelper helper, string target, string text)
    {
        return String.Format("{1}", target, text);
    }
}

Listagem 2 - Extension Method para criação de Labels.

Note que apenas o construtor mudou na classe, porém, na hora de utilizar este na View, teremos a seguinte situação.

Figura 2 - Utilizando o LabelHelper criado (Extension Method).

Note que quando os membros aparecem, o Label consta, e deixando o mouse sobre o mesmo, temos a indicação que este é uma extensão (Extension).

Criando URL Helpers

Até o momento, vimos como criar helpers para controles HTML, porém, outra coisa que podemos fazer é criar helpers para URL.

Há um tempo Kazi Manzur Rashid publicou (E vem mantendo atualizado) um post sobre melhores práticas com ASP.NET MVC. Dentre as várias melhores práticas estão presente a criação de Extension Methods para gerar roteamento de URLs no ASP.NET MVC e também mapear arquivos js e css.

Para ver todas as melhores práticas acesse o endereço: http://weblogs.asp.net/rashid/archive/2009/04/01/asp-net-mvc-best-practices-part-1.aspx

UrlHelper Extension Methods

O UrlHelper permite a criação de links para ações de controllers mais fácilmente. Ele também permite que as rotas sejam testadas, já que temos métodos para isto.

A Listagem 3 mostra a criação de extension methods para Url.

 
public static class UrlHelperExtension
{
    public static string Home(this UrlHelper helper)
    {
        return helper.Content("~/");
    }
 
    public static string Products(this UrlHelper helper)
    {
        return helper.Content("Product");
    }
 
    public static string Browse(this UrlHelper helper, string category)
    {
        return helper.Content("Product/Browse/" + category);
    }
}

Listagem 3 - Extension Method para Rotas de URL.

No primeiro e segundo método, retornamos a rota padrão (Default Route) e o controller Product, respectivamente.

No terceiro método, retornamos um caminho completo, junto a categoria dos produtos. No final, teremos uma string como "Products/Browse/Foods" por exemplo.

Nota: O ideal no terceiro método seria utilizar o método RouteUrl, porém como Custom Routes não é o objetivo deste artigo, simplesmente utilizamos o método Content.

Por fim, a Figura 3 ilustra a utilização destes métodos na View.

Figura 3 - Utilizando o UrlHelper criado (Extension Method).

File Helper

Vamos então criar helpers para arquivos, como por exemplo arquivos javascript, imagens e CSS.

A idéia aqui é a mesma dos Url helpers, facilitar possíveis testes e facilitar a utilização de arquivos na View. Novamente, teremos métodos simples utilizando o helper.Content, retornano um string.

A Listagem 4 ilustra a criação de helpers para arquivos.

 
public static class FileHelper
{
    public static string Image(this UrlHelper helper, string fileName)
    {
        return helper.Content("~/Content/Images/" + fileName);
    }
 
    public static string Stylesheet(this UrlHelper helper, string fileName)
    {
        return helper.Content("~/Content/" + fileName);
    }
 
    public static string NoImage(this UrlHelper helper)
    {
        return Image(helper, "noimage.jpg");
    }
}

Listagem 4 - Extension Method para arquivos.

No primeiro método, criamos um helper para inclusão de imagens na View, e através do helper.Content retornaremos uma string com o caminho da imagem.

No método seguinte, da mesma forma, criamos um helper para inclusão de arquivos CSS na View e por fim, criamos um método que não requer nenhuma infomação e tem a função de exibir uma imagem padrão "No Image" (Sem imagem), para os casos onde o usuário ainda não tem uma imagem definida, por exemplo.

As Figuras 4 e 5 mostram a utilização destes helpers na View.

Figura 4 - Utilizando o helper de arquivos.

Figura 4 - Utilizando o helper de arquivos.
Figura 5 - Utilizando o helper de arquivos.

Conclusão

Podemos ver o qual flexivel o ASP.NET MVC é perante a extensão de suas classes. Vimos também que os helpers facilitam a utilização de controles comuns na View, ajudam na diminuição de erros e podem ser testados.

Importante ressaltar também que existem boas práticas sobre o framework, e elas deve ser seguidas.

Até o próximo artigo.

Desenvolvimento - ASP. NET