Freigeben über

Erstellen von benutzerdefinierten HTML-Hilfsprogrammen (VB)

von Microsoft

PDF herunterladen

Das Ziel dieses Tutorials besteht darin, zu veranschaulichen, wie Sie benutzerdefinierte HTML-Hilfsprogramme erstellen können, die Sie in Ihren MVC-Ansichten verwenden können. Durch die Nutzung von HTML-Hilfsprogrammen können Sie die Menge an mühsamen Eingaben von HTML-Tags reduzieren, die Sie zum Erstellen einer STANDARD-HTML-Seite ausführen müssen.

Das Ziel dieses Tutorials besteht darin, zu veranschaulichen, wie Sie benutzerdefinierte HTML-Hilfsprogramme erstellen können, die Sie in Ihren MVC-Ansichten verwenden können. Durch die Nutzung von HTML-Hilfsprogrammen können Sie die Menge an mühsamen Eingaben von HTML-Tags reduzieren, die Sie zum Erstellen einer STANDARD-HTML-Seite ausführen müssen.

Im ersten Teil dieses Tutorials beschreibe ich einige der vorhandenen HTML-Hilfsprogramme, die im ASP.NET MVC-Framework enthalten sind. Als Nächstes beschreibe ich zwei Methoden zum Erstellen von benutzerdefinierten HTML-Hilfsprogrammen: Ich erkläre, wie benutzerdefinierte HTML-Hilfsprogramme erstellt werden, indem eine freigegebene Methode und eine Erweiterungsmethode erstellt werden.

Grundlegendes zu HTML-Hilfsprogrammen

Ein HTML-Hilfsprogramm ist nur eine Methode, die eine Zeichenfolge zurückgibt. Die Zeichenfolge kann jeden gewünschten Inhaltstyp darstellen. Beispielsweise können Sie HTML-Hilfsprogramme verwenden, um STANDARD-HTML-Tags wie HTML <input> und <img> Tags zu rendern. Sie können auch HTML-Hilfsprogramme verwenden, um komplexere Inhalte wie einen Registerkartenstreifen oder eine HTML-Tabelle mit Datenbankdaten zu rendern.

Das ASP.NET MVC-Frameworks enthält die folgenden Standard-HTML-Hilfsprogramme (dies ist keine vollständige Liste):

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

Betrachten Sie beispielsweise das Formular in Listing 1. Dieses Formular wird mithilfe von zwei der standardmäßigen HTML-Hilfsprogramme gerendert (siehe Abbildung 1). Dieses Formular verwendet die Html.BeginForm() Methoden und Html.TextBox() Helper.

Mit HTML-Hilfsprogrammen gerenderte Seite

