Condividi tramite

Creazione di helper HTML personalizzati (VB)

da Microsoft

Scarica il PDF

L'obiettivo di questa esercitazione è illustrare come creare helper HTML personalizzati che è possibile usare nelle visualizzazioni MVC. Sfruttando i vantaggi degli helper HTML, è possibile ridurre la quantità di digitazione noiosa di tag HTML che è necessario eseguire per creare una pagina HTML standard.

L'obiettivo di questa esercitazione è illustrare come creare helper HTML personalizzati che è possibile usare nelle visualizzazioni MVC. Sfruttando i vantaggi degli helper HTML, è possibile ridurre la quantità di digitazione noiosa di tag HTML che è necessario eseguire per creare una pagina HTML standard.

Nella prima parte di questa esercitazione vengono descritti alcuni degli helper HTML esistenti inclusi nel framework ASP.NET MVC. Successivamente, descrivo due metodi per creare helper HTML personalizzati: spiegano come creare helper HTML personalizzati creando un metodo condiviso e creando un metodo di estensione.

Informazioni sugli helper HTML

Un helper HTML è solo un metodo che restituisce una stringa. La stringa può rappresentare qualsiasi tipo di contenuto desiderato. Ad esempio, è possibile usare helper HTML per eseguire il rendering di tag HTML standard come HTML <input> e <img> tag. È anche possibile usare helper HTML per eseguire il rendering di contenuti più complessi, ad esempio una striscia di schede o una tabella HTML dei dati del database.

Il framework ASP.NET MVC include il set seguente di helper HTML standard (non è un elenco completo):

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

Ad esempio, prendere in considerazione il modulo nell'elenco 1. Questo modulo viene eseguito con l'aiuto di due helper HTML standard (vedere la figura 1). Questo modulo usa i Html.BeginForm() metodi helper e Html.TextBox() .

Pagina sottoposta a rendering con helper HTML

Figura 01: Pagina di cui è stato eseguito il rendering con helper HTML (Fare clic per visualizzare l'immagine a dimensioni complete)

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

Il Html.BeginForm() metodo Helper viene usato per creare i tag HTML <form> di apertura e chiusura. Si noti che il Html.BeginForm() metodo viene chiamato all'interno di un'istruzione using. L'istruzione using garantisce che il <form> tag venga chiuso alla fine del blocco using.

Se si preferisce, anziché creare un blocco usando, è possibile chiamare il metodo Helper Html.EndForm() per chiudere il <form> tag. Usare qualsiasi approccio per creare un tag di apertura e chiusura <form> che sembra più intuitivo per te.

I metodi helper vengono usati nell'elenco Html.TextBox() 1 per eseguire il rendering dei tag HTML <input> . Se si seleziona l'origine di visualizzazione nel browser, viene visualizzata l'origine HTML nell'elenco 2. Si noti che l'origine contiene tag HTML standard.

Importante

si noti che l'helper -HTML viene eseguito il Html.TextBox()rendering con <%= %> tag anziché <% %> tag. Se non si include il segno di uguale, non viene eseguito il rendering del rendering nel browser.

Il framework ASP.NET MVC contiene un piccolo set di helper. È più probabile che sia necessario estendere il framework MVC con helper HTML personalizzati. Nella parte restante di questa esercitazione si apprenderà due metodi per la creazione di helper HTML personalizzati.

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

Creazione di helper HTML con metodi condivisi

Il modo più semplice per creare un nuovo helper HTML consiste nel creare un metodo condiviso che restituisce una stringa. Si supponga, ad esempio, di decidere di creare un nuovo helper HTML che esegue il rendering di un tag HTML <label> . È possibile usare la classe in List 2 per eseguire il rendering di un <label>oggetto .

Presentazione 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

Non c'è nulla di speciale sulla classe in Listato 2. Il Label() metodo restituisce semplicemente una stringa.

La visualizzazione indice modificata nell'elenco 3 usa l'oggetto per eseguire il LabelHelper rendering dei tag HTML <label> . Si noti che la vista include una <%@ imports %> direttiva che importa lo spazio dei nomi Application1.Helpers.

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

Creazione di helper HTML con metodi di estensione

Se si desidera creare helper HTML che funzionano esattamente come gli helper HTML standard inclusi nel framework ASP.NET MVC, è necessario creare metodi di estensione. I metodi di estensione consentono di aggiungere nuovi metodi a una classe esistente. Quando si crea un metodo Helper HTML, si aggiungono nuovi metodi alla HtmlHelper classe rappresentata dalla proprietà Html di una vista.

Il modulo Visual Basic in List 3 aggiunge un metodo di estensione denominato Label() alla HtmlHelper classe. Esistono alcune cose che si dovrebbero notare su questo modulo. Prima di tutto, si noti che il modulo è decorato con l'attributo <Extension()> . Per usare questo attributo, è necessario importare lo System.Runtime.CompilerServices spazio dei nomi

In secondo luogo, si noti che il primo parametro del Label() metodo rappresenta la HtmlHelper classe. Il primo parametro di un metodo di estensione indica la classe estesa dal metodo di estensione.

Elenco 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

Dopo aver creato un metodo di estensione e compilare correttamente l'applicazione, il metodo di estensione viene visualizzato in Visual Studio Intellisense come tutti gli altri metodi di una classe (vedere la figura 2). L'unica differenza è che i metodi di estensione vengono visualizzati con un simbolo speciale accanto a loro (un'icona di una freccia verso il basso).

Uso del metodo di estensione Html.Label()

Figura 02: Uso del metodo di estensione Html.Label() (Fare clic per visualizzare l'immagine full-size)

La visualizzazione Indice modificata in List 4 usa il metodo di estensione Html.Label() per eseguire il rendering di <tutti i tag di etichetta> .

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

Riepilogo

In questa esercitazione sono stati illustrati due metodi per la creazione di helper HTML personalizzati. Prima di tutto, si è appreso come creare un helper HTML personalizzato Label() creando un metodo condiviso che restituisce una stringa. Successivamente, si è appreso come creare un metodo helper HTML personalizzato Label() creando un metodo di estensione nella HtmlHelper classe.

In questa esercitazione ho incentrato sulla creazione di un metodo helper HTML estremamente semplice. Tenere presente che un helper HTML può essere complicato come si vuole. È possibile creare helper HTML che eseguono il rendering di contenuti avanzati, ad esempio viste ad albero, menu o tabelle dei dati del database.

IndietroAvanti