ASP.NET MVC: Como utilizar HTML Helpers

Motivação

A utilização dos chamados HTML Helpers, ou simplesmente Helpers, é uma das grandes vantagens que o ASP.NET MVC oferece para os desenvolvedores. Em conjunto com o motor de views do framework, o Razor, é possível utilizar esses auxiliadores para evitar ao máximo a escrita de código HTML puro. Assim, fica mais simples definir, de forma mais organizada, links, campos de entrada de dados (input fields), entre outros. Além disso, é possível criar nossos próprios helpers, para algum comportamento específico que desejemos dentro da aplicação.

O que é o Razor?

Para entendermos melhor como utilizar HTML Helpers, é preciso compreender o funcionamento de seu motor de views, o Razor. Esse elemento é muito importante para tudo o que fazemos com as views dentro do MVC, uma vez que é responsável por permitir a existência de código C# misturado ao HTML nessas views. Esse código C#, então, será transformado em tempo de execução nas informações necessárias para que a página seja renderizada para o usuário.

A utilização do Razor é muito simples. Podemos observar isso na Listagem 1. Note que temos algumas linhas de código e todas elas começam com o elemento “@” (arroba). Esse é o indicador do início do trecho de código Razor, que é C#, simplesmente. Nessa listagem também temos alguns HTML Helpers, que serão explicados posteriormente.

• Linha 1: Abertura da <div> externa;
• Linha 2: A linha inteira é composta por uma expressão Razor: C#, basicamente. Como podemos notar, estamos chamando um método estático com alguns parâmetros;
• Linha 3: Trecho de código C# inserido em meio a um elemento <a>. Esse código chama um método estático dentro da view e o resultado dele é passado automaticamente para o atributo href do elemento <a>. Esse tipo de ação é muito útil dentro do Razor para utilização de trechos de código que podem ser diferentes em tempo de execução, com o uso de variáveis como “item.Id”, por exemplo;
• Linha 4: Código HTML em conjunto com um pequeno trecho de código Razor. Como o “item.Id” é dinâmico, ou seja, pode ter vários valores dependendo do “item” que foi passado para a view, declaramos uma expressão Razor para garantir esse comportamento;
• Linha 5: fechamento da <div> externa.

E os HTML Helpers?

Para explicar os HTML Helpers, vamos começar pelo seu conceito. Um Helper, no MVC, é um método que pode ser utilizado na view para renderizar algum elemento HTML ou um comportamento desejável nessa view. O código da Listagem 1 pode ser tomado como exemplo para explicar esse conceito, uma vez que fizemos uso de dois helpers nele: Url.Action() e Html.ActionLink(). Aqui, é válido ressaltar que o código nas linhas 02, 03 e 04 tem o mesmo resultado: links para a página de edição do produto, passando o Id desse como parâmetro.

Vejamos o que os métodos Url.Action() e Html.ActionLink() fazem:

• A linha 2 traz o helper “Html.ActionLink”. Como o nome sugere, ele irá renderizar um elemento <a>, isto é, um link, na view. Os parâmetros passados são o texto do link (“Editar”), o action method do mesmo (“Edit”), o nome do controller (“Product”) e os atributos HTML; neste caso, um objeto contendo o Id do item;
• A linha 3 traz o helper “Url.Action”. Esse método não tem uma ação tão clara como o primeiro: ele irá simplesmente gerar o texto do link para um action method qualquer, de acordo com os parâmetros. Note que os parâmetros são os mesmos que foram passados na linha 2, com exceção do texto do link.

O resultado do código dessa listagem pode ser observado na Figura 1. Note que temos os três links “Editar” em sequência, conforme definido no código.

Neste momento é válido citar algumas considerações a respeito do código da Listagem 1, afinal, é a partir dele que conseguimos entender as diferenças entre usar ou não HTML Helpers. A grande vantagem da abordagem mostrada na linha 02 está na escrita do método, muito mais simples do que simplesmente utilizar HTML em conjunto com o Razor, que gera, muitas vezes, um código mais confuso. Em alguns casos, a abordagem da linha 03 pode ser interessante, especialmente se tivermos várias classes CSS no elemento <a> para customizá-lo visualmente. Embora seja possível passar essas classes para o helper ActionLink(), isso pode gerar um código de difícil leitura e, portanto, manutenção.

Outros helpers úteis do MVC

O ASP.NET MVC possui inúmeros HTML Helpers que podem servir a determinados propósitos durante o desenvolvimento. A seguir, apresentaremos os principais deles:

• Html.DisplayFor(model => model.Property): Esse método simplesmente mostra o valor da propriedade “Property” do Model da view. Isso é particularmente útil no ASP.NET MVC para views fortemente tipadas, ou seja, que recebem um objeto e mostram seus dados na tela, como uma página de detalhes do produto. Esse método utiliza uma expressão lambda para obter o nome da propriedade, mas também possui uma variação que recebe um parâmetro string (Html.Display()), como podemos observar no código a seguir:
  @Html.DisplayFor(model => model.Name) @Html.Display("Name")
• Html.EditorFor(model => model.Property): Esse helper possui uma estrutura parecida com a do DisplayFor() e, do mesmo modo, também tem um método similar que não usa expressões lambda (Html.Editor()). Entretanto, ao invés de mostrar o valor, ele cria um editor para esse valor, isto é, um input field, levando em consideração o tipo de dado da propriedade, além do valor da mesma. Aprimorando essa opção, existem alguns editores de tipos específicos que podem ser utilizados por meio de helpers, como o Html.TextBoxFor() e Html.DropDownListFor() ou suas variações sem expressões lambda: Html.TextBox() e Html.DropDownList().
  Html.EditorFor(model => model.Name) @Html.Editor("Name")
  NOTA: A utilização das variações dos helpers que utilizam expressões lambda, como Html.DisplayFor() e Html.EditorFor(), é interessante porque garante que qualquer erro de digitação do código, por exemplo, seja identificado pelo próprio Visual Studio, diminuindo as possibilidades de views quebradas para o usuário.
• Html.BeginForm(): Como o nome sugere, esse helper é utilizado para iniciar um formulário dentro de uma view no MVC. Ele funciona como um substituto ao elemento <form>. Com esse helper é possível escolher se queremos fazer um POST ou um GETao servidor, por meio da enumeração “FormMethod”. Ademais, ele é utilizado em conjunto com um “using” para determinar os limites do <form>. Em outras palavras, o formulário será composto por tudo que estiver dentro da diretiva "using". Um exemplo desse helper é apresentado abaixo:
  @using (Html.BeginForm("Login", "Account", FormMethod.Post))
  NOTA: O MVC também disponibiliza o helper Ajax.BeginForm(), que traz elementos interessantes para a criação de formulários assíncronos com AJAX.

Enfim, os Helper Methods representam um importante recurso para o dia-a-dia do desenvolvedor ASP.NET MVC. Devido àquantidade de opções, assim como a possibilidade de criação de helpers, sabercomo explorá-los pode ser um diferencial para o seu projeto.