Crear asistentes de HTML personalizados (VB)

por Microsoft

Descargar PDF

El objetivo de este tutorial es demostrar cómo puede crear aplicaciones auxiliares HTML personalizadas que puede usar dentro de las vistas MVC. Aprovechando las aplicaciones auxiliares HTML, puede reducir la cantidad de tediosa escritura de etiquetas HTML que debe realizar para crear una página HTML estándar.

El objetivo de este tutorial es demostrar cómo puede crear aplicaciones auxiliares HTML personalizadas que puede usar dentro de las vistas MVC. Aprovechando las aplicaciones auxiliares HTML, puede reducir la cantidad de tediosa escritura de etiquetas HTML que debe realizar para crear una página HTML estándar.

En la primera parte de este tutorial, describo algunas de las aplicaciones auxiliares HTML existentes incluidas con el marco de ASP.NET MVC. A continuación, describo dos métodos de creación de aplicaciones auxiliares HTML personalizadas: explico cómo crear aplicaciones auxiliares HTML personalizadas mediante la creación de un método compartido y mediante la creación de un método de extensión.

Comprender los ayudantes HTML

Una aplicación auxiliar HTML es solo un método que devuelve una cadena. La cadena puede representar cualquier tipo de contenido que desee. Por ejemplo, puede utilizar aplicaciones auxiliares HTML <input> para <img> representar etiquetas HTML estándar como HTML y etiquetas. También puede usar aplicaciones auxiliares HTML para representar contenido más complejo, como una franja de pestañas o una tabla HTML de datos de base de datos.

El marco de ASP.NET MVC incluye el siguiente conjunto de aplicaciones auxiliares HTML estándar (esto no es una 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 ejemplo, considere el formulario en el listado 1. Este formulario se representa con la ayuda de dos de las aplicaciones auxiliares HTML estándar (consulte la figura 1). Este formulario Html.BeginForm() utiliza Html.TextBox() los métodos y Helper.

Página renderizada con aplicaciones auxiliares HTML

Figura 01: Página representada con aplicaciones auxiliares HTML(Haga clic para ver la imagen de tamaño completo)

Listado 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>

El Html.BeginForm() método auxiliar se utiliza para <form> crear las etiquetas HTML de apertura y cierre. Observe que Html.BeginForm() se llama al método dentro de una instrucción using. La instrucción using <form> garantiza que la etiqueta se cierra al final del bloque using.

Si lo prefiere, en lugar de crear un bloque using, puede llamar <form> al método auxiliar Html.EndForm() para cerrar la etiqueta. Utilice cualquier enfoque para crear <form> una etiqueta de apertura y cierre que le parezca más intuitiva.

Los Html.TextBox() métodos auxiliares se utilizan <input> en el listado 1 para representar etiquetas HTML. Si selecciona ver origen en su navegador, verá el origen HTML en el listado 2. Observe que el origen contiene etiquetas HTML estándar.

Important

observe que Html.TextBox()la aplicación auxiliar <%= %> -HTML <% %> se representa con etiquetas en lugar de etiquetas. Si no incluye el signo igual, no se representa nada en el explorador.

El marco de ASP.NET MVC contiene un pequeño conjunto de aplicaciones auxiliares. Lo más probable es que necesite ampliar el marco MVC con aplicaciones auxiliares HTML personalizadas. En el resto de este tutorial, aprenderá dos métodos para crear aplicaciones auxiliares HTML personalizadas.

Listado 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>

Creación de aplicaciones auxiliares HTML con métodos compartidos

La forma más fácil de crear una nueva aplicación auxiliar HTML es crear un método compartido que devuelva una cadena. Imagine, por ejemplo, que decide crear una nueva aplicación <label> auxiliar HTML que represente una etiqueta HTML. Puede utilizar la clase del listado <label>2 para representar un archivo .

Listado 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

No hay nada especial en la clase en el listado 2. El Label() método simplemente devuelve una cadena.

La vista de índice modificada LabelHelper en <label> el listado 3 utiliza la para representar etiquetas HTML. Observe que la <%@ imports %> vista incluye una directiva que importa el espacio de nombres Application1.Helpers.

Listado 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>

Creación de aplicaciones auxiliares HTML con métodos de extensión

Si desea crear aplicaciones auxiliares HTML que funcionan igual que las aplicaciones auxiliares HTML estándar incluidas en el marco de ASP.NET MVC, debe crear métodos de extensión. Los métodos de extensión permiten agregar nuevos métodos a una clase existente. Al crear un método auxiliar HTML, HtmlHelper agregue nuevos métodos a la clase representada por la propiedad Html de una vista.

El módulo de Visual Basic en el Label() listado HtmlHelper 3 agrega un método de extensión denominado a la clase. Hay un par de cosas que usted debe notar acerca de este módulo. En primer lugar, observe que <Extension()> el módulo está decorado con el atributo. Para utilizar este atributo, debe System.Runtime.CompilerServices importar el espacio de nombres

En segundo lugar, observe Label() que el HtmlHelper primer parámetro del método representa la clase. El primer parámetro de un método de extensión indica la clase que extiende el método de extensión.

Listado 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

Después de crear un método de extensión y compilar la aplicación correctamente, el método de extensión aparece en Visual Studio Intellisense como todos los demás métodos de una clase (consulte la figura 2). La única diferencia es que los métodos de extensión aparecen con un símbolo especial junto a ellos (un icono de una flecha hacia abajo).

Uso del método de extensión Html.Label()

Figura 02: Uso del método de extensión Html.Label() ( Haga clic para ver laimagen de tamaño completo)

La vista index modificada en el listado 4 utiliza el método <> de extensión Html.Label() para representar todas sus etiquetas de etiqueta.

Listado 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>

Resumen

En este tutorial, aprendió dos métodos para crear aplicaciones auxiliares HTML personalizadas. En primer lugar, aprendió Label() a crear una aplicación auxiliar HTML personalizada mediante la creación de un método compartido que devuelve una cadena. A continuación, aprendió a Label() crear un método auxiliar HTML HtmlHelper personalizado mediante la creación de un método de extensión en la clase.

En este tutorial, me centré en la creación de un método de aplicación auxiliar HTML extremadamente simple. Tenga en cuenta que una aplicación auxiliar HTML puede ser tan complicada como desee. Puede crear aplicaciones auxiliares HTML que representen contenido enriquecido, como vistas de árbol, menús o tablas de datos de base de datos.