کار با View ها در ASP.Net MVC

در این مقاله به بخش مهم دیگری از فریم ورک MVC، یعنی View ها خواهیم پرداخت. View حاوی نتیجه ای است که کاربر نهایتا در بروزر خواهد دید، از طرفی میدانیم نمیتوان بطور مستقیم از انتساب های انجام شده در سمت کنترلر در view استفاده کرد. در قسمت اول مقاله امروز به بررسی روش های ارسال داده از کنترلر به view خواهیم پرداخت. در بخش دوم هم مروری خواهیم داشت بر view engine بسیار کارای Razor که در MVC برای رندر کردن view ها استفاده میشود.

مقالات مرتبط

در این مقاله به بخش مهم دیگری از فریم ورک MVC، یعنی View ها خواهیم پرداخت. View حاوی نتیجه ای است که کاربر نهایتا در بروزر خواهد دید، از طرفی میدانیم نمیتوان بطور مستقیم از انتساب های انجام شده در سمت کنترلر در view استفاده کرد. در قسمت اول مقاله امروز به بررسی روش های ارسال داده از کنترلر به view خواهیم پرداخت. در بخش دوم هم مروری خواهیم داشت بر view engine بسیار کارای Razor که در MVC برای رندر کردن view ها استفاده میشود.

ارسال داده از کنترلر به view

V در MVC معادل View است. و حاوی نتیجه ای است که کاربر نهایتا در بروزر خواهد دید. view در واقع userinterface برنامه ماست. View قالبی است که اطلاعات رسیده از Model در آن نگهداری شده تا فریم ورک mvc با استفاده از این داده ها و دستورات صفحه ای را برای پاسخ به request تولید کند. میدانیم کنترلرها و view ها کاملا از هم مجزا بوده و نمیتوان بطور مستقیم از انتساب های انجام شده در سمت کنترلر در view استفاده کرد. در قسمت اول مقاله امروز به بررسی روش های ارسال داده از کنترلر به viewخواهیم پرداخت.

ViewBag

یکی از روش های ارسال داده از کنترلر به view استفاده از شی داینامیک viewbag است. هم در کنترلر و هم در View، پراپرتی ViewBag یک object از نوع داینامیک برمیگرداند. شما میتوانید هر نوع داده ای به این object در سمت کنترلر انتساب دهید و در سمت view داده خود را بازیافت کنید. متد index مقاله قبلی را به شکل زیر تغییر دهید: در اینجا زمان کنونی را به عنوان داده به View پاس میدهیم.

و در ادامه view متناظر با این Action Method را به این شکل تغییر میدهیم:

دقت کنید که نام property نوشته شده در کنترلر دقیقا باید با نام property نوشته شده در view یکی باشد. این موضوع در مورد نوع داده ارسالی هم صدق میکند. یعنی نوع داده ای که ما در کنترلر با Viewbag ست میکنیم باید با نوع داده ای که در View انتظار دریافت آن را داریم یکسان باشد.

علامت @ مورد استفاده از تگ های view engine خود mvc framework است. mvc framework از این موتور view برای رندر کردن و ایجاد view به HTML استفاده میکند که جایگزینی برای تگ های ASP.NET <% ... %> سابق است. این View Engine بسیار کارا Razor نامیده میشود.

ViewBag.Time@ به razor اعلام میکند که مقدار دریافتی را عینا در بروزر نمایش دهد.

حتی از داده رسیده از سمت کنترلر میتوانیم در متد ها هم استفاده کنیم:

اما از آنجایی که Razor انتظار دارد مقدار property در خروجی Html قرار داده شود ، تابعی که استفاده میکنیم نباید مقدار برگشتی برابر Void داشته باشد.

Model Object

روش دیگر برای ارسال داده از کنترلر به view، استفاده از Model Object هاست. برای استفاده از این مدل ابتدا در پوشه Models پروژه خود کلاس زیر را ایجاد میکنیم:

