اضافه کردن View ( آموزش ASP.NET پروژه محور )

سایر مقالات سری آموزش ASP.NET پروژه محور  :

شروع به کار با ASP.NET MVC 5

افزودن کنترلر 

 در این بخش، کلاس HelloWorldController را تغییر می‌دهیم تا بتوانیم از فایل‌های قالب view استفاده کنیم و پروسه ساخت پاسخ HTML را از دید مشتری(client) محفوظ نگه داریم.
شما با استفاده از Razor view engine یک فایل قالب view خواهید ساخت. فایل‌های قالب view که با razor ساخته می‌شوند دارای پسوند .cshtml می‌باشند و از روش مناسبی برای ساخت خروجی HTML با استفاده از C# بهره می‌برند. Razor تعداد کاراکترها و ضربه‌کلید(keystroke)هایی را که برای نوشتن یک view لازم است کاهش می‌دهد و کدنویسی روان و سریع را ممکن می‌سازد.
در حال حاضر متد Index یک رشته را همراه با یک پیغام برمی‌گرداند که به طور مستقیم در کلاس کنترلر کد شده و امکان تغییر آن وجود ندارد. متد Index را به گونه‌ای تغییر دهید تا یک شی view را برگرداند. مانند کد زیر:

public ActionResult Index() 
{ 
    return View(); 
}

متد Index در بالا از یک قالب view برای ساخت پاسخ HTML به مرورگر استفاده می‌کند. متدهای کنترلر مثل Index به طور کلی یک ActionResult را برمی‌گردانند نه نوع‌های ابتدایی مانند رشته.
در فولدر Views\HelloWorld کلیک راست کنید و گزینه Add ، سپس MVC 5 View Page with(Layout Razor) کلیک راست کنید.

آموزش asp.net پروژه محور

در پنجره Specify Name for Item کلمه Index را وارد کنید و Ok را کلیک کنید.

آموزش asp mvc 5

در پنجره Select a Layout Page گزینه پیش‌فرض _Layout.cshtml را انتخاب و OK را کلیک کنید.

کلاس asp مشهد

در شکل بالا Layout انتخاب شده در پوشه View\Shared قرار می‌گیرد. اگر از قبل فایل Layoutرا در پوشه دیگری ساخته‌اید، می‌توانید آن را انتخاب کنید. در مورد فایل Layout جلوتر در این سری آموزشی صحبت خواهیم کرد. فایل MvcMovie\Views\HelloWorld\Index.cshtml ساخته خواهد شد.

آموزش Asp مشهد

Markup مشخص ‌شده زیر را اضافه کنید.

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

بر روی Index.cshtml راست کلیک کنید و View In Browser را انتخاب کنید.

asp مشهد

برنامه را اجرا کنید و در مرورگر به آدرس کنترلر HelloWorld بروید(http://localhost:xxxx/HelloWorld). متد Index در کنترلر شما کار زیادی نمی‌کند؛ تنها کد return View() را اجرا می‌کند که مشخص می‌کند که متد باید از قالب view برای پاسخ مرورگر استفاده کند. از آنجایی که به طور صریح نامی برای قالب view انتخاب نکرده‌اید، ASP.NET MVC به طور پیش‌فرض از فایل view به نام Index.cshtml در فولدر \Views\HelloWorld استفاده می‌کند. شکل زیر رشته”Hello from our View Template!” را نشان می‌دهد که صریحا در view  آمده است.

کلاس طراحی وب مشهد

دقت داشته باشید که در tab عنوان صفحه عبارت “Index My ASP.NET Appli” آمده است و لینکی در بالای صفحه به نام Application name وجود دارد. بسته به اینکه چقدر صفحه مرورگر را کوچک یا بزرگ کرده‌اید باید به روی لینکی که با سه خط نمایش داده شده (و دور آن خط زرد دیده می‌شود) کلیک کنید تا لینک‌های Home، About، Register و Login راببینید.
تغییرview و layout صفحات
ابتدا شما می‌توانید لینک Application name را در بالای صفحه تغییر دهید. این مقدار برای تمام صفحات یکسان است. این مقدار تنها در یک قسمت از پروژه پیاده‌سازی شده است، با این وجود در تمام صفحات این برنامه وجود دارد. در Solution Explorer به فولدر /Views/Shared رفته و فایل _Layout.cshtml را باز کنید. این فایل صفحه layout نام دارد و در پوشه shared قرار دارد که تمام صفحات از آن استفاده می‌کنند.

کلاس طراحی سایت مشهد

قالب layout به شما اجازه می‌دهد تا layout مربوط به HTML سایت خود را یک بار مشخص کنید و آن را برای تمام صفحات سایت اعمال کنید. خط @RenderBody() را پیدا کنید. RenderBody یک placeholder است که در آن تمام صفحاتی که ساخته‌اید، در صفحه layout به صورت wrapped یا پنهان شده می‌‌باشند. به عنوان مثال وقتی شما بر روی لینک About کلیک می‌کنید، view مربوط به شاخه \Home\About.cshtmlبه داخل متد RenderBody منتقل(render) می‌شود.
محتوای عنوان را تغییر دهید. ActionLink را در قالب layout از “Application name” به “MVC Movie” و کنترلر از Home به Movies تغییر دهید. Layout تکمیل شده در شکل زیر دیده می‌شود.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

آموزش ASP.NET پروژه محور

برنامه را اجرا کنید. بر روی لینک About کلیک کنید و ببینید که چطور آن صفحه “MVC Movies” را هم نمایش می‌دهد. ما می‌توانیم قالب layout را تغییر دهیم و این تغییر را برای تمام صفحات اعمال کنیم.

آموزش asp mvc

زمانی که برای اولین بار فایل Views\HelloWorld\Index.cshtml را می‌سازیم، حاوی قطعه کد زیر خواهد بود:

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

فایل Views\_ViewsStart.cshtml یک layout مشترک در بین تمام viewها تعریف می‌کند، بنابراین می‌توانید آن کد را از فایل Views\HelloWorld\Index.cshtml پاک کنید.

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

می‌توانید از مشخصه(property ) مربوط به layout برای ایجاد یک layout view استفاده کنید، یا اینکه آن را در حالت null قرار دهید به گونه‌ای که از هیچ فایل layoutای استفاده نمی‌کند.
حال می‌خواهیم عنوان view متعلق به Index را تغییر دهیم.
فایل MvcMovie\Views\HelloWorld\Index.cshtml را باز کنید. دو قسمت برای ایجاد تغییرات وجود دارد. ابتدا متنی است که در عنوان مرورگر و سپس متنی که در سرآیند(header) دومی(<h2>) وجود دارد. شما اندکی آنها را تغییر می‌دهید تا متوجه شوید که تغییر در هر قسمت از کد، کدوم قسمت از برنامه را تغییر می‌دهد.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

برای نشان دادن عنوان HTML، کد بالا مشخصه Title از شی ViewBag را set می‌کند(که در قالب viewِِ Index.cshtml قرار دارد). توجه داشته باشید که قالب layout از این مقدار در بخش <title> به عنوان جزئی از بخش <head> استفاده کرده است.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

با استفاده از روش ViewBag ، می‌توانید به راحتی سایر پارامترها را بین قالب view و فایل layout خود پاس بدهید.
برنامه را اجرا کنید. دقت کنید که عنوان مرورگر، heading اولی و heading دومی تغییر کرده‌اند.( اگر تغییرات اعمال نشده‌اند، Ctrl+F5 را فشار دهید تا پاسخ از سرور load شود). عنوان مرورگر از طریق ViewBag.Title که در Index.cshtml ، set کرده بودیم ایجاد شده است.
همچنین توجه کنید که چگونه محتوای قالب view در Index.cshtml با قالب view در _Layout.cshtml با هم ادغام می‌شوند و یک پاسخ HTML به مرورگر ارسال می‌شود. قالب های ‌‌Layout کار را برای تغییر در تمام صفحات برنامه بسیار ساده می‌کنند.

کلاس asp mvc 5 مشهد

برنامه های MVC دارای V – View و C-Controller هست اما هنوز فاقد M -Model می‌باشد. در ادامه خواهید دید که چگونه یک پایگاه داده بسازید و مدل داده را از آن دریافت کنید.
ارسال دیتا از کنترلر به view
قبل از اینکه به سراغ پایگاه داده برویم و در مورد مدل‌ها صحبت کنیم، ابتدا در مورد ارسال اطلاعات از کنترلر به view صحبت می‌کنیم. کلاس‌های کنترلر هنگام پاسخ به درخواست URL فراخوانی می‌شوند. کلاس کنترلر جایی است که شما در آن کدی را می‌نویسد که درخواست‌های مرورگر را مدیریت می‌کند، داده را از پایگاه داده دریافت می‌کند و تصمیم می‌گیرد که چه نوع پاسخی را به سمت مرورگر بفرستد. قالب‌های view برای ساخت پاسخ HTML به مرورگر مورد استفاده قرار می‌گیرند.
کنترلرها مسئولیت ارائه داده یا هر شی مورد نیاز برای قالب‌های view را بر عهده دارند. یک قالب view هرگز نباید به طور مستقیم با پایگاه داده در ارتباط باشد. در عوض قالب view باید با داده‌ای تعامل داشته باشد که توسط کنترلر برای او فراهم شده است. این جداسازی در ارتباطات باعث می‌شود که کد شما تمیز و به راحتی قابل تست باشد.
در حال حاضر متد Welcome در کلاس HelloWorldController پارامترهای name و numTimes را به عنوان ورودی دریافت می‌کند و مقادیر خروجی مستقیما به مرورگر می‌فرستد. به جای آنکه از کنترلر بخواهیم تا پاسخ را به صورت رشته ارسال (render) کند، کنترلر را به صورتی تغییر می‌دهیم تا از قالب view استفاده کند. قالب view پاسخ داینامیک تولید می‌کند که به این معنی است که شما برای تولید پاسخ باید بیت‌های درستی از داده را از کنترلر به view بفرستید. شما می‌توانید این کار را به این صورت انجام دهید به گونه‌ای که کنترلر، داده‌ای که قالب view در شی ViewBag به آن نیاز دارد فراهم می‌کند.
به فایل HelloWorldController.cs بروید و متد Welcome را به گونه‌ای تغییر دهید که مقادیر Message و NumTimes را در شی ViewBag اضافه کند. ViewBag یک شی داینامیک است، به این معنی که می‌توانید هر آنچه می‌خواهید در آن قرار دهید. تا زمانی که در شی ViewBag مشخصه‌ای را تعریف نکنید خالی است. ASP.NET model binding system به طور خودکار پارامترهای name و NumTimes را از query string به متد شما نگاشت می‌دهد. فایل HelloWorldController.cs را به صورت زیر خواهد بود.

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

شی ViewBag حاوی داده‌ای است که به view ارسال می‌شود. حال شما به یک قالب view برای Welcome نیاز دارید. در منوی Build ، گزینه Build Solution انتخاب کنید تا مطمئن شوید که پروژه کامپایل شده است. بر روی پوشه Views\HelloWorld کلیک راست کنید و بر روی Add کلیک کنید، سپس بر روی MVC 5 View Page with Layout(Razor) کلیک کنید.

آموزش asp mvc

در پنجره Specify Name for Item ، Welcome را وارد کنید و OK را کلیک کنید.
در پنجره Select a Layout Page ، گزینه _Layout.cshtml را انتخاب کنید و OK را کلیک کنید.

اموزش mvc 6

فایل MvcMovie\Views\HelloWorld\Welcome.cshtml ساخته می‌‌شود.
در فایل Welcome.cshtml ، markup را جایگزین کنید. شکل کامل فایل Welcome.cshtml به صورت زیر خواهد بود.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

برنامه را اجرا کنید و در مرورگر به URL زیر بروید.
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
حال داده توسط model binder از URL به کنترلر ارسال می‌شود. کنترلر داده را در شی ViewBag قرار می‌دهد و آن شی را به view می‌فرستد. سپس view، داده را در قالب HTML به نمایش درمی‌آورد.

مشهد mvc asp

در نمونه بالا، ما از شی ViewBag برای ارسال داده از کنترلر به view استفاده کردیم. در قسمت‌های بعد از مدل view برای ارسال داده از کنترلر به view استفاده خواهیم کرد.

سوالات خود را درباره مقاله آموزش ASP.NET پروژه محور می توانید پایین پست عنوان کنید.

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید
  • این فیلد برای اعتبار سنجی است و باید بدون تغییر باقی بماند .

درباره‌ی محمد بروشکی

همچنین ببینید

ساخت اپلیکیشن سمت کاربر با فرمت Javascript

در این بخش از آموزش Web API با استفاده از HTML، Javascript و  Knockout.js   اپلیکیشنی …

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

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