Freigeben über

Erstellen von benutzerdefinierten HTML-Hilfsprogrammen (C#)

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 benutzerdefinierter HTML-Hilfsprogramme: Ich erkläre, wie benutzerdefinierte HTML-Hilfsprogramme erstellt werden, indem eine statische 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() Hilfsmethoden und Html.TextBox() zum Rendern eines einfachen HTML-Formulars.

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="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>

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="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>

Erstellen von HTML-Hilfsprogrammen mit statischen Methoden

Die einfachste Möglichkeit, ein neues HTML-Hilfsprogramm zu erstellen, besteht darin, eine statische 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.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);
        }
    }
}

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="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>

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 HtmlHelper-Klasse, die durch die Html-Eigenschaft einer Ansicht dargestellt wird, neue Methoden hinzu.

Die -Klasse in Listing 3 fügt der Klasse eine Erweiterungsmethode mit dem HtmlHelper Namen Label()hinzu. Es gibt einige Dinge, die Sie an dieser Klasse beachten sollten. Beachten Sie zunächst, dass die Klasse eine statische Klasse ist. Sie müssen eine Erweiterungsmethode mit einer statischen Klasse definieren.

Beachten Sie zweitens, dass dem ersten Parameter der Label() -Methode der Schlüsselwort (keyword) thisvorangestellt ist. Der erste Parameter einer Erweiterungsmethode gibt die Klasse an, die die Erweiterungsmethode erweitert.

Eintrag 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);
          }
     }
}

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 Tags zu rendern <label> .

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

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