در این مقاله چگونگی استفاده از کامپوننت view هم از طریق view و هم از یک متد عملیاتی را توضیح خواهیم داد همچنین درباره ی چگونگی به اشتراک گذاری یک کامپوننت view بین چندین پروژه نیز صحبت خواهیم کرد.

کامپوننت View به شما اجازه ی ساخت قطعات قابل استفاده ی مجدد از منطق کسب و کار که همراه با یک UI در چندین جای مختلف در اپلیکیشن است را به شما می دهد ... و سپس به شما اجازه ی به اشتراک گذاری منطق کاری در چندین پروژه را می دهد. در این جا نحوه ی چگونگی فراخوانی و به اشتراک گذاری آن ها را توضیح خواهیم داد.

در مقاله ی پیشین تصمیم گرفتیم که یکی دیگر از ویژگی های جالب ASP.NET Core را بررسی کردیم: کامپوننت view بسیار شبیه یک کلاس کوچک Controller است به جز موردی که شما کامپوننت view را از view برای اضافه کردن HTML به view می گیرید. درواقع این کار منطق و UI را به یک پکیج قابل استفاده ی مجدد تبدیل می کند.

فراخوانی کامپوننت view

در یک view می توانید یک کامپوننت view را به دو روش بگیرید: استفاده از ویژگی های کامپوننت view یا اضافه کردن یک تگ Helper به view.

از نظر ما، ساده ترین روش فراخوانی متد InvokeAsync از ویژگی های کامپوننت های view، ارسال نام کامپوننت view و پارامتر های آن است. شما باید اینجا از کلمه ی کلیدی await برای اطمینان از اینکه شئ های Task شما قبل از اتمام پردازش view حل شده است استفاده کنید. اگر شما کلمه ی کلیدی await را حذف کنید Razor رشته ای از اشیاء Task که به وسیله ی متد InvokeAsync در صفحه ی شما بازگردانده می شود را نشان خواهد داد.

بنابراین برای فراخوانی CustomerAddress، A123 را به عنوان id مشتری ارسال می کنیم. از این کد برای یک View استاندارد استفاده خواهیم کرد:

@await Component.InvokeAsync("CustomerAddress", "A123")

تنها نکته ی مهم این متد این است که هیچ پشتیبانی IntelliSense برای وارد کردن نام یا پارامتر های کامپوننت استفاده نکنید.

فراخوانی IntelliSense برای کامپوننت های view

اگر شما ترجیح می دهید که از پشتیبانی IntelliSense استفاده کنید بنابراین شما نیاز خواهید داشت که از تگ Helper برای فراخوانی کامپوننت های view استفاده کنید.با یک تگ Helper یک تگ به view خود اضافه می کنید که نام کامپوننت view شما را فراخوانی می کند. نام تگ باید نام کامپوننت view با حروف کوچک و با اتصالات قبل از هر حرف بزرگ باشد (که سبک kebob نامیده می شود). همچنین نام تگ نیاز به پیشوند vc دارد که به آن اضافه شده است. یک کامپوننت view کلاس CustomerAddress نامیده می شود بنابراین با یک تگ به نام vc:customer-address نمایش داده می شود.

هر پارامتری که به متد InvokeAsync ارسال می شود باید توسط ویژگی های تگ جدید شما را پشتیبانی کند. نام attribute باید با نام پارامتر مطابق باشد و دوباره باید به فرمت kebob تبدیل شود. برای فراخوانی کامپوننت view مربوط به CustomerAddress به عنوان یک تگ Helper ، A123 را به عنوان پارامتر به CustomerId ارسال می کنیم ما یک عنصر مانند زیر به view اضافه خواهیم کرد.

<vc:customer-address customer-id="A123" />

فقط این مورد کار می کند اگرچه شما کامپوننت های view  را از طریق یک دستور addTagHelper  در پروژه ی خود استفاده کرده باشید و یا حتی اگر کامپوننت view شما در همان پروژه به عنوان view که در حال استفاده از آن باشد. شما می توانید آن را در view ها با استفاده از تگ های خود یا اضافه کردن آن به فایل _ViewImports.cshtml در پوشه view های پروژه برای استفاده از کامپوننت های view در هر view قرار دهید. دستور addTagHelper دو پارامتر می پذیرد: نام کامپوننت های view خود همراه یا بدون کاراکتر wildcard (*) و فضای نام کامپوننت های view. یک addTagHelper در فایل _ViewImports نظیر عنصر زیر به شما اجازه ی استفاده از هر تگ Helper در فضای نام CustomerManagement در هر view را می دهد:

