• ASP.NET Core 1 – قسمت 32
ASP.NET Core 1 – قسمت 32
1395/02/08 - 10:38:28 // MVC 5 & 6 // 0 نظر // 549 بازدید

در علم روز برنامه نویسی ، ماژول بندی کردن و به زبان ساده خورد کردن پروژه به بخشهای کوچکتر ، یک عامل کلیدی در به هدف رسیدن میباشد . کارهای گروهی بزرگ و احساس نیاز به Unit Testing و Design Pattern هایی مانند SOLID همگی مبتنی بر ریز ریز کردن بدنه پروژه بر بخشهای کوچکتر و استفاده هر چه بیشتر از مفاهیم OOP و قابلیتهای جدید تکنولوژیها می باشد .

بسمه تعالی

ASP.NET Core 1 قسمت سی و دو

در علم روز برنامه نویسی ، ماژول بندی کردن و به زبان ساده خورد کردن پروژه به بخشهای کوچکتر ، یک عامل کلیدی در به هدف رسیدن میباشد . کارهای گروهی بزرگ و احساس نیاز به Unit Testing و Design Pattern هایی مانند SOLID همگی مبتنی بر ریز ریز کردن بدنه پروژه بر بخشهای کوچکتر و استفاده هر چه بیشتر از مفاهیم OOP و قابلیتهای جدید تکنولوژیها می باشد . در ASP.NET MVC و کلن در روالهای پیروی کننده از MVC همین داشتم 3 عنصر اصلی Model و View و Controller یک طرح بسیار دلپذیر میباشد ، ولی خود همین اجزا هم باز می تواند به بخشهای کوچکتر تبدیل شود . مثلن هر View می تواند به بخشهای کوچکتری تقسیم شود . این همان مبحثی است که در WebForm به UserControl و در MVC به Partial View معروف است . Partial View ها در MVC Core زیاد تغییر خاصی نسبت به MVC 5 نداشته ، ولی در این بخش به بررسی کلی و نمایش کاربرد آنها خواهیم پرداخت.

برای شروع باید گفت ، Partial View هم یک View میباشد و مانند آنها پسوند CSHTML دارد . یکی از اهداف استفاده از Partial View ها بحث Reuse می باشد . اگر یک قسمت از یک صفحه را در بیشتر از 2 قسمت نیاز داشته باشیم استفاده کنیم ، دیگر منطقی نیست در یکجا آنرا از صفر تولید و برای قسمتهای بعدی Copy/Paste کنیم. بهتر است یک Partial View ایجاد و از آن در N قسمت بهره ببریم .

فرض کنید شما در N جا لیست رستورانها را نیاز دارید ، اینجاست که بهتر است یک PartialView ایجاد و با یک Helper ساده مانند زیر از آن استفاده کنید . شاید حتی لازم باشد از Partial View در یک Layout استفاده کنید . باید گفت که موردی نیست و اینکار رایج است و ایرادی ندارد .

نکته جالب اینجاست که Partial View از Model که در Parent View قرار دارد استفاده میکند و نیاز به تعریف یک Model جدید ندارد ، ولی فرض کنید برای یک Partial View به یک Model خاص و غیر از آنچه در Parent وجود دارد نیاز داریم ، اینجاست که View Component که در MVC Core یک قابلیت جدید است مورد استفاده قرار خواهد گرفت.

فرض کنید علاوه بر لیست رستورانها ، یک تبلیغ هم در Layout نیاز دارم که اصلن از یک Model دیگر استفاده و مقادیر را از دیتابیس Fetch میکند . اینجا دیگر در Model ما Advertisement نداریم و باید از یک ViewComponent که اصلن یک موجودیت مستقل است و نیازی به استفاده از Model متعلق به Parent View ندارد .

این دستور Invoke یک ماهیت مجزا را برای شما در View ها یا Layout صدا خواهد زد . در این بخش و بخش بعدی به بررسی این قابلیتها و معرفی ViewComponent خواهیم پرداخت و به صورت عملی از آنها استفاده خواهیم کرد .

در همین پروژه که داریم ، یک HTML Table برای ایجاد یک لیست از رستورانها داریم و نه شکل خوبی در سطح کد دارد و نه اگر لازم شد جای دیگر همین لیست را داشته باشیم ، دیگر این روند فعلی توجیه دارد . ضمن اینکه مدتهاست استفاده از Table منسوخ شده حداقل باید از DIV استفاده نمود.

با هم به سراغ Index View میرویم و تغییرات لازمه را اعمال و یک Partial View جدید هم خواهیم ساخت . مطابق زیر عمل کنید .

هنوز محتوای قبلی را حذف نکرده ام و فقط Loop را برداشتم و درون آن یک Partial View به نام Summary را صدا زدم . دقت کنید که هر آیتم در Restaurant یک ورودی برای @Html.Partial است و در ضمن باید این PartialView را بسازیم . ساخت این Partial View را دنبال خواهیم کرد .

این Partial View را میتوان در Shared Folder ساخت یا در همان فولدر Home . من این کار را در همان مسیر Home انجام میدهم . اگر یک Partial خیلی کاربرد داشت و در N جای مختلف نیاز به دسترسی داشتید ، آنرا در Shared بسازید.

به شکل زیر یک آیتم جدید بسازید .

 
 
 

وقتی فایل ساخته شد کدهای درونش را ابتدا حذف کنید . خوب میدانم که محتوای من یک رکورد رستوران در هر بار چرخش Loop ومقدار دهی توسط Index View خواهد بود پس Model این Partial را تعریف و مطابق زیر کار را دنبال میکنم.

این محتوای Partial View است .

 
 
 

Model در صفحه تایین شده و Name و Cuisineنمایش داده میشود و دو لینک Create و Edit هم از Index برداشته شده و در اینجا قرار گرفت . دقت کنید که دیگر Restaurant.ID نداریم و باید به دلیل استفاده از Model صفحه از Model.Id و ... استفاده شود .

کدهای درون Index هم حذف و Index به شکل زیر در آمده است .

 
 
 

به سادگی کدهای درون Index حذف و در عوض Partial View صدا زده شده است . خوب پروژه را ذخیره و اجرا کنید . خروجی به شکل زیر است .

 
 

از نظر ظاهری جالب نیست ولی به هدفمان رسیده ایم . اگر کمی CSS خرج کنیم از نظر شکل هم بهتر خواهد شد . به بخش بعدی می رویم و نگاهی به ViewComponent خواهیم انداخت .

دانلود سورس پروژه
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
نظرات کاربران
ارسال نظر