نحوه ی ایجاد یک کلاس Helper سفارشی در MVC

در این مقاله نحوه ایجاد یک کلاس Helper سفارشی شده در برنامه ی ASP.NET MVC را بررسی می کنیم. روش های مختلفی برای این کار وجود دارد که ما به اختصار آن ها را معرفی می کنیم.

یک کلاس Helper سفارشی چیست؟

HTML helper ها روشی برای نمایش html در صفحات MVC هستند . این Helper ها توابع ساده ای هستند که به برنامه نویسان اجازه می دهند که نوع HTML ای که View نیاز دارد، را تعیین کنند.

Helper های تعبیه شده زیر در حال حاضر در دسترس می باشند:

Html.ActionLink

Html.BeginForm

Html.CheckBox

Html.DropDownList

Html.EndForm

Html.Hidden

Html.ListBox

Html.Password

Html.RadioButton

Html.TextArea

Html.TextBox

برخی از Html Helper هایی که برای View های از نوع strongly در دسترس می باشند، عبارتند از :

Html.CheckBoxFor

Html.DropDownListFor

Html.HiddenFor

Html.ListBoxFor

Html.PasswordFor

Html.RadioButtonFor

Html.TextAreaFor

Html.TextBoxFor

لیست بالا مربوط به HTML Helper هایی هستند که برای view هایی از جنس strongly به کار می روند. در داخل این متدهای helper ، ما عبارت های lambda را به عنوان آرگومان متد انتقال می دهیم.

اما اگر بخواهیم متد HTML Helper خودمان را داشته باشیم، سه روش برای ایجاد این Html Helper های سفارشی وجود دارد.

1-استفاده از متد استاتیک (Static Method)

2-استفاده از Extension Method

3-استفاده از @helper

Helper سفارشی با استفاده از Static Method

Static Method

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
  
namespace CustomHelper.CustomHelpers  
{  
    /// <summary>  
    /// This Class Helpes  
    /// </summary>  
    public static class HelperByStaticMethod  
    {  
        /// <summary>  
        /// This is a Helper Method For Image Element  
        /// </summary>  
        /// <param name="Source">Provide Source</param>  
        /// <param name="Alt">alt Attribute For That Image</param>  
        /// <param name="Title">Title For the Image</param>  
        /// <param name="Height">Height Attribute (By Default Height will be 128)</param>  
        /// <param name="Width">Width Attribute (By Default Width will be 128)</param>  
        /// <returns></returns>  
        public static string img(string Source, string Alt, string Title, int Height=128, int Width=128)  
        {  
            return String.Format("<img src='{0}' alt='{1}' title='{2}' height='{3}' width='{4}'/>", Source, Alt, Title, Height, Width);  
        }  
    }  
}

و در داخل View نیز کدهای زیر نوشته خواهند شد.

@using CustomHelper.CustomHelpers  
<!DOCTYPE html>  
  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Index</title>  
</head>  
<body>  
    <div>   
        @Html.Raw(HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg"))      
        @Html.Raw(HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167))       
        @Html.Raw(HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250))      
        @Html.Raw(HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200))   
    </div>  
</body>  
</html>

خروجی :

در کد بالا ما یک کلاس و متد static ایجاد کرده ایم که آیتم های Image Source ، Alt ، Title ، Height و Width را مشخص می کند و در نهایت یک رشته ی ساده برمی گرداند. اما یک مشکل این است که ما با استفاده از Html.Raw و به صورت عینی و واضح تبدیل این آیتم ها به html را انجام می دهیم. اگر بخواهیم این رشته را به فرمت html تبدیل نکنیم، کد های ما به صورت زیر خواهند بود:

@HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")      
@HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)       
@HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)      
@HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)

در این صورت، خروجی ما به صورت زیر خواهد بود:

Helper های سفارشی سازی شده با استفاده از Extension Method

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
  
