بستن تبلیغات

تسلط کامل بر سی‌شارپ با یک دوره پروژه‌محور

یادگیری سی شارپ از مفاهیم پایه تا پروژه محور: شی‌گرایی، کار با SQL و LINQ، ORMها (Entity Framework)، ساخت پروژه مدیریت رستوران با گزارشات حرفه‌ای و امکانات کامل!

مشاهده بیشتر

تسلط جامع بر MVC Core برای توسعه وب حرفه‌ای

یادگیری MVC Core از مبانی تا پیشرفته: شی‌گرایی، Routing، Entity Framework، امنیت، تست یونیت، Razor، Ajax، و پروژه‌های کاربردی! یک دوره کامل برای تسلط بر توسعه وب با ASP.NET Core. به صورت حضوری و آنلاین!

مشاهده بیشتر

مشخصات مقاله

تعداد دانلود:
1640
امتیاز :
0.0
تعداد بازدید:
2014
تعداد نظرات:
0
لایک ها :
0

آموزش MVC Core - اضافه نمودن یک View به برنامه MVC Core

در این بخش با تغییر کلاس HelloWorldController برای استفاده از فایل های View تا به بهترین نحوه HTML را بتوانیم encapsulate کنیم.

Razor چیست؟

Razor یک موتور اسکریپت نویسی سریع برای بخش نمایش (View) در ASP.NET MVC می باشد. با استفاده از این موتور به جای استفاده از روش قدیمی اسکریپت نویسی کافی است از علامت @ در ابتدای هر دستور استفاده کنید.

شما یک فایل View با استفاده از Razor ایجاد می کنید.قالب هایی که براساس Razor هستند دارای فرمت فایل .chtml هستند. آنها یک روش ظریف برای ایجاد خروجی HTML با استفاده از C# ارائه می دهند.

در حال حاظر متد یا اکشن Index یک رشته(string)حاوی پیامی بر می گرداند به این معنا که در واقع hard-coded می باشد.

در کلاس HelloWorldController متد Index را به صورت زیر تغییر بدهید.

public IActionResult Index()
    {
        return View();
    }
 
<button></button>

این کد یک Object از View را برمیگرداند.با استفاده از View می توانید HTML تولید کرده و پاسخ مناسب به مرورگر بفرستیم.

کنترلر متد(Controller methods)که همچنین به عنوان( action methods)شناخنه می شوند مانند متد Index در بالا،به طور کلی یک IActionResult (یا کلاس حاصل از ActionResult)را بر می گرداند نه مانند مثال اول یک رشته!

خب برای ایجاد یک View بر روی فولدر View راست کلید کرده و AddNew Item

در پنجره Add New Item – MvcMovie در قسمت Search کلمه View را جستجو کرده و گزینه MVC View Page را انخاب می کنیم و نامش را Index.cshtml. می گذاریم.سپس Add می کنیم.

کد های زیر را وارد می کنیم(Views/HelloWorld/Index.cshtml )

@{
    ViewData["Title"] = "Index";
}
< h2 >Index< /h2 >
< p >Hello from our View Template!< /p >
<button></button>

آدرس http://localhost:xxxx/HelloWorld را وارد کنید.

متد Index در کلاس HelloWorldController کار خاصی نداریم زیرا در واقع این return View(); هست که کار می کند.درواقع این متد مشخص کرد که باید از یک فایل View استفاده کرد تا پاسخ مناسب را به مرورگر بفرستیم.از آنجا که به طور صریح نام View را مشخص نکردیم،MVC به طور پیش فرض از فایل Index.cshtml در مسیر /Views/HelloWorld استفاده می کند.

تصویر زیر رشته "Hello from our View Template!"به صورت hard-coded در نمایش می دهد.

توجه :

توجه داشته باشید که اگر اندازه مرورگر شما کوچک باشد (برای مثال در موبایل)شما ممکن است نیاز به تغییر وضعیت داشته باشید.در سمت راست بالا برروی Bootstrap navigation button کلیک کرده و می توانید منو را مشاهده کنید.

