.NET

15 abr, 2016

ASP .NET MVC 5 – Criando HTML Helpers customizados – Parte 01

Publicidade

O que são os HTML Helpers? De forma bem simples e direta, um HTML Helper é apenas um método que retorna uma string.

Sendo mais detalhista, podemos dizer que os HTML Helpers são métodos de extensão da classe HTMLHelper que são utilizados com a view Razor engine (é também possível usar a view ASPX) para facilitar a vida do desenvolvedor de forma a minimizar a quantidade de declarações HTML que são necessárias definir nas páginas web.

Usando os HTML Helpers podemos exibir elementos como HTML como <form>, <input>, <textbox>, <label>, <select> etc. nas páginas web.

O Framework ASP .NET MVC inclui o seguinte conjunto de HTML Helpers padrão (apenas os principais):

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

Embora exista uma grande quantidade de HTML Helpers disponíveis, podemos precisar de algo diferente e neste caso teremos que criar o nosso próprio HTML customizado.

A forma mais simples de criar um novo HTML Helper é criar um método estático que retorna uma string. Vamos supor que você precisa criar uma novo HTML Helper que renderiza uma tag HTML <label>. Então, abra o Visual Studio 2013 Express for web e crie um novo projeto ASP .NET MVC usando o template Empty com o nome Mvc_CriandoHTML_Helpers.

mvc_chlp11

mvc_chlp12

A seguir, crie uma nova pasta no projeto chamada MeusHtmlHelpers selecionando o projeto e clicando no menu PROJECT -> New Folder.

A seguir, selecione a pasta e no menu PROJECT clique em Add Class e informe o nome MinhaLabelHelper. Nesta classe, defina o método estático Label no código abaixo nesta classe:

using System;
namespace Mvc_CriandoHTML_Helpers.MeusHTMLHelpers
{
    public class MinhaLabelHelper
    {
        public static string Label(string destino, string texto)
        {
            return String.Format("<label for='{0}'>{1}</label>", destino, texto);
        }
    }
}

Olhando o código desta classe, vemos que o método estático Label() recebe duas strings e retorna apenas uma.

Agora crie um controlador na pasta Controllers com o nome HomeController usando o Scaffold MVC 5 Empty.

mvc_chlp13png

Para testar o nosso Helper, vamos criar a view Index clicando no método Action Index() e, a seguir, em Add -> View.

mvc_chlp14

Digite o código abaixo nesta view:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h2>Usando o Helper MinhaLabelHelper</h2>
    <div>
        @using (Html.BeginForm())
        {
            @MinhaLabelHelper.Label("Nome", "Nome Completo:")
            <br />
            @Html.TextBox("Nome")
            <br />
            @MinhaLabelHelper.Label("Email", "Endereço de Email:")
            <br />
            @Html.TextBox("Email")
            <br />
            <input type="submit" value="Registrar" />
        }
    </div>
</body>
</html>

E aí está o nosso Helper sendo usado na view Index().

Criando Helpers HTML com métodos de extensão

Se você deseja criar HTML Helpers que funcionam exatamente como os Helpers HTML padrões incluídos no ASP.NET MVC, então você precisa criar métodos de extensão.

Os métodos de extensão permitem que você inclua novos métodos a uma classe existente. Ao criar um método HTML Helper, você adiciona novos métodos na classe HtmlHelper representada pela propriedade Html da view.

Então, vamos incluir uma nova classe na pasta MeusHtmlHelpers chamada MinhaNovaLabel e definir nela o método Label_Macoratti com o seguinte código:

using System;
using System.Web.Mvc;
namespace Mvc_CriandoHTML_Helpers.MeusHTMLHelpers
{
    public static class MinhaNovaLabel
    {
        public static MvcHtmlString Label_Macoratti(this HtmlHelper helper, string destino, string texto)
        {
            return MvcHtmlString.Create(string.Format("<label for='{0}'>{1}</label>", destino, texto));
        }
    }
}

No código da classe temos o método de extensão para a classe HtmlHelper chamado Label_Macoratti.

Note que a classe e o método são estáticos pois é assim que deve ser definido um método de extensão. Note também que o primeiro parâmetro do métodoLabel_Macoratti() indica a classe da qual o método de extensão estende e ele é precedido da palavra this.

O retorno também é do tipo MvcHtmlString, onde a classe MvcHtmlString representa uma sequência de caracteres HTML codificados que não deve ser codificado novamente.

Agora vamos usar o nosso Helper: abra o arquivo Index.cshtml e perceba que, ao digitar @Html.Label, você visualizará o seu Helper na lista do Intellisense do Visual Studio:

mvc_chlp15

Executando o projeto iremos obter o seguinte resultado:

mvc_chlp16

Vemos a view renderizando o nosso Helper e ao lado o código HTML gerado.

Na segunda parte do artigo vou criar um Helper customizado para renderizar uma imagem Gravatar.

Pegue o projeto completo aqui: Mvc_CriandoHTML_Helpers.zip.