namespace CustomHelper.CustomHelpers  
{  
    public static class HelperByExt  
    {  
        public static MvcHtmlString img(this HtmlHelper htmlHelper,string Source, string alt, string title, int Height=128, int Width=128)  
        {  
            var imgTag = new TagBuilder("image");  
            imgTag.MergeAttribute("src", Source);  
            imgTag.MergeAttribute("alt", alt);  
            imgTag.MergeAttribute("title", title);  
            imgTag.MergeAttribute("width", Width.ToString());  
            imgTag.MergeAttribute("height", Height.ToString());  
            return MvcHtmlString.Create(imgTag.ToString(TagRenderMode.SelfClosing));  
        }  
    }  
}

در view ما از کلاس Custom Helper به صورت زیر استفاده خواهیم کرد.

ما کدهای زیر را برای view می نویسیم:

@using CustomHelper.CustomHelpers  
<!DOCTYPE html>  
 
<html>  
<head>  
<meta name="viewport" content="width=device-width" />  
<title>Index</title>  
</head>  
<body>  
<div>  
@Html.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")      
@Html.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)      
@Html.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)      
@Html.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)  
</div>  
</body>  
</html>

خروجی:

Helper سفارشی شده با استفاده از @helper

این متد فقط برای razor view engine کاربرد دارد. دستور @helper در داخل Razor شما را قادر می سازد تا به راحتی متدهای دوباره قابل استفاده ایجاد کنید که می توانند قابلیت های خروجی را در درون قالب نمایش شما چند برابر کنند. آن ها می توانند برای شما امکان استفاده بهتر از کد را فراهم بیاورند و همچنین می توانند خوانایی کدها را افزایش بدهند. بیایید نگاهی به نحوه استفاده از این دستور بپردازیم.

همان طور که قبلا نیز گفتیم @helper فقط برای razor view engine کاربرد دارد بنابراین می توانیم آن را در view ها و یا cshtml file ها استفاده کنیم.

چگونه از @helper استفاده کنیم؟

کدهای زیر برای بخش view نوشته می شوند:

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Index</title>  
</head>  
<body>  
    <div>  
        @helper img(string Source, string alt, string title,   
                int Height = 128, int Width = 128)  
        {  
            <img src="@Source" alt="@alt" title="@title" height="@Height" width="@Width"/>  
        }  
        @img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")      
        @img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167)      
        @img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)      
        @img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)  
    </div>  
</body>  
</html>

خروجی

در نهایت ما کدهای مربوط به هر سه روش را در یک صفحه قرار می دهیم.

@using CustomHelper.CustomHelpers
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>

        <h1> با استفاده از متدهای استاتیک Helper</h1>                   
        @Html.Raw(HelperByStaticMethod.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg")) &nbsp;&nbsp;&nbsp;
        @Html.Raw(HelperByStaticMethod.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167))  &nbsp;&nbsp;&nbsp;
        @Html.Raw(HelperByStaticMethod.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250)) &nbsp;&nbsp;&nbsp;
        @Html.Raw(HelperByStaticMethod.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200))
        <hr />

        <h1> با استفاده از متدهای توسعه یافته Helper</h1>
        <h2>Extension methods</h2>
        @Html.img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg") &nbsp;&nbsp;&nbsp;
        @Html.img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167) &nbsp;&nbsp;&nbsp;
        @Html.img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250) &nbsp;&nbsp;&nbsp;
        @Html.img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
        <hr />


        <h1>Helper با @@helper </h1>                  

        @helper img(string Source, string alt, string title, 
                int Height = 128, int Width = 128)
        {
            <img src="@Source" alt="@alt" title="@title" height="@Height" width="@Width"/>
        }
        @img("/Images/1.jpg", "Mark Zuck", "Mark Zuckerberg") &nbsp;&nbsp;&nbsp;
        @img("/Images/2.jpg", "Bill Gates", "Bill Gates", 250, 167) &nbsp;&nbsp;&nbsp;
        @img("/Images/3.jpg", "APJ Abdul Kalam", "APJ Abdul Kalam", 250) &nbsp;&nbsp;&nbsp;
        @img("/Images/4.jpg", "Steve Jobs", "Steve Jobs", 200, 200)
    </div>
</body>
</html>

خروجی