Criação de auxiliares de HTML personalizados (C#)

  • Artigo

pela Microsoft

Baixar PDF

O objetivo deste tutorial é demonstrar como você pode criar auxiliares HTML personalizados que podem ser usados nas exibições do MVC. Aproveitando os Auxiliares HTML, você pode reduzir a quantidade de digitação tediosa de marcas HTML que você deve executar para criar uma página HTML padrão.

O objetivo deste tutorial é demonstrar como você pode criar auxiliares HTML personalizados que podem ser usados nas exibições do MVC. Aproveitando os Auxiliares HTML, você pode reduzir a quantidade de digitação tediosa de marcas HTML que você deve executar para criar uma página HTML padrão.

Na primeira parte deste tutorial, descrevo alguns dos Auxiliares HTML existentes incluídos na estrutura ASP.NET MVC. Em seguida, descrevo dois métodos de criação de auxiliares HTML personalizados: explico como criar auxiliares HTML personalizados criando um método estático e criando um método de extensão.

Noções básicas sobre auxiliares HTML

Um Auxiliar html é apenas um método que retorna uma cadeia de caracteres. A cadeia de caracteres pode representar qualquer tipo de conteúdo desejado. Por exemplo, você pode usar auxiliares HTML para renderizar marcas HTML padrão, como HTML <input> e <img> marcas. Você também pode usar auxiliares HTML para renderizar conteúdo mais complexo, como uma faixa de guias ou uma tabela HTML de dados de banco de dados.

A estrutura do ASP.NET MVC inclui o seguinte conjunto de Auxiliares HTML padrão (esta não é uma lista completa):

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

Por exemplo, considere o formulário na Listagem 1. Esse formulário é renderizado com a ajuda de dois dos Auxiliares HTML padrão (consulte a Figura 1). Esse formulário usa os Html.BeginForm() métodos auxiliares e Html.TextBox() para renderizar um formulário HTML simples.

Página renderizada com auxiliares HTML

Figura 01: página renderizada com auxiliares HTML (clique para exibir imagem em tamanho real)

Listagem 1 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns= "http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
     <title>Index</title>
</head>
<body>
      <div>
          <% using (Html.BeginForm())
          { %>

               <label for="firstName">First Name:</label>
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />

               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />    
          <% } %>
     1     </div>
</body>
</html>

O método Auxiliar Html.BeginForm() é usado para criar as marcas HTML <form> de abertura e fechamento. Observe que o Html.BeginForm() método é chamado dentro de uma instrução using. A instrução using garante que a <form> marca seja fechada no final do bloco de uso.

Se preferir, em vez de criar um bloco usando, você pode chamar o método Auxiliar Html.EndForm() para fechar a <form> marca. Use qualquer abordagem para criar uma marca de abertura e fechamento <form> que pareça mais intuitiva para você.

Os Html.TextBox() métodos auxiliares são usados na Listagem 1 para renderizar marcas HTML <input> . Se você selecionar exibir a origem no navegador, verá a origem HTML na Listagem 2. Observe que a origem contém marcas HTML padrão.

Importante

observe que o Html.TextBox()Auxiliar -HTML é renderizado com <%= %> marcas em vez de <% %> marcas. Se você não incluir o sinal de igual, nada será renderizado no navegador.

A estrutura MVC ASP.NET contém um pequeno conjunto de auxiliares. Provavelmente, você precisará estender a estrutura MVC com auxiliares HTML personalizados. No restante deste tutorial, você aprenderá dois métodos de criação de auxiliares HTML personalizados.

Listagem 2 – Index.aspx Source

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <title>Index</title>
</head>
<body>
     <div>
          <form action="http://localhost:33102/" method="post">
               <label for="firstName">First Name:</label>

               <br />
               <input id="firstName" name="firstName" type="text" value="" />
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />
               <input id="lastName" name="lastName" type="text" value="" />
               <br /><br />

               <input id="btnRegister" name="btnRegister" type="submit" value="Register" />
          </form>
     </div>
</body>
</html>

Criando auxiliares HTML com métodos estáticos

A maneira mais fácil de criar um novo Auxiliar HTML é criar um método estático que retorna uma cadeia de caracteres. Imagine, por exemplo, que você decida criar um novo Auxiliar HTML que renderize uma marca HTML <label> . Você pode usar a classe na Listagem 2 para renderizar um <label> .

Listagem 2 – Helpers\LabelHelper.cs

using System;
namespace MvcApplication1.Helpers
{
    public class LabelHelper
    {
        public static string Label(string target, string text)
        {
            return String.Format("<label for='{0}'>{1}</label>", target, text);
        }
    }
}

Não há nada de especial na classe na Listagem 2. O Label() método simplesmente retorna uma cadeia de caracteres.

O modo de exibição índice modificado na Listagem 3 usa o LabelHelper para renderizar marcas HTML <label> . Observe que a exibição inclui uma <%@ imports %> diretiva que importa o Application1.Helpers namespace.

Listagem 2 – Views\Home\Index2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">

     <title>Index2</title>
</head>
<body>
     <div>
          <% using (Html.BeginForm())
          { %>
               <%= LabelHelper.Label("firstName", "First Name:") %>
               <br />

               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= LabelHelper.Label("lastName", "Last Name:") %>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />
          <% } %>

     </div>
</body>
</html>

Criando auxiliares HTML com métodos de extensão

Se você quiser criar auxiliares HTML que funcionam da mesma forma que os Auxiliares HTML padrão incluídos na estrutura do ASP.NET MVC, será necessário criar métodos de extensão. Os métodos de extensão permitem que você adicione novos métodos a uma classe existente. Ao criar um método auxiliar HTML, você adiciona novos métodos à classe HtmlHelper representada pela propriedade Html de uma exibição.

A classe na Listagem 3 adiciona um método de extensão à HtmlHelper classe chamada Label(). Há algumas coisas que você deve observar sobre essa classe. Primeiro, observe que a classe é uma classe estática. Você deve definir um método de extensão com uma classe estática.

Em segundo lugar, observe que o primeiro parâmetro do Label() método é precedido pelo palavra-chave this. O primeiro parâmetro de um método de extensão indica a classe que o método de extensão estende.

Listagem 3 – Helpers\LabelExtensions.cs

using System;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
     public static class LabelExtensions
     {
          public static string Label(this IHtmlHelper helper, string target, string text)
          {
               return String.Format("<label for='{0}'>{1}</label>", target, text);
          }
     }
}

