کار با View ها در ASP.NET MVC (بخش دوم)

در این مقاله نگاهی خواهیم داشت به layout ها، که دارای عملکردی مشابه masterpage های ASP.NET کلاسیک میباشند. سپس partialview ها را به عنوان view هایی که قابلیت تکرار در هر جایی از برنامه مان را دارند معرفی میکنیم. partialview همان مفهوم user control را القا میکنند و در آخر، helper method ها را در MVC مرور میکنیم که در تولید المنت های HTML همچون input , select, label به شما کمک میکند.

مقالات مرتبط

در این مقاله نگاهی خواهیم داشت به layout ها، که همان masterpage های ASP.NET کلاسیک هستند. سپس partialview ها را به عنوان view هایی که قابلیت تکرار در هر جایی از برنامه مان را دارند معرفی میکنیم. partialview همان مفهوم user control را القا میکنند. و در آخر، helper method ها را در MVC مرور میکنیم که در تولید المنت های HTML همچون input , select, label به شما کمک میکند.

Layouts در MVC

Layout را میتوان همان Masterpage در ASP.NET کلاسیک فرض کرد. به عبارتی تمامی المان های موجود در layout در هر view ای که از این layout استفاده میکند، اعمال خواهد شد. از این جهت میتوان layout را نوعی template دانست.

برای ایجاد layout بر روی پوشه Views راست کلیک کرده و گزینه Add New Item را انتخاب و از لیست ظاهر شده، MVC 4 Layout Page (Razor) را انتخاب نمایید.

add layout

در هنگام نام گذاری layout باید دقت کنید که با underscore(_) شروع میشوند. فایل هایی با این نام به کاربر برگشت داده نمیشوند، بلکه این نحوه نام گذاری ، view هایی را قرار است رندر شود را از فایل هایی که آنها را support میکند، متمایز میکند. layout ها فایل های در بر دارننده view ها هستند که با (_) شروع میشوند..

خوب است به محتوی layout ایجاد شده نگاهی بیندازیم:

در قسمت title این layout دلیل اضافه شدن کد بلاک معروف زیر که در تمامی view های خود داشتیم بالاخره مشخص شد:

در این کد بلاک، مقداری را برای پراپرتی Title از ViewBag ست میکنیم. سپس این داده را از View به layout پاس میدهیم تا برای تیتر صفحه HTML به کابر برگشت داده شود.

قسمت مهم دیگری در layout ، فراخوانی متد RenderBody است. این متد تمامی قسمت های View را در layout قرار میدهد و به کاربر نمایش میدهد.

فایده دیگر استفاده از layout ، اضافه کردن reference ها به فایل های اسکریپت و CSS است. بدین طریق این فایل ها یک جا مجتمع شده و مجبوریم نیستیم در تک تک View ها این reference ها را اضافه کنیم: بعنوان مثال:

با توجه به ماهیتی که layout دارد محل مناسبی برای نوشتن navigation bar است. برای نوشتن header و footer هم از layout استفاده میکنیم. به عبارتی کدهای HTML مشترک بین تمامی view ها را در layout قرار میدهیم.

برای اعمال layout تعریف شده به view خود، در View موردنظر در codeBlock بالای صفحه کد زیر را اضافه میکنیم:

Partial Views

تا اینجای کار دیدیم که view ها با رندر کردن بخشی از مدل ما به عنوان یک user interface عمل میکنند. به این منظور، گاهی لازم است تا بتوانیم محتوی داینامیک به view خود اضافه کنیم. محتوی داینامیک در زمان اجرا تولید میشودو میتواند در هر request متفاوت باشد. این در حلی است که محتوی ایستاتیک (که همان HTML است) برای هر request ثابت باشد چون فقط یکبار در هنگام کدنویسی برنامه، نوشته شده است. روش های مختلفی برای افزودن محتوی داینامیک به view خود داریم.

partial view ها در folder، Views/Shared قرار میگیرند. بنابراین برای ایجاد یک partial view بر روی این پوشه راست کلیک کنید و گزینه Add->View را انتخاب کنید، تیک گزینه Create as a partial view را فراموش نکنید. میتوانیم partial view خود را strongly typed انتخاب کنیم و یک مدل برایش تعریف کنیم.

add Partial View

کدهای زیر را در partial view خود وارد کنید:

این کد ردیف جدول را برای هر object تولید میکند. حال برای استفاده از این partial view یک view دیگر ایجاد میکنیم: و کد زیر را در آن قرار میدهیم:

پارامترهایی که به متد Html.Partial پاس داده میشود، یکی نام partialview است و دیگری آبجکتی که در آن partialview استفاده خواهد شد. (پارامتر دوم اختیاری است) در هر تکرار حلقه foreach باعث میشود partial view رندر میشود و در نتیجه نهایی ثبت خواهد شد. از آنجایی که این partial view در پوشه shared قرار دارد ، سایر view ها هم میتوانند از آن استفاده کنند.

متد دیگری که برای رندر کردن partial view ها استفاده میشود، متد Html.RenderPartial() است. متد Html.Partial یک string برمیگرداند اما Html.RenderPartial خروجی برابر void دارد و نتیجه مستقیما در Response stream نوشته خواهد شد. به همین دلیل هنگام استفاده از renderpartial همچون یک C# statement در انتها semicolon خواهیم داشت.

Built-in HTML helper methods

این متدها در فریم رک MVC فراهم شده اند تا تولید تگ های ضروری HTML را برای ما فراهم کنند. در این قسمت مروری خواهیم داشت بر مهم ترین متد های توکار MVC:

یکی از مهم ترین متد های قابل استفاده متد beginform برای تولید تگ form میباشد، این متد همراه با using استفاده میشود تا عملیات dispose در C# هم بر روی آن اعمال شود. سایر input ها و submit داخل پرانتز جا میگیرند، شیء Html هم نمونه ای از کلاس HtmlHelper است که در تمام Viewها قابل دسترسی می‌باشد.

Overload دیگری از این متد را میتوان زمانی استفاده کرد که یک اکشن متد از کنترل دیگری را میخواهیم اجرا کنیم:

دسته ای دیگر از این متد ها هستند که برای دریافت ورودی از کاربر استفاده میشود، به مثال های زیر که همراه با خروجی آنها ارائه شده توجه کنید:

Text box

خروجی:

Text area

خروجی:

Password

خروجی:

Radio button

خروجی:

Hidden field

خروجی:

Links

برای تولید لینک ها هم خواهیم نوشت(پارامتر اول متن لینک، پارامتر دوم نام اکشن متد و پارامتر سوم نام کنترلر است)

خروجی:

گاهی لازم است تا تا به المنت های تولیدی خود برخی attribute ها را تعریف کنیم. بدین منظور یک object به عنوان پارامتر به helper method خواهیم فرستاد و attribute های موردنیاز را در آن ست میکنیم. برای ست کردن کلاس موردنیاز یک @ استفاده میکنیم تا با نام class که در C# رزرو شده اشتباه نشود:

خروجی: