آموزش ASP.NET MVC5 – فصل۵

 آموزش ASP.NET MVC5 – فصل۵ 

 

با عرض سلام مجدد خدمت علاقه مندان به مقاله آموزشی MVC . در جلسه چهارم، با نحوه ایجاد و طراحی Layout در MVC آشنا شدیم:

»»» آموزش ASP.NET MVC5 – فصل۴

 

در جلسه پنجم میخواهیم با HtmlHelper نویسی در MVC آشنا شویم . 

MVC HtmlHelpers

 

آموزش HtmlHelper نویسی در ASP.NET MVC:

تا کنون با دو نمونه از HtmlHelper ها در MVC کار کرده ایم . یکی Html.Partial و دیگری Html.Raw . حالا میخواهیم با چند نمونه دیگر از htmlhelper ها آشنا شویم و در نهایت خودمان یک HtmlHelper بنویسیم surprise

در ASP.NET webform برای ایجاد تکست باکس ، asp:textbox داشتیم (یک شئ از یک کلاس است) و در MVC ، معادل آن Html.TextBox می باشد (یک متد است)

 

HtmlHelper برای ایجاد تگ فرم : 

 
@{
        Html.BeginForm();
 }
@{
        Html.EndForm();
 }
                                 

دقیقا در سمت کاربر ، همان تگ فرم form نمایش داده میشود (render می شود) و بطور پیش فرض متد آنرا post و اکشن آنرا نیز همان اکشن جاری انتخاب میکند . بنابراین اگر در سمت کلاینت ، view page source را بزنیم ، کدی مانند زیر میبینیم :

<form action="/Home/Learn02" method="post">
        
 </form>

HtmlHelper برای تولید Label :

 
@Html.Label(expression: "firstName", labelText: "First Name")
                                 

همانطور که می بینیم دو پارامتر میگیرد ، یکی expression (مانند for در label های سابق) و دیگری labelText که متن Label را مشخص می کند .

 

HtmlHelper برای تولید TextBox :

برای ایجاد textbox میتوان به ۷ روش پارامترهای آنرا تعریف نمود (۷ تا overload دارد) . یک روش آن فقط name میگیرد . روش دیگر name , value میگیرد (مقدار اولیه داخل textbox) مورد بعدی که مهم است htmlAttributes می باشد که باید بصورت anonymous Object تعریف شود . مواردی از قبیل css style و max length و غیره در اینجا تعریف می شوند . برای مثال در textbox زیر داریم :

 
@Html.TextBox(name: "fName", value: null, htmlAttributes: new { maxlength = 20, title = "Name", @class = "form-control" })
                                 

نکته : برای تمرین بیشتر در زمینه HtmlHelpers میتوانید به وب سایت W3Schools و یا وب سایت مرجع asp.net مراجعه کنید .

 

لزوم استفاده از HtmlHelper ها در MVC:

سناریو : فرض کنید یک پروژه بزرگی دارید که مثلا ۱۰۰۰ تا textbox دارد . روزی تصمیم می گیرید textbox های خود را بوت استرپی کنید (یعنی کلاس form-control را به هر textbox اضافه کنید) . برای اینکار باید ۱۰۰۰ جا را تغییر بدهید و عملا امکان پذیر نیست . ولی اگر textbox های خود را در htmlhelper تعریف کنید ، فقط کافیست کد htmlhelper مربوط به textbox را تغییر دهید و کلاس form-control را به آن اضافه کنید .

انجام تغییرات سراسری در پروژه MVC توسط HtmlHelper:

مثال دیگری که کاربرد htmlHelper ها را بیشتر نمایان میکند اینست که فرض کنید بخواهیم label های یک پروژه را داخل div ای با کلاس caption تعریف کنیم . با استفاده از htmlHelper دیگر نیازی نیست در کل پروژه تغییرات را اعمال کنیم . فقط و فقط htmlhelper مربوط به label را تغییر میدهیم .

 

تعریف HTMLHelper در MVC:

برای شروع کار ابتدا یک فولدر بنام Infrastructure در روت پروژه میسازیم و روی فولدر راست کلیک کرده و یک کلاس add میکنیم . نام کلاس را TraditionalHtmlHelpers.cs انتخاب میکنیم . سپس در کلاس باز شده ، بصورت زیر عمل میکنیم :

 
namespace Infrastructure
{
    public static class TraditionalHtmlHelpers
    {
        static TraditionalHtmlHelpers()
        {
        }
    }
}
                                 

کلاس باید از نوع static باشد که برای فراخوانی آن نیاز نباشد که ابتدا از آن کلاس ، شئ تولید کنیم .

پیاده سازی تابع Label توسط htmlhelper:

اکنون در ادامه کلاس ، تابع مربوط به Label را مینویسیم که خروجی آن string است و دو پارامتر ورودی میگیرد : expression , labelText . کد تابع Label بدین صورت است :

 
public static string Label(string expression, string labelText)
{
    // Solution (1)
    string strResult =
        string.Format("",
        expression, labelText);
    return (strResult);
    }
                                 