Depois que você cria um método de extensão e cria seu aplicativo com êxito, o método de extensão aparece no Intellisense do Visual Studio como todos os outros métodos de uma classe (consulte a Figura 2). A única diferença é que os métodos de extensão aparecem com um símbolo especial ao lado deles (um ícone de uma seta para baixo).

Usando o método de extensão Html.Label()

Figura 02: usando o método de extensão Html.Label() (Clique para exibir a imagem em tamanho real)

A exibição índice modificada na Listagem 4 usa o método de extensão Html.Label() para renderizar todas as suas <label> marcas.

Listagem 4 – Views\Home\Index3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>

<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title>Index3</title>
</head>
<body>
     <div>

          <% using (Html.BeginForm())
          { %>
               <%= Html.Label("firstName", "First Name:") %>    
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= Html.Label("lastName", "Last Name:") %>    
               <br />
               <%= Html.TextBox("lastName")%>

               <br /><br />
               <input type="submit" value="Register" />
          <% } %>
     </div>
</body>
</html>

Resumo

Neste tutorial, você aprendeu dois métodos de criação de auxiliares HTML personalizados. Primeiro, você aprendeu a criar um auxiliar HTML personalizado Label() criando um método estático que retorna uma cadeia de caracteres. Em seguida, você aprendeu a criar um método auxiliar HTML personalizado Label() criando um método de extensão na HtmlHelper classe .

Neste tutorial, me concentrei na criação de um método auxiliar HTML extremamente simples. Observe que um Auxiliar de HTML pode ser tão complicado quanto você quiser. Você pode criar auxiliares HTML que renderizam conteúdo avançado, como exibições de árvore, menus ou tabelas de dados de banco de dados.

AnteriorAvançar