ویو کامپوننت ها در Asp.net Core

ویو کامپوننت ها در Asp.net Core

لینک کوتاه آموزش: https://www.nonevisan.ir/c/9fcb7

یک صفحه وب از چندین بخش ایجاد میشود برای مثال اگر صفحه اصلی سایتی را در نظر بگیرید منو بالای سایت محتویات درون سایت کادر جستجوی سایت که همه این اجزا مدل متفاوتی دارن پس برای اینکه بتوانید یک ویو Partial بسازید که دارای مدل باشد باید به سمت ویو کامپوننت ها بروید و ما در این آموزش ویو کامپوننت هارا به شما یاد میدهیم

8c4c6dbe-d944-4599-9d99-08fd43bcfb7d.jpg

این آموزش فاقد ویدئو آموزشی است

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

در ابتدا میخواهم کاربرد ویو کامپوننت هارا به شما بگویم و بعد آموزش را شروع کنم فرض کنید که شما یک سایت خبری دارید در صفحه نمایش خبر اطلاعات از جدول News خوانده میشود و به کاربر نمایش داده میشود حالا فرض کنید میخواهید اخبار های مشابه خبر فعلی هم در زیر خبر نمایش دهید پس مدل جدید میخواهید ولی صفحه نمایش خبر مدل دارد پس باید یک ویو کامپوننت بسازید تا بتوانید به Partial خبر های مشابه مدل جدیدی بدهید.

 

چگونه از ViewComponent استفاده کنیم

ابتدا باید در لایه اصلی پروژه خود یک پوشه به اسم ViewComponents ایجاد بکنید و بعد داخلش یک فایل کلاس ایجاد بکنید تا کد های خود را درون کلاس بنویسید طبق تصویر زیر البته نام کلاس بستگی به خودتان دارد

ViewComponent Class

بعد از اینکه کلاس را ایجاد کردید نوبت نوشتن کد درون کلاس است به کد های زیر دقت کنید

public class HomeSliderViewComponent : ViewComponent
    }
        ;private readonly ISiteService _siteService     
        public HomeSliderViewComponent(ISiteService siteService)     
        }     
            ;siteService = _siteService     
        {     

 

        ()public async Task<IViewComponentResult> InvokeAsync     
        }     
            ;()var data = await _siteService.GetAllActiveSlider     
            ;return View("HomeSlider", data)     
        {     
    {

اولین کاری که باید بکنید این است که کلاس از ViewComponent ارث بری بکند و جلوی View میتوانید دو ورودی در نظر بگیرید که اولی نام View صفحه و دومی که اجباری نیست مدل صفحه بعد این کار نوبت ساختن ویو است باید وارد پوشه Shared بشوید و یک پوشه به نام Components بسازید حالا اگر دقت کنید در ابتدا کد بالا HomeSliderViewComponent نوشته شده است باید یک پوشه با نام HomeSlider بسازید و بعد یک Partial View به نام اسمی که در ورودی اول دادید بسازید

در نهایت نوبت فراخوانی ViewComponet در صفحه ای است که قصد استفاده در آن را دارید که قطعه کد زیر را باید بنویسید تا فراخوانی انجام شود

await Component.InvokeAsync("SiteHeader")@

از آنجایی که متد Async است نوشتن await اجباری است و در آخر هم نام متد که HomeSliderViewComponent بود را میزارید که ViewComponent نیازی نیست باشد و میتوانید همان SiteHeader بنویسید داخل پرانتز بین دابل کوتیشن حالا میتوانید صفحات سایت خود را تبدیل به View Component بکنید تا هم کد ها تمیزتر و مرتب تر بشوند و هم بتوانید در یک صفحه از چند مدل استفاده کنید امیدوارم آموزش براتون مفید باشه

دنبال کردن ما در تلگرام