در این پست از وبسایت پرووید در رابطه با بررسی قسمت View در ASP.NET MVC #2 صحبت خواهیم کرد. معماری MVC از معمول ترین و پرکاربردترین معماری های ساخت وب اپلیکیشن ها می باشد.

ذر قسمت قبلی از این آموزش در رابطه با بررسی Razor View Engine صحبت کردیم.

ساختن یک View جدید

همانطور که در قسمت های قبلی از این آموزش دیدید، ما یک Controller با نام StudentController و یک کلاس Model با نام Student را به پروژه اضافه کرده ایم. و اما به منظور ساختن یک View جدید باید یکی از action method های درون StudentController را انتخاب کرده و برای آن یک View بسازیم. ما برای مثال اول از Action Method ی با نام Index استفاده می کنیم. بنابراین فایل StudentController را باز کرده و درون بدنه ی متد Index راست کلیک کنید و از منویی که باز می شود گزینه Add View.. را انتخاب کنید. این موضوع در تصویر زیر نیز نشان داده شده است.

در پنجره ی Add View نام View را به همان Index تنظیم کنید و آن را تغییر ندهید. لطفاً دقت کنید که به عنوان یک Best Practice باید نام View و نام Action Method ی که می‌ خواهد از آن استفاده کند یکسان باشند. در غیر این صورت باید در درون Action Method به صورت Explicit اعلام کنید که کدام View را می‌خواهید رندر کنید.

بسته ی آموزش ویدئویی تبدیل شدن به یک توسعه دهنده Full-stack در دات نت سری دوم

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی تبدیل شدن به یک توسعه دهنده Full-stack در دات نت سری دوم نیز دیدن کنید.

علاوه بر این در قسمت زیر میتوانید Scaffolding Template را نیز انتخاب کنید. در واقع Scaffolding Template ها الگوهایی هستند که امکان ساخته شدن View ها را به ما میدهند تا حجم کمتری از کد نویسی را خودمان انجام بدهیم. ما از الگوی List استفاده می کنیم چرا که میخواهیم لیستی از Student ها را در درون View نشان بدهیم.

با انجام این کار ویژوال استودیو به صورت خودکار فایل های Razor را طوری با تگ های HTML پر می‌کند که بتواند لیستی از آیتم ها را نشان بدهد. علاوه بر انتخاب کردن Scaffolding Template برای یک View باید یک Model را نیز تعیین کنید. این پنجره به طور خودکار تمامی کلاس هایی که در درون فولدر Model قرار گرفته اند را به عنوان Model Class شناخته و آنها را برای ما لیست کرده است. از قسمت زیر میتوانید کلاس Student را به عنوان Model ی که برای این View استفاده خواهد شد در نظر بگیرید. این موضوع در تصویر زیر نیز نشان داده شده است.

علاوه بر این با علامت زدن قسمت Use a layout page و سپس انتخاب کردن _Layout.cshtml  و سپس زدن دکمه Add می توانید یک الگوی از پیش تعریف شده را نیز برای این View در نظر بگیرید. در واقع فایل layout شبیه به فایلهای Master Page در ASP.NET Web Forms عمل می کند. در رابطه با فایل های Layout در قسمت های بعدی به طور مفصل صحبت خواهیم کرد. تصویر زیر Solution Explorer را نشان می دهد که حاوی یک فولدر با نام Student در فولدر View می باشد که در درون آن فایل Index.cshtml به عنوان یک View برای Action Method ی با همین نام در درون StudentController تعریف شده است.

اگر این فایل را باز کنید خواهید دید که این فایل حاوی کد های سی شارپ یعنی کد های سمت سرور می باشد و هم حاوی تگ های HTML می‌باشد.

@model IEnumerable<MVC_BasicTutorials.Models.Student>

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.StudentName)
</th>
<th>
@Html.DisplayNameFor(model => model.Age)
</th>
<th></th>
</tr>

@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.StudentName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
@Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
</td>
</tr>
}

</table>

به منظور نوشتن کدهای سمت سرور از علامت @ استفاده می شود. دستور @HTML استفاده از یک Helper Class را برای تولید تگ های HTML را نشان می دهد. در قسمت زیر یک تصویر از این موارد را مشاهده می‌کنید. از شما دعوت می کنیم که از بسته ی آموزش ویدئویی HTML5 دیدن کنید.

در رابطه با Razor Syntax و کدهای درون View ها در قسمت های بعدی به طور مفصل صحبت خواهیم کرد.

با اجرا کردن برنامه تصویر زیر نشان داده خواهد شد.

نکته ای که قصد داریم به آن اشاره کنیم این است که تمامی ویو ها در ASP.NET MVC از کلاسی با نام WebViewPage که در درون Namespace ای با نام System.Web.Mvc قرار داده شده است ارث بری می ‌کنند.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن با ASP.NET MVC و React

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن با ASP.NET MVC و React نیز دیدن کنید.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک MVC استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل توسعه وب اپلیکیشن با ASP.NET MVC مشاهده کنید.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *