ASP.NET MVC - Criando um HtmlHelper personalizado, CheckBoxList

O ASP.NET MVC dá ao desenvolvedor todo o controle sobre o código HTML que será gerado. De uma forma geral, programar em HTML puro é bem improdutivo. Para  facilitar o desenvolvimento , foram criados os HtmlHelpers, métodos que encapsulam a lógica de como as tags são criadas e facilitam a vida do programador. Neste breve artigo vou mostrar como fazer um HtmlHelper personalizado, mais precisamente um CheckBoxList. É necessário Visual Studio 2010/2012 com o template do ASP.NET MVC Project instalado.

Criando a estrutura do Projeto

No Visual Studio, para um novo projeto:

1. File->New Project-> Templates->Installed Templates->Visual C#->ASP.NET MVC 4 Web Application
2. Na janela selecione o projeto que desejar.

Caso já tenha um projeto MVC;

1. Adicione uma nova classe CheckBoxListHelper que irá encapsular nosso Helper . (Eu criei um diretório Helpers dentro da raiz do projeto para colocar todos os Helpers. Nada impede que você coloque esses Helpers em um projeto separado para utilizar em outro lugares).

2. Adicione as seguintes referências ao arquivo:

Criando o CheckBoxListHelper

Se você já programou em ASP.NET MVC, já deve ter criado um DropDownList. Para isso deve ter usado SelectList e SelectListItem. Seguindo a mesma lógica, vou criar um CheckBoxItem e CheckBoxList que serão usados para gerar o HTML.

Helpers/CheckBoxListHelper.cs

Helpers/CheckBoxListHelper.cs

Agora é só começar o "hardcoding" :). Um HtmlHelper nada mais é que um Extension Method da classe HtmlHelper. Logo, deve ser criada uma classe static, e o método static deve receber como parametro "this HtmlHelper htmlHelper".

Helpers/CheckBoxListHelper.cs

Veja que passo como parâmetro a legenda, que será exibida no topo do fieldset, o CheckBoxList e os objetos htmlAttributes, para o desenvolvedor personalizar as tags geradas. 

A classe TagBuilder é usada para construir uma tag HTML qualquer, bastando apenas passar o seu nome para o construtor. Ela oferece várias comodidades, como por exemplo, poder setar o InnerHtml e gerenciar os atributos HTML.

Helpers/CheckBoxListHelper.cs

O código é bem simples, uso um fieldset, seto a legenda vindo do parametro e construo uma ul com a lista ChekBoxList. Usei o próprio helper CheckBox para gerar o campo. Perceba que eu concateno coisas. Isso mesmo!!! O que é gerado nada mais é que String, mais especificamente MvcHtmlString.

Usando o Helper

É cômodo adicionar a referência no Web.config. Dessa forma não é necessário importa o namespace em todas as Views que você criar.

Views/Web.config

Agora basta utilizar o Helper:

O resultado gerado por esse Helper é esse:

Html

Espero que tenham gostado do artigo. O código de exemplo pode ser baixado aqui.