View ها, Partial View ها و Layout ها در ASP.NET Core MVC
شناسه پست: 3286
بازدید: 2499

در الگوی View ،MVC ها وظیفه نمایش داده های برنامه و تعامل با کاربران را بر عهده دارد. آنها همچنین با جدا کردن markup رابط کاربری از سایر بخش های برنامه، به ایجاد اصل Separation of Concerns (SoC) در یک برنامه MVC کمک می کنند.

یک View، یک قالب HTML است که Razor markup در آن تعبیه شده است. یک view، پسوند cshtml. دارد و بر پایه زبان #C است. Razor markup با HTML markup تعامل برقرار میکند تا یک صفحه وب که به سمت کلاینت ارسال میشود را تولید کند.

به طور کلی، برای هر اکشن متد در کنترلرها، فایلهای view مربوط به آنها به صورت جداگانه وجود دارند و فایلهای view به داخل پوشه های هم نام با خود کنترلرها، group میشوند. View ها در پوشه Views در root اپلیکیشن ذخیره میشوند.

نگاهی به برنامه BookStore که در مقاله قبلی ایجاد کرده بودیم بیندازیم:

فایلها و پوشه ها در asp.net core mvc

همانطور که میبینید view ها برای BooksController در پوشه Views، داخل پوشه Books قرار گرفته اند. پوشه Books شامل view هایی برای متدهای CreateDeleteDetailsEdit و Index است. زمانیکه یک کاربر، به سمت یکی از این اکشنها، درخواست میفرستد، در نتیجه، اکشن متد مورد نظر در BooksController، از view مناسب مرتبط به خود برای ایجاد یک صفحه وب و برگرداندن آن به کاربر استفاده میکند.

در این مقاله، از مدل و کنترلری که در قسمت قبل ایجاد کرده بودیم با کمی تغییرات جزئی دوباره استفاده خواهیم کرد. اما view ها را از ابتدا خواهیم ساخت.

اکیدا توصیه می کنیم سرفصلهای کامل این سری آموزشی را مشاهده کنید: آموزش سریالی ASP.NET Core MVC.

برای دانلود سورس کد این مقاله، روی این لینک کلیک کنید: سورس کد View ها, Partial View ها و Layout ها.

ما این مقاله را به قسمتهای زیر تقسیم میکنیم:

تعریف Model و Controller

از model که قبلا داشتیم دومرتبه استفاده میکنیم:

برای ساده نگه داشتن کارها، می‌خواهیم view های indexdetails و edit را از ابتدا پیاده سازی کنیم. این، همه سناریوهای رایجی را که هنگام ایجاد view ها با آنها مواجه می شویم را پوشش می دهد.

اکنون اجازه دهید controller موجود خود را با حذف action method هایی که استفاده نمی کنیم کمی تغییر دهیم:

اکنون model و controller را آماده کرده ایم. مرحله بعدی ایجاد view ها است.

استفاده از Razor Markup برای ایجاد View ها

View هایی که مختص یک کنترلر هستند در پوشه Views/[ControllerName] قرار می گیرند. View هایی که بین کنترلرها به اشتراک گذاشته میشوند در پوشه Views/Shared قرار میگیرند.

برای ایجاد یک view، یک فایل جدید اضافه میکنیم و به آن نام یکسان با نام اکشن متد موجود در کنترلر مورد نظر با پسوند cshtml. را میدهیم.

برای مثال، برای ایجاد یک view برای اکشن Index در BooksController، باید یک فایل Index.cshtml در پوشه Views/Books ایجاد کنیم. با انجام این کار، ما یک view برای صفحه index خواهیم داشت.

در قسمت اول این سری آموزشی، ما از HTML Helper method ها برای ایجاد view های خود استفاده کرده بودیم. در این مقاله، قصد داریم با استفاده از tag helper ها، از یک رویکرد متفاوت برای ایجاد view ها استفاده کنیم.

Tag helper ها یک تجربه HTML پسند را برای توسعه فراهم میکنند. در بیشتر موارد، Razor markup با استفاده از Tag Helper ها شبیه به HTML استاندارد است. Tag Helper ها، نقل و انتقال صریح بین HTML و #C را در view های Razor کاهش می دهد.

در بیشتر موارد، Tag Helper ها، رویکرد جایگزین برای یک HTML Helper های خاص ارائه میدهند. اما درک این نکته مهم است که Tag Helper ها نمیتوانند جایگزین HTML Helper ها شوند، زیرا برخی از HTML Helper ها، معادل Tag Helper خودشان را ندارند. بنابراین، در بعضی موارد، باید از همان HTML helper ها استفاده کنیم.

