آموزش ASP.NET Core MVC کار با View

List View

برای نمایش لیستی از اطلاعات در قالب جدول از List View استفاده می شود.روش کار به صورت زیر است:

  • ابتدا به IStudentRepository کد زیر را اضافه می کنیم:

  • و در MockStudentRepository آن را پیاده سازی می کنیم:

  • و در کنترلر، تغییرات زیر را اعمال می کنیم:

  • حال یک RazorView به نام Index در پوشه ی View مربوط به این کنترلر می سازیم:
view index place

و کدهای زیر را در آن می نویسیم:

listview example

Layout View

برای جلوگیری از ایجاد کدهای تکراری HTML و به نوعی ایجاد Master Page از layout view  استفاده می کنیم.ابتدا پوشه ای به نام Shared میسازیم و در داخلش یک Razor layout ایجاد میکنیم:

layout view place

که کد های آن به این شکل خواهد بود:

layout view example

از این پس در هنگام نوشتن ویو ها از نوشتن تگ های html خودداری میکنیم چون هر چه که در ویو ها بنویسیم جایگزین ()RenderBody@ می شود. کد های ویو به شکل زیر باید نوشته شوند تا بتوانند از layout استفاده کنند:

view in renderbody

استفاده از LayoutView باعث استحکام و یکپارچگی صفحات وب اپلیکیشن می شود. LayoutView  در برابر تغییرات بسیار انعطاف پذیر است و هنگام تغییر قالب صفحه تنها کافی است که آن را تغییر دهیم. در غیر این صورت مجبور بودیم تمام صفحه ها را دستخوش تغییر کنیم.

Sections

بعضی مواقع نیاز است که قسمت خاصی از ویو در قسمت خاصی از layout جایگذاری شود. یا هنگامی که بخواهیم اسکریپت یا استایل خاصی فقط به یکی از ویو ها نسبت داده شود. در این مواقع از Section ها استفاده میکنیم. Section ها می توانند اختیاری یا اجباری باشند.

برای مثال میخواهیم یک فایل اسکریپت خاص فقط به یکی از ویو ها داده شود:

javascript file location

اگر لینک زیر را در layout بگذاریم تمام ویو ها از آن استفاده خواهند کرد، اما اگر نخواهیم اینطور عمل کنیم بهsection  ها نیاز پیدا میکنیم. در انتهای فایل layout قبل از بسته شدن تگ body کد زیر را باید اضافه کنیم:

render section example

و در انتهای فایل Razor View کد زیر را اضافه میکنیم:

using section in view

اگر در هنگام اجرا خطای زیر رخ داد بدان معناست که Section در ویو تعریف نشده است:

Section می تواند اختیاری یا اجباری باشد. کد زیر آن را اجباری می کند:

می توان از طریقی دیگر از بروز خطا جلوگیری کرد مانند زیر:

ViewStart

نوشتن کد آدرس دهی Layout در هر View کاری اشتباه هست، زیرا اگر تعداد view ها زیاد باشد، نگهداری و ویرایش کد ها کاری سخت می شود. از طرفی با تعداد زیادی از کد های تکراری رو به رو می شویم. برای حل این مشکل از ViewStart استفاده می کنیم، روش کار اینگونه است که ابتدا به پوشه ی View یک ViewStart اضافه میکنیم

که حاوی کد زیر است:

بعد از آن، کدهای layout موجود در هر ویو را حذف می کنیم. اگر بخواهیم چندین layout مختلف داشته باشیم باید چگونه از _ViewStart استفاده کنیم؟ پاسخ ساده است، فایل های ViewStart به صورت سلسله مراتبی (Hierarchical) هستند. یعنی می توان در هر پوشه ای در view یک ViewStart قرار داد:

hierarchical viewstart

حتی می توان با وجود ViewStart های مختلف باز هم کد های layout  را در خود ویو نوشت. در این صورت اولویت به شکل زیر است:

  1. کد layout در داخل view به صورت inline
  2. ViewStart در داخل پوشه ی مربوطه
  3. ViewStart در داخل پوشه ی Views

ViewStart ها کاربرد زیادی دارند، به مثال زیر توجه کنید:

ViewImports

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

lack of viewimports

اگر تعداد ویو ها زیاد باشد این رویه باعث نوشتن کد های تکراری زیادی خواهد شد و از طرفی ویرایش و نگهداری تعداد زیادی از ویو ها را سخت می کند. برای حل این مشکل از ViewImport استفاده می کنیم. ViewImport ها هم مانند ViewStart ها به صورت سلسله مراتبی هستند.  ابتدا یک ViewImport به پوشه ی View  اضافه کرده و درون آن شبیه کد زیر، namespace را اضافه می کنیم:

حال می توانیم بدون بروز خطا در ویو به شکل زیر کد نویسی کنیم:

ViewImport برای موارد زیر استفاده می شوند:

  • AddTagHelper@
  • RemoveTagHelper@
  • TagHelperPrefix@
  • Model@
  • Inherits@
  • Inject@

نوشته شده توسط mrbitmap علیرضا علی رمضانی

مقالات مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
برای ادامه، شما باید با قوانین موافقت کنید

جدیدترین مقالات

فهرست