آموزش کار با ViewComponent در ASP.NET CORE

در این قسمت از سری آموزش های Asp.net Core به آموزش کار با ViewComponent میپردازیم. بسیار شبیه به پارشیال ویو ها هستند، اما بسیار قدرتمند تر. ViewComponent یکی از ویژگی‌هایی است که سازماندهی کد را بهبود می‌بخشد و قابلیت استفاده مجدد کد را با کپسوله کردن منطق رندر یک نمای جزئی ارتقا می‌دهد.

ViewComponent چیست ؟

ویو کامپوننت ها در ASP.NET Core یک الگوی برنامه‌نویسی برای ساختن بخش‌های قابل استفاده مجدد و مستقل از رابط کاربری است. این بخش‌ها به شما اجازه می‌دهند تا لاجیک و ویو را در قالب‌هایی کوچک‌تر و سازمان‌یافته‌تر جدا کنید. ViewComponent ها بسیار شبیه به partialView هستند، اما از قدرت بیشتری برخوردارند. partial view ها از Model Binding استفاده نمی کنند و تنها وابسته به اطلاعاتی اند که به آن ها پاس داده می شود.

چرا از ViewComponent استفاده کنیم؟

• جداسازی لاجیک و ویو : می‌توانید منطق کسب‌وکار را از HTML جدا کنید.
• قابل استفاده مجدد: بخش‌های مختلفی از رابط کاربری را در صفحات مختلف استفاده کنید.
• استقلال: ViewComponentها مستقل از کنترلرها کار می‌کنند.
• قابلیت تست: آسان‌تر شدن تست منطق و رفتار رابط کاربری.

آموزش ساخت یک ViewComponent

به زبان ساده میتوان گفت ViewComponent بسیار شبیه به partialView میباشد، با این تفاوت که یک Mini Controller در کنار خود دارد. و این Mini Controller باعث قدرتمند تر شدن آن میشود. در ادامه با مراحل ایجاد ViewComponent با ما همراه باشید.

ایجاد فولدر های مورد نیاز ViewComponent

• ایجاد یک پوشه با نام ViewComponents در مسیر روت پروژه. در این فولدر کلاس های مربوط به ویو کامپوننت ها قرار میگیرد.

/ViewComponents/...

• ایجاد یک پوشه با نام Components در مسیر پوشه Shared. در این فولدر ویو های مربوط به ویو کامپوننت ها قرار میگیرد.

/Views/Shared/Components/...

• ایجاد یک پوشه با نام ViewComponentModels در مسیر فولدر Models پروژه. در این فولدر مدل های مربوط به ویو کامپوننت ها قرار میگیرد.

/Models/ViewComponentModels/...

ایجاد کنترلر برای ViewComponent

• در پوشه ViewComponents ای که در مرجله قبل ایجاد کردیم، یک کلاس با نام ویو کامپوننت دلخواه خود ایجاد میکنیم. در این مثال نام ویو کامپوننت ما Products میباشد. حتما باید در آخر نامی که قرار میدهید از ViewComponent استفاده کنید.

/ViewComponents/ProductViewComponent

• کلاس ما حتما باید از ViewComponent اکستند شود. تا قابلیت های یک ViewComponent به آن اضافه شود

public class ProductViewComponent : ViewComponent

• در کلاسی که ایجاد کردیم نیاز به یک متد از جنس IViewComponentResult نیاز دارد که نام آن حتما باید Invoke باشد. و خروجی آن هم یک View میباشد.

public IViewComponentResult Invoke()
{
return View();
}

ساخت View برای ViewComponent

ویو ها باید در پوشه Components که در پوشه Shared ساختیم اضافه شود. ابتدا در پوشه Components یک پوشه به نام ViewComponent ای که ساختیم ایحاد میکنیم. مثلا اگر نام وسو کامپوننت ما  ProductViewComponent باشد باید نام پوشه ما Product باشد. و در این پوشه اقدام به افزودن ویو خود میکنیم.

اولین مکانی که ViewComponent دنبال ویو میگردد در مسیر زیر است.

/Views/Shared/Components/ViewName

فراخوانی و نمایش ViewComponent

برای فراخوانی میتوانید از کد های زیر استفاده کنید. مقدار اولی که دریافت میکند نام ViewComponent  و مقدار دوم نام مدل است.

@await Component.InvokeAsync("Product")
@await Component.InvokeAsync("Product",ProductModel)