Index View

حالا view ای را برای صفحه Index ایجاد کنیم:

ما اینجا از یک strongly typed model استفاده میکنیم و آن model، از نوع IEnumerable<book> است.

اول ما یک متغیر تعریف کردیم و اولین کتاب موجود در list را به آن اختصاص دادیم. ما این کار را برای گرفتن نام property ها و اختصاص آنها به header ها انجام دادیم:

ویژگی asp-for، نام ویژگی مورد نظر داخل model را به داخل HTML تولید شده استخراج میکند. بنابراین، ببینیم چطور یک label با نام ویژگی Title را render میکنیم:

عالی!

حالا ما باید تمام item های موجود در books collection را render کنیم. برای این منظور، ما از یک حلقه foreach استفاده میکنیم که به ما کمک میکند تا یک HTML table را render کنیم. ما میتوانیم label را به همراه مقادیر property ها render کنیم:

برای ایجاد action link ها، میتوانیم از ویژگی asp-action استفاده کنیم و برای پاس دادن پارامترها، میتوانیم از فرمت asp-route-{parametername} استفاده کنیم. بنابراین با این تفسیر، برای پارامتر id، از asp-route-id استفاده میکنیم:

Details View

حالا details view را ایجاد میکنیم:

ما این view را شبیه به Index View ایجاد کردیم. با این تفاوت که model اینجا از نوع Book است. برای دریافت نام property، میتوانیم از ویژگی asp-for استفاده کنیم:

برای نمایش مقادیر property، میتوانیم با استفاده از Model directive@ به خصوصیات درون model دسترسی داشته باشیم:

Edit View

به محض اینکه کار با Details view تمام شد، می‌توانیم کار خود را با ایجاد Edit view ادامه دهیم:

برای edit view نیز model از نوع Book است.

asp-validation-summary tag helper برای نمایش خلاصه پیغامهای اعتبارسنجی به کار میرود:

ValidationSummary.ModelOnly فقط پیغامهای اعتبارسنجی که در سطح model اعمال میشود را نمایش میدهد. ValidationSummary.All پیغامهای اعتبارسنجی در هر دو سطح property و model را نمایش میدهد.

برای هر property، یک label برای نمایش نام property، یک فیلد input برای ویرایش مقدارو یک عنصر span برای نمایش پیغامهای اعتبارسنجی مربوط به همان property ایجاد کرده ایم:

ما یک دکمه برای submit کردن form در قسمت پایین View داریم:

وقتی می‌خواهیم صفحه را بدون ارائه مقادیر معتبر ذخیره کنیم، بسته به تنظیماتی که برای asp-validation-summary ارائه می‌کنیم، خطاهای اعتبارسنجی نمایش داده می‌شوند. بنابراین، بیایید این را در عمل ببینیم.

وقتی مقدار را با ModelOnly تنظیم میکنیم:

اعتبارسنجی بدون خلاصه در asp.net core mvc

زمانیکه مقدار را به All تنظیم میکنیم:

اعتبارسنجی با خلاصه در asp.net core mvc

تمام. ما view ها را برای صفحات IndexDetails و Edit ایجاد کردیم.

مفهوم Partial View ها

یک partial view، یک فایل Razor markup (.cshtml) است که خروجی HTML را به داخل خروجی render شده در view دیگر تولید میکند.

Partial view ها به طور قابل توجهی در دو نوع سناریو مورد استفاده قرار میگیرند. اولین سناریو زمانی است که میخواهیم فایلهای markup بزرگ را به component های کوچکتر تقسیم کنیم. اگر فایل markup ما، بزرگ، پیچیده و از چند قطعه منطقی تشکیل شده است، بهتر است که هر قطعه را به یک partial view تقسیم کنیم. سپس کد در فایل markup قابل مدیریت میشود، زیرا markup فقط شامل ساختار کلی صفحه و شامل reference به partial view ها خواهد بود.

سناریوی دوم زمانی است که می‌خواهیم تکراری بودن محتوای رایج در بین فایل‌های markup را کاهش دهیم. هنگامی که ما نیاز به استفاده از عناصر نشانه گذاری یکسان در فایل های markup داریم، می توانیم آن محتوای markup را به داخل یک partial view منتقل کرده و از آن در view ها استفاده مجدد کنیم. به این ترتیب تغییرات آتی در آن markup باید فقط در یک مکان انجام شود و با این کار، ما ماژولار بودن کد خود را بهبود میبخشیم.

