Özel HTML Yardımcıları Oluşturma (C#)

Makale
07/13/2023

Bu öğreticinin amacı, MVC görünümlerinizde kullanabileceğiniz özel HTML Yardımcılarını nasıl oluşturabileceğinizi göstermektir. HTML Yardımcılarından yararlanarak, standart bir HTML sayfası oluşturmak için gerçekleştirmeniz gereken YORUCU HTML etiketleri yazma miktarını azaltabilirsiniz.

Bu öğreticinin amacı, MVC görünümlerinizde kullanabileceğiniz özel HTML Yardımcılarını nasıl oluşturabileceğinizi göstermektir. HTML Yardımcılarından yararlanarak, standart bir HTML sayfası oluşturmak için gerçekleştirmeniz gereken YORUCU HTML etiketleri yazma miktarını azaltabilirsiniz.

Bu öğreticinin ilk bölümünde, ASP.NET MVC çerçevesine dahil edilen mevcut HTML Yardımcılarından bazılarını açıklıyorum. Ardından, özel HTML Yardımcıları oluşturmanın iki yöntemini açıklayacağım: Statik bir yöntem oluşturarak ve bir uzantı yöntemi oluşturarak özel HTML Yardımcıları oluşturmayı açıklayacağım.

HTML Yardımcılarını Anlama

HTML Yardımcısı yalnızca dize döndüren bir yöntemdir. Dize, istediğiniz herhangi bir içerik türünü temsil edebilir. Örneğin, HTML ve etiketler gibi standart HTML etiketlerini işlemek için HTML <input><img> Yardımcılarını kullanabilirsiniz. Ayrıca, sekme şeridi veya veritabanı verilerinin HTML tablosu gibi daha karmaşık içerikleri işlemek için HTML Yardımcılarını da kullanabilirsiniz.

ASP.NET MVC çerçevesi aşağıdaki standart HTML Yardımcıları kümesini içerir (bu tam bir liste değildir):

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

Örneğin, Liste 1'deki formu göz önünde bulundurun. Bu form, standart HTML Yardımcılarından ikisinin yardımıyla işlenir (bkz. Şekil 1). Bu form, basit bir HTML formunu işlemek için ve Html.TextBox() Yardımcı yöntemlerini kullanırHtml.BeginForm().

Şekil 01: HTML Yardımcıları ile işlenen sayfa (Tam boyutlu görüntüyü görüntülemek için tıklayın)

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

Html.BeginForm() Yardımcı yöntemi, açma ve kapatma HTML <form> etiketlerini oluşturmak için kullanılır. yönteminin Html.BeginForm() bir using deyimi içinde çağrıldığını fark edin. using deyimi, using bloğunun <form> sonunda etiketin kapatılmasını sağlar.

İsterseniz bir using bloğu oluşturmak yerine Html.EndForm() Yardımcı yöntemini çağırarak etiketi kapatabilirsiniz <form> . Sizin için en sezgisel görünen bir açma ve kapatma <form> etiketi oluşturmak için hangi yaklaşımı kullanın.

Html.TextBox() Yardımcı yöntemleri, HTML <input> etiketlerini işlemek için Listeleme 1'de kullanılır. Tarayıcınızda kaynağı görüntüle'yi seçerseniz, Liste 2'de HTML kaynağını görürsünüz. Kaynağın standart HTML etiketleri içerdiğine dikkat edin.

Önemli

-HTML Yardımcısı'nın Html.TextBox()etiketler yerine etiketlerle <%= %> işlendiğine <% %> dikkat edin. Eşittir işaretini dahil etmezseniz tarayıcıda hiçbir şey işlenmez.

ASP.NET MVC çerçevesi küçük bir yardımcı kümesi içerir. Büyük olasılıkla, MVC çerçevesini özel HTML Yardımcıları ile genişletmeniz gerekir. Bu öğreticinin geri kalanında, özel HTML Yardımcıları oluşturmanın iki yöntemini öğreneceksiniz.

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

Statik Yöntemlerle HTML Yardımcıları Oluşturma

Yeni bir HTML Yardımcısı oluşturmanın en kolay yolu, dize döndüren statik bir yöntem oluşturmaktır. Örneğin, bir HTML etiketi işleyen <label> yeni bir HTML Yardımcısı oluşturmaya karar verdiyseniz düşünün. Bir işlemek <label> için Listeleme 2'deki sınıfını kullanabilirsiniz.

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

Listeleme 2'deki sınıfta özel bir şey yoktur. Label() yöntemi yalnızca bir dize döndürür.

Liste 3'teki değiştirilen Dizin görünümü, HTML <label> etiketlerini işlemek için öğesini LabelHelper kullanır. Görünümün ad alanını içeri aktaran bir <%@ imports %> yönerge içerdiğine Application1.Helpers dikkat edin.

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

Uzantı Yöntemleriyle HTML Yardımcıları Oluşturma

ASP.NET MVC çerçevesine dahil edilen standart HTML Yardımcıları gibi çalışan HTML Yardımcıları oluşturmak istiyorsanız uzantı yöntemleri oluşturmanız gerekir. Uzantı yöntemleri, mevcut bir sınıfa yeni yöntemler eklemenize olanak tanır. HTML Yardımcısı yöntemi oluştururken, bir görünümün Html özelliğiyle temsil edilen HtmlHelper sınıfına yeni yöntemler eklersiniz.

Listing 3'teki sınıfı, adlı Label()sınıfa HtmlHelper bir uzantı yöntemi ekler. Bu sınıfla ilgili dikkat edilmesi gereken birkaç şey vardır. İlk olarak, sınıfının statik bir sınıf olduğuna dikkat edin. Statik sınıfla bir uzantı yöntemi tanımlamanız gerekir.

İkinci olarak, yönteminin ilk parametresinin Label() anahtar sözcüğünden thisönce olduğuna dikkat edin. Bir uzantı yönteminin ilk parametresi, uzantı yönteminin genişletir sınıfını gösterir.

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

Bir uzantı yöntemi oluşturduktan ve uygulamanızı başarıyla derledikten sonra, uzantı yöntemi bir sınıfın diğer tüm yöntemleri gibi Visual Studio IntelliSense'te görünür (bkz. Şekil 2). Tek fark, uzantı yöntemlerinin yanında özel bir simgeyle (aşağı ok simgesi) görünmesidir.

Şekil 02: Html.Label() uzantı yöntemini kullanma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Liste 4'teki değiştirilen Dizin görünümü, tüm etiketlerini <label> işlemek için Html.Label() uzantı yöntemini kullanır.

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

Özet

Bu öğreticide, özel HTML Yardımcıları oluşturmanın iki yöntemini öğrendiniz. İlk olarak, bir dize döndüren statik bir yöntem oluşturarak özel Label() bir HTML Yardımcısı oluşturmayı öğrendiniz. Ardından, sınıfında bir uzantı yöntemi oluşturarak özel Label() bir HTML Yardımcısı yöntemi HtmlHelper oluşturmayı öğrendiniz.

Bu öğreticide, son derece basit bir HTML Yardımcısı yöntemi oluşturmaya odaklandım. HTML Yardımcısı'nın istediğiniz kadar karmaşık olabileceğini fark edin. Ağaç görünümleri, menüler veya veritabanı verileri tabloları gibi zengin içeriği işleyen HTML Yardımcıları oluşturabilirsiniz.

Önceki Sonraki