Sdílet prostřednictvím

Vytvoření vlastních pomocných rutin HTML (VB)

  • Článek

od Microsoftu

Stáhnout PDF

Cílem tohoto kurzu je ukázat, jak můžete vytvořit vlastní pomocné rutiny HTML, které můžete použít v zobrazeních MVC. Použitím pomocných rutin HTML můžete snížit množství zdlouhavého psaní značek HTML, které je nutné provést při vytváření standardní stránky HTML.

Cílem tohoto kurzu je ukázat, jak můžete vytvořit vlastní pomocné rutiny HTML, které můžete použít v zobrazeních MVC. Použitím pomocných rutin HTML můžete snížit množství zdlouhavého psaní značek HTML, které je nutné provést při vytváření standardní stránky HTML.

V první části tohoto kurzu popíšu některé ze stávajících pomocných rutin HTML, které jsou součástí architektury ASP.NET MVC. Dále popíšu dvě metody vytváření vlastních pomocných rutin HTML: Vysvětluji, jak vytvořit vlastní pomocné rutiny HTML vytvořením sdílené metody a vytvořením metody rozšíření.

Principy pomocných rutin HTML

Pomocná rutina HTML je pouze metoda, která vrací řetězec. Řetězec může představovat libovolný typ obsahu, který chcete. Pomocné rutiny HTML můžete například použít k vykreslení standardních značek HTML, jako je HTML <input> a <img> značky. Pomocné rutiny HTML můžete také použít k vykreslení složitějšího obsahu, jako je například pruh karet nebo tabulka html s databázovými daty.

Rozhraní ASP.NET MVC obsahuje následující sadu standardních pomocných rutin HTML (nejedná se o úplný seznam):

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

Představte si například formulář ve výpisu 1. Tento formulář se vykreslí pomocí dvou standardních pomocných rutin HTML (viz Obrázek 1). Tento formulář používá Html.BeginForm() pomocné metody a Html.TextBox() .

Stránka vykreslená pomocí pomocných rutin HTML

Obrázek 01: Stránka vykreslená pomocí pomocných rutin HTML (kliknutím zobrazíte obrázek v plné velikosti)

Výpis 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>

Pomocná Html.BeginForm() metoda se používá k vytvoření otevírací a uzavírací značky HTML <form> . Všimněte si, že metoda Html.BeginForm() je volána v rámci příkazu using. Příkaz using zajistí, že <form> se značka uzavře na konci bloku using.

Pokud chcete, můžete místo vytváření bloku using zavolat metodu Html.EndForm() Helper a zavřít <form> značku. Použijte libovolný přístup k vytvoření otevírací a uzavírací <form> značky, která se vám zdá nejintuitivnější.

Pomocné Html.TextBox() metody se používají ve výpisu 1 k vykreslení značek HTML <input> . Pokud v prohlížeči vyberete zdroj zobrazení, zobrazí se zdroj HTML ve výpisu 2. Všimněte si, že zdroj obsahuje standardní značky HTML.

Důležité

Všimněte si, že Html.TextBox()pomocná rutina -HTML se vykresluje se značkami <%= %> místo značek <% %> . Pokud znaménko rovná se nezadáte, v prohlížeči se nic nevykreslí.

Architektura ASP.NET MVC obsahuje malou sadu pomocných rutin. S největší pravděpodobností budete muset rozšířit architekturu MVC o vlastní pomocné rutiny HTML. Ve zbývající části tohoto kurzu se naučíte dvě metody vytváření vlastních pomocných rutin HTML.

Výpis 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>

Vytváření pomocných rutin HTML pomocí sdílených metod

Nejjednodušší způsob, jak vytvořit novou pomocnou rutinu HTML, je vytvořit sdílenou metodu, která vrátí řetězec. Představte si například, že se rozhodnete vytvořit novou pomocnou rutinu HTML, která vykreslí značku HTML <label> . Třídu ve výpisu 2 můžete použít k vykreslení <label>třídy .

Výpis 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

Na třídě ve výpisu 2 není nic zvláštního. Metoda Label() jednoduše vrátí řetězec.

Upravené zobrazení indexu ve výpisu 3 používá k vykreslení LabelHelper značek HTML <label> . Všimněte si, že zobrazení obsahuje direktivu <%@ imports %> , která importuje obor názvů Application1.Helpers.

Výpis 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>

Vytváření pomocných rutin HTML pomocí rozšiřujících metod

Pokud chcete vytvořit pomocné rutiny HTML, které fungují stejně jako standardní pomocné rutiny HTML, které jsou součástí architektury ASP.NET MVC, musíte vytvořit rozšiřující metody. Rozšiřující metody umožňují přidat nové metody do existující třídy. Při vytváření pomocné metody HTML přidáte nové metody do HtmlHelper třídy reprezentované vlastností HTML zobrazení.

Modul jazyka Visual Basic ve výpisu 3 přidá do HtmlHelper třídy metodu rozšíření s názvem Label() . V tomto modulu byste si měli všimnout několika věcí. Nejprve si všimněte, že modul je opatřen atributem <Extension()> . Pokud chcete použít tento atribut, musíte importovat System.Runtime.CompilerServices obor názvů.

Za druhé si všimněte, že první parametr Label() metody představuje HtmlHelper třídu . První parametr rozšiřující metody označuje třídu, kterou rozšiřující metoda rozšiřuje.

Výpis 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

Po vytvoření rozšiřující metody a úspěšném sestavení aplikace se rozšiřující metoda zobrazí v sadě Visual Studio Intellisense stejně jako všechny ostatní metody třídy (viz Obrázek 2). Jediným rozdílem je, že rozšiřující metody se vedle sebe zobrazují se speciálním symbolem (ikona šipky dolů).

Použití rozšiřující metody Html.Label()

Obrázek 02: Použití rozšiřující metody Html.Label() (Kliknutím zobrazíte obrázek v plné velikosti)

Upravené zobrazení indexu ve výpisu 4 používá rozšiřující metodu Html.Label() k vykreslení všech značek <popisků> .

Výpis 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>

Souhrn

V tomto kurzu jste se seznámili se dvěma způsoby vytváření vlastních pomocných rutin HTML. Nejprve jste se dozvěděli, jak vytvořit vlastní Label() pomocník HTML vytvořením sdílené metody, která vrací řetězec. Dále jste se dozvěděli, jak vytvořit vlastní Label() metodu pomocné rutiny HTML vytvořením rozšiřující metody ve HtmlHelper třídě .

V tomto kurzu jsem se zaměřil na vytvoření velmi jednoduché metody pomocníka HTML. Uvědomte si, že pomocník HTML může být tak komplikovaný, jak chcete. Můžete vytvořit pomocné rutiny HTML, které vykreslují formátovaný obsah, jako jsou stromová zobrazení, nabídky nebo tabulky databázových dat.

PředchozíDalší