تغییر (Views) و (Layout Pages)

برروی لینک هایی که در منو قرار دارد کلیک کنید.متوجه می شوید که هر صفحه از یک Layout مشترک استفاده می کند.فایل layout استفاده شده در قسمت Views/Shared/_Layout.cshtml وجود دارد و فایل _Layout.cshtml را باز می کنیم.

قالب بندی Layout به شما اجازه می دهد چیدمان HTML خود را در یک مکان مشخص کنید و سپس آن را در چند صفحه از سایت خود اعمال کنید.

تغییر عنوان و منوها در فایل Layout

عنوان را به (Movie App) تغییر دهید.

لینک (Home) را به (MvcMovie) و کنترلر (Home) به (Movies) تغییر دهید.

کدهایی که تغییر پیدا کرده در زیر علامت گذاری (highlighted )شده است.

@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
< !DOCTYPE html >
< html >
    < head >
        < meta charset="utf-8" / >
        < meta name="viewport" content="width=device-width, initial-scale=1.0" / >
        < title >@ViewData["Title"] - Movie App< /title >
        < environment names="Development" >
            < link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" / >
            < link rel="stylesheet" href="~/css/site.css" / >
        < /environment >
        < environment names="Staging,Production" >
            < link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
             asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
             asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" / >
            < link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" / >
        < /environment >
        @Html.Raw(JavaScriptSnippet.FullScript)
    < /head >
    < body >
        < nav 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="sr-only" >Toggle navigation< /span >
                        < span class="icon-bar" >< /span >
                        < span class="icon-bar" >< /span >
                        < span class="icon-bar" >< /span >
                    < /button >
                    < a asp-area="" asp-controller="Movies" asp-action="Index" class="navbar-brand" >MvcMovie< /a >
                < /div >
            < div class="navbar-collapse collapse" >
            < ul class="nav navbar-nav" >
<button></button>

ما هنوز کنترلر (Movies) را ایجاد نکردیم و اگر برنامه را اجرا کنید و برروی لینک کلیک کنید یک خطای 404 دریافت می کنید.

تغییرات خود را ذخیره کنید و روی لینک About کلیک کنیدمتوجه می شوید که About - Movie App به جای About - Mvc Movie آمده است.

برروی لینک Contac کلیک کرده و توجه کنید Movie App را نمایش می دهد.

ما توانستیم با یکبار تغییر در فایل Layout در همه صفحات سایت عنوان و لینک را تغییر دهیم.

بررسی کنید Views/_ViewStart.cshtml file :

@{
    Layout = "_Layout";
}
<button></button>

فایل Views/_ViewStart.cshtml به ارمغان می اورد فایل Views/Shared/_Layout.cshtml برای همه View ها .

تغییر عنوان(title ) برای view (Index)

فایل Views/HelloWorld/Index.cshtml باز می کنیم و دوتغییر ایجاد می کنیم:

متنی که در عنوان مرورگر ظاهر می شود

هدر(header ) ثانوی (< H2 >)

شما آنها را کمی متفاوت می سازید، بنابراین شما می توانید ببینید کدام کد کمی از قسمت برنامه را تغییر می دهد.

                            @{
    ViewData["Title"] = "Movie List";
}
< h2 >My Movie List< /h2 >
< p >Hello from our View Template!< /p >
<button></button>

ViewData["Title"] = "Movie List"; در کد بالا property (ویژگی) Title متن ViewData را به (Movie List)تنظیم می کند.

به صورت زیر هم میتوانید از ویژگی Title به عنوان تگ HTML استفاده کنید.

1 2	`< title >@ViewData["Title"] - Movie App< /title >` `<button></button>`

