Tworzenie niestandardowych pomocników HTML (VB)

Artykuł
07/13/2023

Celem tego samouczka jest zademonstrowanie sposobu tworzenia niestandardowych pomocników HTML, których można używać w widokach MVC. Korzystając z pomocników HTML, można zmniejszyć ilość żmudnego wpisywania tagów HTML, które należy wykonać, aby utworzyć standardową stronę HTML.

Celem tego samouczka jest zademonstrowanie sposobu tworzenia niestandardowych pomocników HTML, których można używać w widokach MVC. Korzystając z pomocników HTML, można zmniejszyć ilość żmudnego wpisywania tagów HTML, które należy wykonać, aby utworzyć standardową stronę HTML.

W pierwszej części tego samouczka opiszę niektóre z istniejących pomocników HTML dołączonych do platformy ASP.NET MVC. Następnie opiszę dwie metody tworzenia niestandardowych pomocników HTML: wyjaśniam, jak tworzyć niestandardowe pomocniki HTML, tworząc metodę udostępnioną i tworząc metodę rozszerzenia.

Opis pomocników HTML

Pomocnik HTML to tylko metoda zwracająca ciąg. Ciąg może reprezentować dowolny typ zawartości. Na przykład można użyć pomocników HTML do renderowania standardowych tagów HTML, takich jak HTML <input> i <img> tagi. Za pomocą pomocników HTML można również renderować bardziej złożoną zawartość, taką jak pasek kart lub tabela HTML danych bazy danych.

Struktura ASP.NET MVC zawiera następujący zestaw standardowych pomocników HTML (nie jest to pełna lista):

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

Rozważmy na przykład formularz w liście 1. Ten formularz jest renderowany za pomocą dwóch standardowych pomocników HTML (zobacz Rysunek 1). Ten formularz używa Html.BeginForm() metod i Html.TextBox() Pomocnika.

Rysunek 01. Strona renderowana za pomocą pomocników HTML (kliknij, aby wyświetlić obraz pełnowymiarowy)

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

Metoda Html.BeginForm() Pomocnika służy do tworzenia i zamykania tagów HTML <form> . Zwróć uwagę, że metoda jest wywoływana Html.BeginForm() w instrukcji using. Instrukcja using gwarantuje, że <form> tag zostanie zamknięty na końcu bloku using.

Jeśli wolisz, zamiast tworzyć blok przy użyciu, możesz wywołać metodę Pomocnika Html.EndForm(), aby zamknąć <form> tag. Użyj niezależnie od podejścia do tworzenia tagu otwierającego i zamykającego <form> , który wydaje się najbardziej intuicyjny dla Ciebie.

Metody Html.TextBox() pomocnika są używane na liście 1 do renderowania tagów HTML <input> . Jeśli wybierzesz pozycję Wyświetl źródło w przeglądarce, zobaczysz źródło HTML na liście 2. Zwróć uwagę, że źródło zawiera standardowe tagi HTML.

Ważne

Zwróć uwagę, że Html.TextBox()pomocnik -HTML jest renderowany za pomocą <%= %> tagów zamiast tagów <% %> . Jeśli nie dołączysz znaku równości, nic nie zostanie renderowane w przeglądarce.

Struktura ASP.NET MVC zawiera niewielki zestaw pomocników. Najprawdopodobniej konieczne będzie rozszerzenie struktury MVC za pomocą niestandardowych pomocników HTML. W pozostałej części tego samouczka poznasz dwie metody tworzenia niestandardowych pomocników HTML.

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

Tworzenie pomocników HTML przy użyciu metod udostępnionych

Najprostszym sposobem utworzenia nowego pomocnika HTML jest utworzenie udostępnionej metody zwracającej ciąg. Załóżmy na przykład, że decydujesz się utworzyć nowy pomocnik HTML, który renderuje tag HTML <label> . Możesz użyć klasy w liście 2, aby renderować element <label>.

Lista 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

W klasie List 2 nie ma nic specjalnego. Metoda Label() po prostu zwraca ciąg.

Zmodyfikowany widok indeksu w pozycji Lista 3 używa elementu LabelHelper do renderowania tagów HTML <label> . Zwróć uwagę, że widok zawiera dyrektywę <%@ imports %> , która importuje przestrzeń nazw Application1.Helpers.

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

Tworzenie pomocników HTML za pomocą metod rozszerzeń

Jeśli chcesz utworzyć pomocników HTML, które działają podobnie jak standardowe pomocniki HTML zawarte w strukturze ASP.NET MVC, musisz utworzyć metody rozszerzeń. Metody rozszerzenia umożliwiają dodawanie nowych metod do istniejącej klasy. Podczas tworzenia metody pomocnika HTML można dodać nowe metody do HtmlHelper klasy reprezentowanej przez właściwość HTML widoku.

Moduł Visual Basic w liście List 3 dodaje metodę rozszerzenia o nazwie Label() do HtmlHelper klasy. Istnieje kilka rzeczy, które należy zauważyć w tym module. Najpierw zwróć uwagę, że moduł jest ozdobiony atrybutem <Extension()> . Aby użyć tego atrybutu System.Runtime.CompilerServices , należy zaimportować przestrzeń nazw

Po drugie należy zauważyć, że pierwszy parametr Label() metody reprezentuje klasę HtmlHelper . Pierwszy parametr metody rozszerzenia wskazuje klasę, którą rozszerza metoda rozszerzenia.

Lista 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 utworzeniu metody rozszerzenia i pomyślnym utworzeniu aplikacji metoda rozszerzenia pojawi się w funkcji IntelliSense programu Visual Studio, podobnie jak wszystkie inne metody klasy (zobacz Rysunek 2). Jedyną różnicą jest to, że metody rozszerzenia są wyświetlane ze specjalnym symbolem obok nich (ikona strzałki w dół).

Rysunek 02. Używanie metody rozszerzenia Html.Label() (Kliknij, aby wyświetlić obraz pełnowymiarowy)

Zmodyfikowany widok indeksu w listach 4 używa metody rozszerzenia Html.Label() do renderowania wszystkich tagów <etykiet> .

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

Podsumowanie

W tym samouczku przedstawiono dwie metody tworzenia niestandardowych pomocników HTML. Najpierw przedstawiono sposób tworzenia niestandardowego Label() pomocnika HTML przez utworzenie metody udostępnionej zwracającej ciąg. Następnie pokazano, jak utworzyć niestandardową Label() metodę pomocnika HTML, tworząc metodę rozszerzenia w HtmlHelper klasie.

W tym samouczku skupiliśmy się na tworzeniu niezwykle prostej metody pomocnika HTML. Należy pamiętać, że pomocnik HTML może być tak skomplikowany, jak chcesz. Możesz tworzyć pomocniki HTML, które renderują bogatą zawartość, taką jak widoki drzewa, menu lub tabele danych bazy danych.

Wstecz Dalej

Share via