مقاله من نحوه ایجاد روش های کمکی درون خطی سفارشی در ASP.NET MVC توضیح داد که روش های کمکی چیست و چگونه می توان روش های کمکی درون خطی را در برنامه های MVC ایجاد و استفاده کرد. (توجه: اگر مقاله مربوط به کمک های درون خطی سفارشی در برنامه های MVC را نخوانده اید، توصیه می کنم ابتدا آن را بخوانید زیرا مربوط به این مقاله است). قبل از شروع کار با نحوه ایجاد روش های کمکی خارجی سفارشی، اجازه دهید فقط روش های کمکی خارجی و زمانی که باید از آنها استفاده کنیم را توضیح دهیم.
روش کمک کننده خارجی
روش های کمک کننده دو نوع هستند، روش های کمکی درون خطی و روش های کمک کننده خارجی. روش های کمکی درون خطی راحت هستند، زیرا در نما اعلام می شوند و پیچیدگی کد کم است. اما اگر کد در حال پیچیده شدن باشد، خواندن و درک کد از نظر ما دشوار خواهد بود. جایگزین برای چنین موقعیتی ایجاد یک روش کمکی خارجی است. روش های کمک کننده خارجی به عنوان روش های توسعه C# بیان می شوند. حالا بیایید با یک مثال شروع کنیم.
شروع به کار
ما از همان مثالی استفاده می کنیم که در مقاله خود نحوه ایجاد روش های کمکی درون خطی سفارشی در ASP.NET MVC برای نمایش لیست میوه ها و گل ها استفاده می کنیم (برای سادگی، از همین مثال استفاده می کنم). بیایید مثال خود را به یاد بیاوریم. کد زیر را به اکشن ایندکس Home Controller اضافه کردیم.
- public class HomeController : Controller
- {
- public ActionResult Index()
- {
- ViewBag.Fruits = new string[] {"Apple", "Mango", "Lemon"};
- ViewBag.Flowers = new string[] { "Rose", "Jasmine", "Sunflower" };
- return View();
- }
- public ActionResult About()
- {
- ViewBag.Message = "Your application description page.";
- return View();
- }
- public ActionResult Contact()
- {
- ViewBag.Message = "Your contact page.";
- return View();
- }
- }
محتوای نمای نمایه پس از استفاده از روش کمکی درون خطی به شکل زیر می باشد.
- @{
- 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>
ما از همان پروژه مثالی استفاده خواهیم کرد که قبلاً برای 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());
- }
- }
- }
در کد قبلی، یک متد کمکی خارجی سفارشی به نام "ListItems" ایجاد کرده ایم. آرایه رشته ها را به عنوان پارامتر می گیرد و HTML عنصر ul حاوی عنصر li را برای هر رشته در آرایه تولید می کند. دو پارامتر دارد، اولی یک شی HtmlHelper و دومی آرایه ای از رشته ها است. اولین پارامتر شی HtmlHelper با این کلمه کلیدی مشخص می کند که این یک متد پسوندی برای شی HtmlHelper است.
در روش کمکی ما از کلاس TagBuilder برای تولید عناصر HTML استفاده می کنیم. این کلاس در فضای نام System.Web.Mvc موجود است. برای تولید عنصر HTML، باید یک نمونه از کلاس TagBuilder ایجاد کنیم و نام عنصر HTML را که میخواهیم بسازیم را به عنوان پارامتر سازنده ارسال کنیم. به عنوان مثال، می توانیم عنصر ul را با استفاده از کلاس TagBuilder مانند شکل زیر ایجاد کنیم.
- var ulElement=new TagBuilder("ul");
متدها/خواص مفید کلاس TagBuilder عبارتند از:
- AddCssClass(string): یک کلاس CSS به عنصر HTML اضافه کنید.
- GenerateId(string): شناسه ای برای عنصر HTML ایجاد می کند. پارامتر string شناسه عنصر HTML را مشخص می کند. این روش جایگزین نقاط در id می شود.
- MergeAttribute (String, String, Boolean): یک ویژگی به عنصر HTML اضافه می کند. پارامتر اول نام ویژگی را مشخص می کند و پارامتر دوم مقدار ویژگی را مشخص می کند. سومین پارامتر بولی مشخص می کند که اگر همان ویژگی قبلاً وجود داشته باشد، باید جایگزین شود یا خیر.
- SetInnerText(string): محتوای متن عنصر HTML را تنظیم کنید.
- InnerHtml: این ویژگی به ما اجازه می دهد تا عناصر HTML را تودرتو کنیم. (در مثال ما از این ویژگی برای اضافه کردن عنصر li زیر عنصر ul استفاده کرده ایم).
نتیجه روش کمکی ما شی MvcHtmlString است که محتوای آن مستقیماً در پاسخ نوشته می شود. نشانهگذاری HTML را که با استفاده از کلاس TagBuilder به عنوان پارامتر ایجاد کردهایم میگیرد و آن رشته را رمزگذاری میکند تا نمایش آن امن باشد. حالا بیایید نمای شاخص را برای استفاده از روش کمکی خارجی خود به روز کنیم. محتوای نمای نمایه به روز شده مطابق شکل زیر است.
- @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>
دو نکته مهم زیر در محتوای قبلی نمایه نمایه وجود دارد.
- برای استفاده از متد کمکی باید فضای نام کلاس حاوی متد کمکی خود را در بالای نمای اضافه کنیم (در مورد ما، فضای نام CustomInlineHelper.Helpers است).
- ما باید پارامتر ویژگی پویا ViewBag را به نوعی که در روش کمک کننده خارجی خود تعریف کرده ایم، ارسال کنیم. (در مورد ما، نوع پارامتر آرایه ای از رشته ها است).
یک راه حل جایگزین برای اضافه کردن فضای نام برای متد کمکی ما وجود دارد. می توانیم آن فضای نام را به فایل Views/web.config اضافه کنیم. به طوری که روش کمکی ما همیشه برای استفاده در دسترس خواهد بود و نیازی نیست دستور use را در هر نما اضافه کنیم. محتوای فایل Views/web.config پس از افزودن فضای نام مطابق شکل زیر است (مانند شکل 1).
فضای نام را به فایل Views/web.config اضافه کنید (مانند شکل 1).
نتیجهگیری
ما میتوانیم کد پیچیده را در یک روش کمکی خارجی (روش گسترش) کپسوله کنیم و از آن در چندین نما استفاده کنیم. این همچنین دیدگاه ما را ساده تر و خواناتر می کند. ما همچنین می توانیم یک پروژه کتابخانه کلاس ایجاد کنیم و این روش های کمکی خارجی را در آن پروژه قرار دهیم. به طوری که دفعه بعد اگر به همان عملکرد نیاز داشتیم، فقط باید مرجع را به پروژه کتابخانه کلاس خود اضافه کنیم. من امیدوارم که این به شما کمک کند.
امیدوارم از خواندن مقاله لذت برده باشید.
کد نویسی مبارک!