@using SalesOrder
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, CustomerManagement

با addTagHelper در اینجا IntelliSense در یک View شما را از طریق تایپ کردن نام تگ و ارائه ی ویژگی های پارامتر منتقل می کند.

 کامپوننت های view در متد های Controller

به عنوان یک پاداش، شما همچنین می توانید از کامپوننت های view در متد های عملیاتی استفاده کنید بطور معمول شما از متد های عملیاتی در بازگردانی HTML به فایل های json استفاده خواهید کرد.  ViewComponent مربوط به helper کلاس Controller نام کامپوننت view شما و یک شیئ anonymous می پذیرد نام property های شیئ anonymous باید با نام پارامتر های متد InvokeAsync تطابق کند. این مثال کامپوننت view مربوط به CustomerAddress را از طریق ارسال A123 به پارامتری به نام CustomerId واکشی می کند.

public IActionResult Index() {
  return ViewComponent("CustomerAddress", new { CustomerId = "A123"});
}

بجای ارسال نام کامپوننت view خود می توانید نوع شیئ را با دادن برخی پشتیبانی های IntelliSense مانند مثال زیر ارسال کنید.

return ViewComponent(typeof(CustomerAddressViewComponent), new { CustomerId = "A123"});

شما باید از نام واقعی کلاس کامپوننت view خود با این syntax استفاده کنید. اگر شما از ویژگی ViewComponent برای نام گذاری کامپوننت view خود استفاده کرده اید، بنابراین باید اینجا از نام کلاس استفاده کنیم.

اشتراک گذاری در پروژه ها

نه تنها شما می توانید یک کامپوننت view را در یک پروژه بطور مجدد استفاده کنید بلکه می توانید کلاس کامپوننت view را در پروژه های چندگانه به اشتراک بگذارید(اما فقط فایل کلاس کامپوننت view و نه view های مرتبط با آن) این مسئولیت پروژه است که از کامپوننت های view برای ارائه یک view در یک فایل مناسب استفاده کند.

برای پشتیبانی این موضوع بجای تعریف کامپوننت view های خود در یک پروژه  ASP.NET Core کلاس را در یک پروژه Class Library تعریف کنید. پروژه ی Class Library شما نیاز به برخی کتابخانه های ASP.NET Core برای پشتیبانی کلاس های ASP.NET Core و interface های استفاده شده در کامپوننت view شما، خواهد داشت برای مطالعه ی این موردی که در این مقاله نوشته ایم، ما پکیج Microsoft.AspNetCore.All NuGet را به پروژه ی Class Library خود اضافه کرده ایم که احتمالا کتابخانه های بیشتری از آنچه نیاز داریم وجود دارد.

برای استفاده از کلاس کامپوننت view در یک پروژه ASP.NET Core ابتدا یک ارجاع به Class Library که حاوی کامپوننت view شماست را اضافه می کنیم. پس از آن شما فقط باید از متد Component.InvokeAsync در view ها یا متد های عملیاتی استفاده کنید. اگر شما می خواهید که از syntax مربوط به تگ Helper در view های خود استفاده کنید شما نیاز به اضافه کردن دستور addTagHelper دارید که به فضای نام Class Library شما ارجاع می دهد.

حقیقتا تنها ایراد کامپوننت view این است که یک پکیج مرتب مانند آنچه Web Parts در نسخه ی اصلی ASP.NET انجام داد تولید نمی کند. از سوی دیگر این مورد اولین تکنولوژی ASP.NET است که همه ی انواع اشتراک گذاری پروژه ها را پشتیبانی می کند. از آن جایی که اشتراک گذاری هماهنگی را افزایش می دهد و حجم کاری را کاهش می دهد این تکنولوژی بسیار عالی است.