در این مقاله نحوه ایجاد و استفاده از متدهای External Helper در برنامه های کاربردی MVC را برای شما شرح خواهیم داد.

در این مقاله ابتدا خواهیم آموخت که متدهای helper چه متدهایی هستند و چگونه می توانیم در برنامه های کاربردی، متدهای inline helper را ایجاد کرده و از آنها استفاده کنیم. (توصیه ما به شما این است که، اگر اطلاعاتی درباره متدهای inline helper در برنامه های کاربردی MVC ندارید، ابتدا مقاله ای در این باره را مطالعه کنید)

متدهای External Helper:

متدهای Helper دو نوع هستند، متدهای inline helper و متدهای external helper. متدهای Inline helper در دسترس هستند، چون آنها در View شناسایی شده اند و پیچیدگی کدها در آن ها کم است. اما اگر کد پیچیده شود، این متدها بسیار دشوار شده و درک آنها در View بسیار نامفهوم خواهد شد. نوع دوم، متدهای external helper هستند، متدهای External helper به عنوان متدهای extension در #C شناسایی می شوند. حال با یک مثال مفهوم را برای شما شرح خواهیم داد.

ما از مثال های زیادی که در این باره شرح داده ایم برای ایجاد این نمونه استفاده خواهیم کرد. در این مثال میخواهیم لیستی از میوه ها و گلها برای شما نمایش دهیم. یک کنترلر home ایجاد کرده و در index action کدهای زیر را وارد می کنیم.

 public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            ViewBag.Fruits = new string[] { "سیب", "انبه", "لیمو", "توت فرنگی" };
            ViewBag.Flowers = new string[] { "رز", "نرگس", "آفتابگردان", "نیلوفر" };   
            return View();
        }  
    }

کدهای مربوط به index view بعد از استفاده از متد inline helper را در زیر ببینید.

@{
    ViewBag.Title = "Home Page";
}

@helper ListItems(string[] items)
{
    <ul>
        @foreach (var item in items)
        {
            <li>@item</li>
        }
    </ul>
}

<div class="row">
    <div class="col-md-6">
        <h2>Fruits</h2>
        @ListItems(ViewBag.Fruits)
    </div>
    <div class="col-md-6">
        <h2>Flowers</h2>
        @ListItems(ViewBag.Flowers)
    </div>
</div>

میخواهیم پروژه ای یکسان با مثال قبلی که با متدهای inline helper ایجاد کردیم، بسازیم. حال برای نمایش لیستی از میوه ها و گلها، با استفاده از متد custom external helper، یک پوشه با نام Helpers ایجاد کرده و یک فایل ExternalHelper.cs درون آن اضافه میکنیم و کدهای زیر را به این فایل می افزاییم.

    namespace CustomInlineHelper.Helpers  
    {  
        public static class ExternalHelper  
        {  
            public static MvcHtmlString ListItems(this HtmlHelper htmlHelper, string[] items)  
            {  
                var ulElement=new TagBuilder("ul");  
                foreach (var item in items)  
                {  
                    var liElement=new TagBuilder("li");  
                    liElement.SetInnerText(item);  
                    ulElement.InnerHtml += liElement.ToString();  
                }  
                return new MvcHtmlString(ulElement.ToString());  
            }  
        }  
    }  

در کد قبلی، ما یک متد custom external helper ایجاد کردیم و آن را ListItems نامیدیم. که آرایه ای از رشته ها را به عنوان پارامتر می گیرد و کدهای HTML از عنصر نامرتبی که شامل عنصر مرتب برای هر رشته در آرایه است تولید میکند. این آرایه دو پارامتر دارد، اولی یک شیء از HtmlHelper و دیگری یک آرایه از رشته ها است. اولین پارامتر شیء HtmlHelper با یک کلید مشخص که یک متد extension برای شیء HtmlHelper است.

در متد helper، ما از یک کلاس TagBuilder برای تولید عنصر HTML استفاده می کنیم. این کلاس در فضای نام System.Web.Mvc namespace برای تولید عنصر HTML موجود است. ما نیاز داریم که یک نمونه از کلاس TagBuilder و ارسال نام عنصر HTML که می خواهیم به عنوان یک سازنده پارامتر ایجاد کنیم،

برای مثال، می توانیم عنصر لیست نامرتبی با استفاده از کلاس TagBuilder همانند کد زیر ایجاد کنیم.

var ulElement=new TagBuilder("ul"); 

در ادامه خصوصیات کارآمدی از کلاس TagBuilder را می بینیم:

1- (AddCssClass(string: یک کلاس CSS به عنصر HTML اضافه می کنیم.

2- (GenerateId(string: یک id برای عنصر HTML تولید می کند. پارامتر رشته برای عنصر HTML یک id تولید می کند. این متد در id، دوره ها را جابجا میکند. .

3- (MergeAttribute(String,String,Boolean: به عنصر HTML یک صفت اضافه میکند. پارامتر اول یک نام برای صفت مشخص می کند و پارامتر دوم یک مقدار برای صفت مشخص می کند. و پارامتر سوم boolean هم مشخص می کند که اگر یک صفت موجود بود، باید جایگزین شود.

4- (SetInnerText(string: مقادیر متن عنصر HTML را مشخص می کند.

5- InnerHTML: این خصوصیت اجازه دسته بندی عنصر HTML را به ما میدهد. (در این مثال، ما از این خصوصیت برای اضافه کردن عنصر لیست مرتب در زیر عنصر لیست نامرتب استفاده می کنیم).

نتیجه متد helpe، شیء MvcHtmlString است، مقادیری که به صورت مستقیم در پاسخ نوشته می شوند. این شامل کدهای HTML است که ما با استفاده از کلاس TagBuilder به عنوان یک پارامتر تولید کردیم و رشته ای که برای نمایش امن است کدگذاری می کند. حال View را برای استفاده از متد external helper تغییر می دهیم.

    @using CustomInlineHelper.Helpers  
    @{  
        ViewBag.Title = "Home Page";  
    }  
      
      
    <!--Custom Inline Helper Method-->  
    <div class="row">  
        <div class="col-md-6">  
            <h2>Fruits</h2>  
            @GlobalHelper.ListItems(ViewBag.Fruits)  
        </div>  
        <div class="col-md-6">  
            <h2>Flowers</h2>  
            @GlobalHelper.ListItems(ViewBag.Flowers)  
        </div>  
    </div>  
      
    <!--Custom External Helper Method-->  
    <div class="row">  
        <div class="col-md-6">  
            <h2>Fruits</h2>  
            @Html.ListItems((string[])ViewBag.Fruits)  
        </div>  
        <div class="col-md-6">  
            <h2>Flowers</h2>  
            @Html.ListItems((string[])ViewBag.Flowers)  
        </div>  
    </div>  

در ادامه دو نکته بسیار مهم و قابل توجه در رابطه با کدهای index view داریم.

1- ما نیاز داریم تا برای کلاس هایی که شامل متدهای helper ما هستند، فضای نام اضافه کنیم. (در این مثال ما از فضای نام CustomInlineHelper.Helpers استفاده کردیم).

2- ما نیاز داریم که پارامتر ویژگی پویا ViewBag را برای متد external helper که تعریف کردیم، پیش بینی کنیم. (در این مثال، نوعی از پارامتر که یک آرایه از رشته است)

یک راه حل دیگر برای اضافه نمودن فضای نام برای متد helper وجود دارد. ما میتوانیم آن فضای نام را به View و یا فایل Web.config اضافه کنیم، پس این فضاهای نام همیشه در دسترس ما هستند و نیاز نداریم تا آنها را برای هر View اضافه کنیم. دستورات View ها و Web.config بعد از اضافه کردن فضای نام به صورت زیر خواهد بود.

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.1.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="External_Helper_Methods" />
        <add namespace="External_Helper_Methods.Helpers" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

نتیجه گیری:

ما میتوانیم کدهای پیچیده را در یک متد external helper یا (extension method) خلاصه کنیم و از آنها در چند View استفاده کنیم. این کار View ها را بسیار خوانا و ساده میکند. همچنین می توانیم پروژه class library ایجاد کنیم و از این متدهای external helper در این پروژه ها استفاده کنیم.