حال میتوان یک نمونه از این object را در متد Index ایجاد کرده و سپس به view متناظر با آن ارسال می‌کنیم

برای استفاده از این مدل ارسالی در سمت view، ابتدا باید نوع مدل ارسالی خود را مشخص کنیم. این کار با استفاده از تگ model@ انجام میشود (به کوچک بودن حرف m توجه کنید):

دقت کنید که برای تعریف مدل، از نام کامل آن به همراه namespace استفاده شده است. حال برای استفاده از اعضای این مدل از شی داینامیک Model (به بزرگ بودن حرف M توجه کنید) بهره میبریم:

میبینید که هنگام استفاده از این روش intellisense هم به کمک شما می آید و view دقیقا میداند چه property هایی را باید از این مدل انتظار داشته باشد. به این روش strongly typed view گفته میشود. احتمالا این نام را در پنجره ایجاد یک view جدید دیده اید. استفاده از این روش به شما یک امکان جدید را هم فراهم میکند. این امکان scaffolding است. scaffolding یک تولید کننده خودکار کد برای view است.

scaffolding

ViewData

ViewData روش دیگر ارسال داده به View است. viewdata به صورت یک dictionary پیاده سازی شده و دارای یک کلید از نوع string است. مانند ViewBag هر داده ای را میتوانید به Viewdata انتساب دهید با این تفاوت که اگر بخواهید عملیاتی را روی object رسیده انجام دهید باید عملیات casting را انجام دهید. به مثال زیر توجه کنید:

حال اگر بخواهیم در View زمان را به صورت shortTimeString داشته باشیم، باید بنویسیم:

Razor

تا اینجای کار مشخص شد که razor یک زبان برنامه نویسی نیست بلکه تلفیقی از کدهای سی شارپ (یا VB) با تگ های HTML است. file extention این view engine برای سی شارپ cshtml و برای VB، vbhtml میباشد.

عبارات شرطی در Razor

یک عبارت شرطی با if@ شروع می‌ شود و در ادامه آکولاد باز و بسته می آید:

این نکته را هنگام کار با razor بخاطر بسپارید: اگر یک خط با کاراکتر > شروع شود ، Razor آن را بلاکی از html تفسیر میکند که باید عینا در خروجی نوشته شود. اگر خط با تگ html شروع نشود Razor کل خط را یک کد C# فرض خواهد کرد.

حلقه ها در Razor

یک عبارت شرطی با for@ شروع می‌ شود و در ادامه آکولاد باز و بسته می آید:

در کد زیر هم که پیاده سازی foreach در Razor را نشان میدهد، آیتم موجود در آبجکت Request.ServerVariables رابرمیگرداند. این آبجکت شامل اطلاعاتی راجع به وب سرور شماست. یک حلقه foreach برای نمایش نام هر آیتم استفاده شده که یک < li > جدید ایجاد میکند:

Switch

مواردی پیش می آید که یک خط در Razor نه با یک تگ HTML شروع میشود و نه با یک C# statement. در این موارد اگر بخواهیم عینا در خروجی نشان داده شوند باید از :@ استفاده کنیم. کاربرد این قضیه را در switch زیر ببینید:

این switch داخل یک تگ < h4 > قرار داده شده و مواردی که نه کد سی شارپ هستند و نه تگ اچ تی ام ال، اما باید در خروجی نمایش داده شوند با تگ :@ نوشته شده اند.

Code Block

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

نکات تکمیلی

برای نمایش خود علامت @ در خروجی باید دوبار این تگ را تکرار کنید، مثلا در ایمیل یا توئیتر خواهیم داشت:

در مواردی که میخواهید یک HTML را در بروزر نشان دهید باید به صورت زیر عمل کنید. فرض کنید یک متغیر ساده به اسم link داریم که یک کد html به آن نسبت داده ایم:

خروجی را ببینید:

html.raw

برای نمایش محتوی لینک ، کد را به شکل زیر تغییر میدهیم:

html.raw2