آموزش کار با View در ASP.Net MVC

آموزش کار با نما (View) در ASP.Net MVC :

در این درس به آموزش کار با نما (View) در پروژه های ASP.Net MVC خواهیم پرداخت. بخش نما (View) درواقع رابط کاربری و خروجی صفحه است که به کاربر نمایش داده می شود. View اطلاعات ارسالی از مدل (Model) را دریافت نموده و نمایش می دهد. همچنین به کاربر این امکان را می دهد تا اطلاعات مورد نظر خود را نیز تغییر داده و ویرایش کند.
تمامی نماها یا Views یک پروژه ASP.Net MVC بایستی در پوشه Views قرار بگیرند. متدهای اجرایی (action method) متفاوت یک کلاس Controller، می توانند View های مختلفی را اجرا نمایند. بنابراین، پوشه View به ازای هر کنترلر، حاوی یک پوشه مجزا با نام همان کنترلر است، تا بتواند اجرای View های مختلف را بهتر مدیریت کند. برای مثال، View هایی که از هر متد اجرایی مربوط به کنترلر HomeController تولید خواهند شد، در پوشه View>Home قرار می گیرند. به همین صورت، تمانی View هایی که از متدهای اجرایی کنترلر StudentController تولید می شوند، در پوشه Views>Student قرار خواهند گرفت، همانند تصویر زیر :

آشنایی با موتور کدنویسی Razor در View :

شرکت مایکروسافت موتور کدنویسی Razor را همراه با نسخه MVC3 ارائه داد. به وسیله Razor می توانید ترکیبی از کدهای سرور ساید و تگ های HTML را در یک نما Razor View بنویسید. زبان Razor از کاراکتر @ برای مشخص کردن کدهای سمت سرور به جای کاراکترهای قدیمی <% %> استفاده می کند. از هر دو زبان C# و Visual Basic می توان برای نوشتن دستورات Razor در View استفاده کرد. ساختار کدنویسی Razor، سرعت نوشتن دستورات برنامه نویسی را با کاهش تعداد کاراکترها و کلیدهای لازم جهت نوشتن یک View، بسیار افزایش می دهد. فایل های Razor View می توانند یکی از دو پسوند .cshtml یا .vbhtml را داشته باشند. جدول زیر، انواع فایل هایی که توسط ASP.Net Razor MVC پشتیبانی می شوند را به همراه پسوند آن ها نشان داده است :

درباره Razor و آموزش کدنویسی با آن در ASP.Net MVC به طور مفصل در درس های بعدی صحبت خواهیم کرد. در مرحله بعدی قصد داریم تا نحوه اضافه کردن یک نما (View) جدید به پروژه MVC5 را با استفاده از ویژوال استودیو 2.15 آموزش دهیم.

آموزش نحوه ایجاد یک View جدید در ویژوال استودیو :

در درس قبل، کنترلر StudentController و مدل Student Model را ایجاد کردیم. در این بخش می خواهیم یک View برای Student ساخته و ببینیم چگونه بایستی مدل و کنترلر را درون آن به کار برد. یک View ایجاد خواهیم کرد که توسط متد Index کنترلر Student Controller اجرا خواهد شد. برای این منظور، کلاس Student Controller را باز کرده و با راست کلیک کردن درون متد Index، همانند تصویر زیر، گزینه Add View را انتخاب کنید :

همانطور که در تصویر زیر نشان داده شده است، در پنجره Add View، مقدار نام View را Index قرار دهید. تنظیم و نگهداشتن نام View معادل نام متد اجرایی (action method) راهکار خوبی است، بنابراین دیگر مجبور نخواهید بود در هنگام فراخوانی View، نام View را به صراحت در متد اجرایی مرتبط با آن، تعیین کنید. بخش تمپلیت Scaffolding را انتخاب کنید. کادر کشویی Template تمپلیت های پیش فرض موجود جهت Create، Delete، Details، Edit، List و یا مقدار خالی Empty را جهت View نشان می دهد . تمپلیت “List” را انتخاب نمایید، زیرا می خواهیم در View لیست students را نمایش دهیم.

اکنون، از کادر کشویی Model class مقدار Student را همانند تصویر زیر انتخاب کنید. کادر کشویی Model Class به صورت خودکار نام کلیه کلاس های موجود در پوشه Model را نمایش می دهد. در درس های قبل، کلاس Student Model را ایجاد کرده بودیم، بنابراین نام این کلاس در کنار سایر کلاس ها نمایش داده خواهد شد.

کادر “Use a layout page” را تیک زده و همانند تصویر فوق، صفحه Layout.cshtml را برای view انتخاب کرده و دکمه Add را بزنید. در درس های بعدی به آموزش این که layout page چیست و چه کاربردی دارد، خواهیم پرداخت، اما برای این مرحله بدانید که عملکردی همانند متدپیج ها در ASP.Net دارد. زدن دکمه Add، همانند تصویر زیر، باعث ایجاد View با نام Index در مسیر View>Student خواهد شد :

همچنین، کد view ایجاد شده با نام Index.cshtml به صورت زیر خواهد بود :

@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>
 

همانطور که در کد view فوق مشاهده می کنید، این فایل هم شامل کدهای Razor و هم تگ های html است. کدهای درون خطی Razor با علامت @ شروع می شوند. همچنین @html یک کلاس کمکی html یا helper class است که از آن برای تولید کنترل های html در صفحه استفاده می شود. در درس های بعدی، به آموزش کامل ساختار دستور Razor و آموزش کار با html helper ها خواهیم پرداخت.

خروجی view فوق به صورت زیر خواهد بود :

در درس بعدی به آموزش نحوه ادغام و تعامل در بخش مدل Model، نما View و کنترلر Controller خواهیم پرداخت.