با این حال، Partial view، رویکرد توصیه شده ای برای حفظ عناصر مشترک در طرح بندی نمیباشد. ما بهترین روش برای ایجاد عناصر مشترک در طرح بندی را در بخش بعدی یاد خواهیم گرفت.

حالا فرض کنید که میخواهیم اطلاعات نویسندگان را در چند مکان در برنامه BookStore خود نمایش دهیم. ایجاد یک partial view برای نمایش اطلاعات نویسنده، رویکرد ایده آلی خواهد بود.

روی پوشه Shared راست کلیک کرده و Add -> View را انتخاب کنید:

اضافه کردن partial view در asp.net core mvc

در دیالوگ باکس Add MVC View، میخواهیم نام View را Authors_ بگذاریم، سپس گزینه Create as a Partial View را تیک بزنید و بر روی Add کلیک کنید:

اضافه کردن partial view در asp.net core mvc

بیایید مقداری متن ساختگی به فایل authors.cshtml_ اضافه کنیم:

حالا با استفاده از partial tag helper، این partial view را به داخل details view کتاب اضافه کنیم:

تمام. حالا میتوانیم ببینیم که صفحه جزییات کتاب، قسمت نویسندگان را نیز نمایش میدهد:

مثال partial view در asp.net core mvc

ما فقط با جای گذاری این partial view به داخل view های دیگر، میتوانیم این قسمت نویسندگان را در آنها نیز نمایش دهیم.

در این قسمت، ما یاد گرفتیم که چطور یک partial view را ایجاد کنیم و چطور از آن داخل یک view استفاده کنیم.

Layout ها در ASP.NET Core

اکثر برنامه های تحت وب دارای یک طرح بندی مشترک هستند که در حین حرکت بین صفحات، تجربه ای ثابت را برای کاربر فراهم می کند. در یک اپلیکیشن ASP.NET Core MVC، برای ارائه یک همچین تجربه ای بین صفحات، ما از یک فایل layout استفاده میکنیم.

layout به طور نمونه، شامل عناصر مشترک رابط کاربری همانند header, menu و یک footer است. خیلی از اپلیکیشنها، منابع رایجی همانند script ها و stylesheet ها را با یکدیگر به اشتراک میگذارند. ما تمام این عناصر مشترک را میتوانیم در یک فایل layout تعریف کنیم که میتواند به هر view داخل اپلیکیشن ارجاع داده شود. Layout ها به کاهش تکرار کد در view ها کمک میکند.

وقتی ما با استفاده از template پیشفرض ارائه شده توسط ویژوال استودیو، یک اپلیکیشن ASP.Net Core MVC را ایجاد میکنیم، آن یک فایل layout پیشفرض (Layout.cshtml_) تولید میکند و آن را به داخل پوشه Shared قرار میدهد. در حین ایجاد view ها، ما یک option برای مشخص کردن یک فایل layout داریم. ما بعدا میتونیم آن را با تنظیم ویژگی Layout داخل View تغییر دهیم:

فایل layout در solution explorer

حالا فایل layout پیشفرض را با یکدیگر بررسی میکنیم.

فایل layout، شامل یک بخش <head> در قسمت بالای layout است که شامل link ،Title به stylesheet و غیره است:

سپس یک بخش <body> داریم که شامل یک header به همراه menu است. body همچنین یک container div دارد که داخل آن، متد ()RenderBody فراخوانی میشود. این متد، صفحه content را render میکند:

پس از آن یک بخش <footer> وجود دارد.

ما معمولاً script ها را در انتهای سند بارگذاری می کنیم تا اطمینان حاصل کنیم که همه وابستگی ها بارگیری می شوند:

در این بخش، یاد گرفتیم که چگونه با استفاده از یک فایل Layout، ظاهر و شکل یکسانی را برای برنامه خود حفظ کنیم.

نتیجه گیری

در این مقاله، ما عناوین زیر را بررسی کردیم:

  • استفاده از Razor Markup برای ساخت View ها
  • استفاده مجدد از قسمتهایی از صفحه با استفاده از Partial View ها
  • ایجاد یک شکل و ظاهر مشترک برای اپلیکیشن با استفاده از فایلهای Layout 

در قسمت بعدی این سری آموزشی، ما مدیریت state در ASP.NET Core MVC را بررسی خواهیم کرد.

نویسنده

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