Criação de auxiliares de HTML personalizados (VB)
pela Microsoft
O objetivo deste tutorial é demonstrar como você pode criar auxiliares HTML personalizados que você pode usar em seus modos de exibição 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 você pode usar em seus modos de exibição 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 compartilhado e criando um método de extensão.
Noções básicas sobre auxiliares HTML
Um Auxiliar de 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 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). Este formulário usa os Html.BeginForm() métodos Auxiliar e Html.TextBox() .
Figura 01: página renderizada com auxiliares HTML (clique para exibir a imagem em tamanho real)
Listagem 1 – Views\Home\Index.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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 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" />
<% End Using %>
</div>
</body>
</html>
O Html.BeginForm() método Auxiliar é 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 using.
Se preferir, em vez de criar um bloco using, você poderá 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 fonte 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 ASP.NET MVC 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="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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 compartilhados
A maneira mais fácil de criar um novo Auxiliar HTML é criar um método compartilhado que retorna uma cadeia de caracteres. Imagine, por exemplo, que você decida criar um novo Auxiliar HTML que renderiza uma marca HTML <label> . Você pode usar a classe na Listagem 2 para renderizar um <label>.
Listagem 2 – Helpers\LabelHelper.vb
Public Class LabelHelper
Public Shared Function Label(ByVal target As String, ByVal text As String) As String
Return String.Format("<label for='{0}'>{1}</label>", target, text)
End Function
End Class
Não há nada de especial na classe na Listagem 2. O Label() método simplesmente retorna uma cadeia de caracteres.
A exibição índice modificada na Listagem 3 usa o LabelHelper para renderizar marcas HTML <label> . Observe que a exibição inclui uma <%@ imports %> diretiva que importa o namespace Application1.Helpers.
Listagem 2 – Views\Home\Index2.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index2.aspx.vb" Inherits="MvcApplication1.Index2"%>
<%@ Import Namespace="MvcApplication1" %>
<!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" />
<% End Using %>
</div>
</body>
</html>
Criando auxiliares HTML com métodos de extensão
Se você quiser criar auxiliares HTML que funcionam exatamente como os Auxiliares HTML padrão incluídos na estrutura 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 à HtmlHelper classe representada pela propriedade Html de uma exibição.
O módulo do Visual Basic na Listagem 3 adiciona um método de extensão chamado Label() à HtmlHelper classe . Há algumas coisas que você deve observar sobre este módulo. Primeiro, observe que o módulo é decorado com o <Extension()> atributo . Para usar esse atributo, você deve importar o System.Runtime.CompilerServices namespace
Em segundo lugar, observe que o primeiro parâmetro do Label() método representa a HtmlHelper classe . 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.vb
Imports System.Runtime.CompilerServices
Public Module LabelExtensions
<Extension()> _
Public Function Label(ByVal helper As HtmlHelper, ByVal target As String, ByVal text As String) As String
Return String.Format("<label for='{0}'> {1}</label>", target, text)
End Function
End Module
Depois de criar um método de extensão e compilar seu aplicativo com êxito, o método de extensão será exibido 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).
Figura 02: Usando o método de extensão Html.Label() (Clique para exibir a imagem em tamanho real)
A exibição Index modificada na Listagem 4 usa o método de extensão Html.Label() para renderizar todas as marcas <de rótulo> .
Listagem 4 – Views\Home\Index3.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index3.aspx.vb" Inherits="MvcApplication1.Index3" %>
<%@ Import Namespace="MvcApplication1" %>
<!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" />
<% End Using%>
</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 compartilhado 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 o mais complicado que 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.