Abbildung 01: Mit HTML-Hilfsprogrammen gerenderte Seite (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

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

Die Html.BeginForm() Helper-Methode wird verwendet, um die öffnenden und schließenden HTML-Tags <form> zu erstellen. Beachten Sie, dass die Html.BeginForm() -Methode in einer using-Anweisung aufgerufen wird. Die using-Anweisung stellt sicher, dass das <form> Tag am Ende des using-Blocks geschlossen wird.

Wenn Sie möchten, können Sie anstelle eines using-Blocks die Html.EndForm()-Hilfsmethode aufrufen, um das <form> Tag zu schließen. Verwenden Sie den Ansatz, um ein Öffnen und Schließen <form> eines Tags zu erstellen, das Ihnen am intuitivsten erscheint.

Die Html.TextBox() Hilfsmethoden werden in Listing 1 verwendet, um HTML-Tags <input> zu rendern. Wenn Sie in Ihrem Browser Die Quelle anzeigen auswählen, wird die HTML-Quelle in Eintrag 2 angezeigt. Beachten Sie, dass die Quelle Standard-HTML-Tags enthält.

Wichtig

Beachten Sie, dass das Html.TextBox()-HTML-Hilfsprogramm mit <%= %> Tags anstelle von <% %> Tags gerendert wird. Wenn Sie das Gleichheitszeichen nicht einschließen, wird nichts im Browser gerendert.

Das ASP.NET MVC-Frameworks enthält eine kleine Gruppe von Helfern. Wahrscheinlich müssen Sie das MVC-Framework mit benutzerdefinierten HTML-Hilfsprogrammen erweitern. Im weiteren Verlauf dieses Tutorials lernen Sie zwei Methoden zum Erstellen von benutzerdefinierten HTML-Hilfsprogrammen kennen.

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

Erstellen von HTML-Hilfsprogrammen mit freigegebenen Methoden

Die einfachste Möglichkeit, ein neues HTML-Hilfsprogramm zu erstellen, besteht darin, eine freigegebene Methode zu erstellen, die eine Zeichenfolge zurückgibt. Stellen Sie sich beispielsweise vor, Sie entscheiden, ein neues HTML-Hilfsprogramm zu erstellen, das ein HTML-Tag <label> rendert. Sie können die -Klasse in Listing 2 verwenden, um einen zu rendern <label>.

Eintrag 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

Es gibt nichts Besonderes an der Klasse in Listing 2. Die Label() -Methode gibt einfach eine Zeichenfolge zurück.

Die geänderte Indexansicht in Listing 3 verwendet zum Rendern von LabelHelper HTML-Tags <label> . Beachten Sie, dass die Ansicht eine <%@ imports %> Direktive enthält, die den Application1.Helpers-Namespace importiert.

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

Erstellen von HTML-Hilfsprogrammen mit Erweiterungsmethoden

Wenn Sie HTML-Hilfsprogramme erstellen möchten, die genau wie die standardmäßigen HTML-Hilfsprogramme im ASP.NET MVC-Framework funktionieren, müssen Sie Erweiterungsmethoden erstellen. Mit Erweiterungsmethoden können Sie einer vorhandenen Klasse neue Methoden hinzufügen. Beim Erstellen einer HTML-Hilfsmethode fügen Sie der Klasse, die durch die HtmlHelper Html-Eigenschaft einer Ansicht dargestellt wird, neue Methoden hinzu.

Das Visual Basic-Modul in Listing 3 fügt der HtmlHelper Klasse eine Erweiterungsmethode mit dem Namen Label() hinzu. Es gibt einige Dinge, die Sie in diesem Modul beachten sollten. Beachten Sie zunächst, dass das Modul mit dem <Extension()> -Attribut versehen ist. Um dieses Attribut verwenden zu können, müssen Sie den System.Runtime.CompilerServices Namespace importieren.

Beachten Sie zweitens, dass der erste Parameter der Label() -Methode die HtmlHelper -Klasse darstellt. Der erste Parameter einer Erweiterungsmethode gibt die Klasse an, die die Erweiterungsmethode erweitert.

Eintrag 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

Nachdem Sie eine Erweiterungsmethode erstellt und Ihre Anwendung erfolgreich erstellt haben, wird die Erweiterungsmethode in Visual Studio Intellisense wie alle anderen Methoden einer Klasse angezeigt (siehe Abbildung 2). Der einzige Unterschied besteht darin, dass Erweiterungsmethoden mit einem speziellen Symbol neben ihnen (symbol eines Pfeils nach unten) angezeigt werden.

Verwenden der Html.Label()-Erweiterungsmethode

Abbildung 02: Verwenden der Html.Label()-Erweiterungsmethode (Klicken Sie, um das bild in voller Größe anzuzeigen)

Die geänderte Indexansicht in Listing 4 verwendet die Html.Label()-Erweiterungsmethode, um alle zugehörigen <Bezeichnungstags> zu rendern.

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

Zusammenfassung

In diesem Tutorial haben Sie zwei Methoden zum Erstellen von benutzerdefinierten HTML-Hilfsprogrammen kennengelernt. Zunächst haben Sie gelernt, wie Sie ein benutzerdefiniertes Label() HTML-Hilfsprogramm erstellen, indem Sie eine freigegebene Methode erstellen, die eine Zeichenfolge zurückgibt. Als Nächstes haben Sie gelernt, wie Sie eine benutzerdefinierte Label() HTML-Hilfsmethode erstellen, indem Sie eine Erweiterungsmethode für die HtmlHelper -Klasse erstellen.

In diesem Tutorial konzentrierte ich mich auf das Erstellen einer extrem einfachen HTML-Hilfsmethode. Erkennen Sie, dass ein HTML-Hilfsprogramm so kompliziert sein kann, wie Sie möchten. Sie können HTML-Hilfsprogramme erstellen, die umfangreiche Inhalte wie Strukturansichten, Menüs oder Tabellen mit Datenbankdaten rendern.

ZurückWeiter