تغییرات و ذخیره کنید و پروژه را بدون دیباگ کردن اجرا کنید و به آدرس (http://localhost:xxxx/HelloWorld)بروید.

توجه داشته باشید که عنوان مرورگر ، هدر اصلی ، و هدر ثانوی تغییر پیدا کرده است.

عنوان مرورگر با استفاده از ViewData["Title"] ایجاد شده است.

همچنین توجه کنید که محتوا در قالب فایل (Index.cshtml ) با قالب فایل (Views/Shared/_Layout.cshtml) ادغام شده است و یک پاسخ(response ) به HTML به مرورگر فرستاده شده است.

انتقال Data از Controller به View

اکشن هایی که در کنترلر هستند به ورودی های URL پاسخ می دهند.

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

کنترلر داده ها (data )را از یک منبع داده(data source) بازیابی می کند و تصمیم می گیرد که چه نوع پاسخی به مرورگر ارسال کند.

View ها می توانند با استفده از یک کنترلر HTML: مناسب را تولید کرده و با فرمت مناسب به مرور گر ارسال کند.

کنترلر مسئول ارائه اطلاعات مورد نیاز برای یک View که View اطلاعات را Render کرده و به مرورگر ارسال کند.

View ها نباید منطق کسب و کار را انجام دهند() یا با پایگاه داده ارتباط برقرارکنند.

یک View باید با داده هایی که توسط کنترلر ارائه می شود،کار کند.

حفظ این جداسازی و اصول کمک می کند که کدهای شما تمیز(clean)،قابل تست(testable) و قابل نگهداری(maintainable) باشد.

در حال حاظر متد Welcome در کلاس HelloWorldController دو پارامتر name و ID را میگیرد سپس مقادیر را مستقیما به مرورگر منتقل می کند.

به جای اینکه کنترلر این پاسخ را به عنوان یک رشته بسازد، اجازه دهید کنترلر را عوض کنیم تا از یک View استفاده کنیم.

View یک پاسخ داینامیک (dynamic response) تولید می کند به این معنی که شما برای ارسال پاسخ به مرورگر باید بیت های مناسب داده را از کنترلر به View منتقل کنید

شما این کار می توانید با داشتن یک کنترلر که دارای داینامیک دیتا هایی(پارامترها) می باشد که View در یک ViewData نیاز دارد فراهم کنید تا View بتواند به آن دسترسی داشته باشد.

به فایل HelloWorldController.cs برگردید و کد هایی مانند کدهای زیر وارد کنید:

                            using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;
            return View();
        }
    }
}
 
<button></button>

ViewData تا زمانی که چیزی درون آن قرار ندهید کار خاصی انجام نمی دهد.

ViewData حاوی اطلاعاتی است که به View داده می شود.

یک View برای اکشن Welcome ایجاد کنید و نامش را Welcome.cshtml. بگذارید.

شما یک حلقه در Welcome.cshtml ایجاد میکنید که نشان می دهد (Hello) چند بار تکرار شده است.

کد های زیر را وارد کنید:

@{
    ViewData["Title"] = "Welcome";
}
< h2 >Welcome< /h2 >
< ul >
    @for (int i = 0; i <  (int)ViewData["NumTimes"]; i++)
    {
    < li >@ViewData["Message"]< /li >
    }
< /ul >
<button></button>

تغییرات را ذخیره کنید و به آدرس زیر بروید:

1 2	`http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4` `<button></button>`

داده از URL گرفته شده و با استفاده از MVC Model Binder به کنترلر منتقل می شوند.

کنترلر داده ها را به صورت (packages ) به ViewData وارد می کند و آبجکت ساخته شده را به View می فرستد و View داده ها را به عنوان HTML به مرورگر ارائه میکند.

در این مثال با استفاده از ViewData اطلاعاتی را از کنترلر به View فرستادیم.در بخش های بعدی آموزش با استفاده از View Model داده ها را از کنترلر به View انتقال می دهیم

ASP.NET Core چیست و به چه دلیل ماکروسافت دست به چنین تغییر عظیمی زد ؟ آموزش MVC Core -اضافه نمودن یک Model به برنامه MVC Core

1397/02/28 2014 1640

دانلود PDF

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما