Sdílet prostřednictvím

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

  • Č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. Pomocí pomocných rutin HTML můžete snížit množství zdlouhavého psaní značek HTML, které je nutné provést, abyste vytvořili standardní stránku 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. Pomocí pomocných rutin HTML můžete snížit množství zdlouhavého psaní značek HTML, které je nutné provést, abyste vytvořili standardní stránku HTML.

V první části tohoto kurzu popíšu některé existující pomocné rutiny 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 statické metody a vytvořením metody rozšíření.

Principy pomocných rutin HTML

Pomocník HTML je pouze metoda, která vrací řetězec. Řetězec může představovat libovolný typ obsahu, který chcete. Pomocí pomocných rutin HTML můžete například vykreslit standardní značky HTML, jako jsou 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 proužek tabulátoru nebo databázová data HTML.

Architektura 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 vykresluje pomocí dvou standardních pomocných rutin HTML (viz Obrázek 1). Tento formulář používá Html.BeginForm() pomocné metody a Html.TextBox() k vykreslení jednoduchého formuláře HTML.

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

Pomocná metoda Html.BeginForm() se používá k vytvoření levých a uzavíracích značek HTML <form> . Všimněte si, že Html.BeginForm() metoda 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 vytvoření bloku using voláním metody Html.EndForm() Helper značku zavřít <form> . Použijte libovolný přístup k vytvoření otevírací a zaví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 je vykreslena se značkami <%= %> místo značek <% %> . Pokud znaménko rovná se nezadáte, nic se v prohlížeči 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="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>

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

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

Výpis 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);
        }
    }
}

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

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

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

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 zahrnuté v architektuře 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 třídy HtmlHelper reprezentované vlastností Html zobrazení.

Třída ve výpisu 3 přidá metodu rozšíření do HtmlHelper třídy s názvem Label(). O této třídě byste si měli všimnout několika věcí. Nejprve si všimněte, že třída je statická třída. Musíte definovat rozšiřující metodu se statickou třídou.

Za druhé si všimněte, že prvnímu parametru Label() metody předchází klíčové slovo this. 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.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);
          }
     }
}

Po vytvoření rozšiřující metody a úspěšném sestavení aplikace se metoda rozšíření 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 zobrazují se speciálním symbolem vedle nich (ikona šipky dolů).

Použití metody rozšíření Html.Label()

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

Upravené zobrazení indexu v výpisu 4 používá metodu rozšíření Html.Label() k vykreslení všech značek <label> .

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

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 statické metody, která vrací řetězec. Dále jste se dozvěděli, jak vytvořit vlastní Label() metodu pomocníka HTML vytvořením rozšiřující metody pro HtmlHelper třídu.

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

PředchozíDalší