اکنون توانسته ایم htmlHelper ساده ای برای label تعریف کنیم .

فراخوانی HtmlHelper مربوط به Label:

برای فراخوانی این تابع در view بدین صورت عمل می کنیم :

باید نام فولدر (Infrastructure) را بهمراه نام فایل (TraditionalHtmlHelpers) بهمراه نام تابع (Label) را ذکر کنیم :

@Html.Raw(Infrastructure.TraditionalHtmlHelpers.Label(expression: "firstName", labelText: "First Name"))

حالا می خواهیم تمام label هایی که در پروژه خود استفاده کرده ایم را داخل div ای با کلاس caption قراردهیم . متغیر strResult بصورت زیر تعریف می شود :

string strResult =
string.Format("<div class="caption"><label for="{0}">{1}</label></div>", expression, labelText);

 

نکته : برای تکمیل آموخته های خود ، به وب سایت W3Schools مراجعه کنید .

 

ایرادات احتمالی در HtmlHelper نویسی:

تا کنون به نحوه HTMLHelper نویسی در ASP.NET MVC آشنا شدیم و توانستیم یک label را توسط آن تعریف کنیم. این روش دارای ایراداتی بود مانند اینکه باید مسیر طولانی محل ذخیره سازی htmlHelper را در هر بار فراخوانی ، بیان میکردیم . همچنین باید Html.Raw را نیز صدا میزدیم . در این بخش میخواهیم ایرادات مذکور را برطرف کنیم .

میخواهیم label تعریف شده را بصورت Extension Method تعریف کنیم . یعنی وقتی Html را مینویسیم و دات (نقطه) را میزنیم ، متدی که ما برای label نوشتیم نیز در لیست ظاهر شده وجود داشته باشد و نیازی به تایپ دستی آن نباشد .

 

نحوه نوشتن Extension Method :

ابتدا روی فولدر Infrastructure راست کلیک کرده و add–>class میکنیم و نام کلاس را HtmlHelpers.cs قرار میدهیم (نام کلاس دلخواه است) .

سپس تابع زیر را بعد از Default Constructor کلاس می نویسیم . هم تابع و هم کلاس htmlhelper ای که مینویسیم باید public و static باشند . نکته مهم و کلیدی در Extension Method نویسی اینست که در هنگام تعریف تابع ، پارامتر اول آن همیشه باید چیزی باشد که بیانگر این است که این تابع به چه چیزی میخواهد Extend شود (که در این مقاله به htmlHelper میخواهیم Extend شود) . پارامترهای بعدی نیز مثلا همان expression و labelText می باشند :

 
public static string ESLabel
    (this System.Web.Mvc.HtmlHelper myParam, string expression, string labelText)
{
    string strResult =
        string.Format("",
        expression, labelText);
    return (strResult);
}
                                 

پارامتری که آبی رنگ است همان نوع Extension می باشد و دو پارامتر دیگر سبز رنگ پارامترهای دلخواه هستند . (نام myParam دلخواه می باشد) .

 

استفاده از Extension Method :

همانطور که می بینید بدنه تابع مانند قبل است . برای اینکه بتوان از این ExtensionMethod در view خود استفاده کنیم باید در view در بالای صفحه عبارت زیر را بنویسیم تا nameSpace مربوط به ESLabel را اضافه کرده باشیم :

@using Infrastructure

سپس در view در هرجای صفحه که خواستیم میتوان از label خودمان استفاده کنیم :

@Html.Raw(Html.ESLabel("firstName", "First Name"))

مشاهده میکنید که همچنان باید Html.Raw را بنویسیم (برای اینکه تگ های html داخل متغیر strResult  تابع ESLabel در مرورگر render شوند) . برای رفع این  مشکل باید نوع خروجی تابع ESLabel را عوض کنیم و از نوع زیر قرار دهیم :

public static System.Web.IHtmlString ESxLabel

و در هنگام return کردن خروجی ، Html.Raw را آنجا تعریف کنیم :

return (htmlHelper.Raw(strResult.ToString()));

بنابراین بطور کلی تابع ESxLabel نهایی بصورت زیر می باشد laugh:

 
public static System.Web.IHtmlString ESLabel
    (this System.Web.Mvc.HtmlHelper htmlHelper, string expression, string labelText)
{
    string strResult =
        string.Format("",
        expression, labelText);
    return (htmlHelper.Raw(strResult.ToString()));
}
                                 

برای انجام تمرینات بیشتر در زمینه ExtensionMethodها ، به وب سایت asp.net مراجعه کنید .

خب دوستان عزیز ، جلسه پنجم از مقالات آموزشی MVC به پایان رسید . در جلسه آینده با Area ها در MVC آشنا می شویم . با ما باشید cool

 


برچسب‌ها:

Extension MethodHtmlHelperHtmlHelper نویسیHtmlHelper های MVCپیاده سازی تابع Labelفراخوانی HtmlHelperنوشتن htmlhelper

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یک × پنج =