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

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

 آموزش 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

 

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

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

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

2 × یک =

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

دانلود کتاب " سرویس سرچ کنسول گوگل - گوگل وبمستر تولز سابق (نسخه جدید) "

راهنمای کامل سرچ کنسول جدید گوگل

عضویت در کانال تلگرام «مجـلـه آمـوزشـی محـتـوا» !

کتاب گوگل ادز

دانلود کتاب "آموزش سرویس گوگل ادوردز"

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"