آموزش ASP.NET Core MVC

ایجاد نما (View) در پروژه‌ی ASP.NET Core MVC

با عرض سلام خدمت تمامی دوستان برنامه نویس ، با یکی دیگر از جلسات آموزشی طراحی سایت با ASP.NET Core 2 در خدمت شما عزیزان هستیم . در جلسه گذشته به  بررسی و فهم مسیرها یا Routing در ASP.NET Core پرداختیم . در این جلسه از آموزش ASP.NET  با نحوه ایجاد View در پروژه های ASP.NET Core آشنا خواهید شد ، پس با ما همراه باشید.

پردازش و نمایش صفحات وب

در مثالی که در جلسه آموزشی افزودن کنترلر به پروژه زدیم خروجی به جای اینکه یک صفحه HTML باشد رشته Hello World بود. برای اینکه در پاسخ به درخواست مرورگر یک صفحه‌ی HTML تولید کنیم باید یک View یا نما داشته باشیم که برنامه را قادر به تولید این خروجی می‌کند.

ایجاد نما یا View

برای شروع کار ابتدا یک پروژه جدید در ویژوال استدیو ایجاد نمایید برای ایجاد یک پروژه از نوع ASP.NET Core می‌توانید به مطالعه‌ی مقاله‌ی ساخت پروژه در ASP.NET Core2 بپردازید.

پس از ایجاد پروژه بر روی پوشه‌ی Controllers در مرورگر Solution Explorer کلیک کرده و فایل HomeController را برای ویرایش باز کنید و سپس اکشن Index را به فرم زیر ویرایش نمایید. اگر میخواهید که یک کنترلر دلخواه به پروژه خود اضافه کنید پیشنهاد می کنم که مقاله  افزودن Controller به پروژه ASP.NET Core را مطالعه نمایید.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Sample1.Models;

namespace Sample1.Controllers
{
    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            ViewBag.Greeting = "Good Morninig World";
            return View("MyView");
        }
    }
}

متد اکشنی که خروجی آن شیئی از نوع View Result باشد ، موجب پردازش یک نما می شود ،  با اجرای برنامه خواهید دید که MVC سعی بر یافتن نمای MyView (که البته وجود ندارد) کرده و در نتیجه با پیام خطایی همانند تصویر زیر مواجه خواهید شد.

خطای پیدا نکردن View - اموزش ASP.NET Core
خطای پیدا نکردن View

پیام خطای بالا نه تنها نشان دهنده ی این است که برنامه به دنبال یافت نما (View) بوده است ، بلکه مشخص کننده محل های جست وجو نیز هست . نماها در پوشه ای به نام Views که دارای زیرشاخه هایی (پوشه فرعی سطوح پایین تر) است ، ذخیره و دسته بندی می‌شوند. و نام پوشه ای که تمام نماهای مربوط به یک کنترلر در آنجا ذخیره می شوند هم نام آن کنترلر است. به عنوان مثال نماهایی که به کنترلر Home مربوط می شوند ، در مسیر Views/Home ذخیره می‌شوند.
توجه داشته باشید که هر متد اکشن داخل کنترلر ، دارای یک نما در پوشه‌ ای هم نام آن کنترلر خواهد بود و نماهایی که به کنترلر خاصی مربوط نیستند ، در پوشه ای به آدرس Views/Shared ذخیره می‌شوند.
در ادامه ی این مقاله آموزشی سه روش برای ایجاد View به شما معرفی خواهم کرد .

اینم بخون، جالبه
مقایسه معماری MVC با دیگر معماری ها

در روش اول برای ایجاد نما می توانید بر روی پوشه‌ی Views/Home کلیک راست کرده و سپس از فهرست Add گزینه View را انتخاب کنید. همانند تصویر زیر.

افزودن View به پروژه ASP.NET Core2
افزودن View به پروژه ASP.NET Core

سپس در پنجره ی Add MVC View در قسمت ViewName یک نام برای View خود انتخاب کنید من نام این ویو را MyView قرار می دهم. سپس بر روی Add کلیک کنید تا ویوی شما ساخته شود.

افزودن View به پروژه ASP.NET Core2
افزودن View به پروژه ASP.NET Core2

 

هم چنین برای ایجاد نما می توانید پس از کلیک راست بر روی پوشه‌ی Views/Home  از فهرست Add گزینه New Item را انتخاب کنید پس از آن ، ویژوال استدیو فهرستی از قالب های قابل استفاده را به شما نشان می‌دهد. در اینجا از کادر سمت چپ ، ASP.NET Core و پس از آن ، در کادر مرکزی ، MVC View Page را انتخاب کنید. نام نما را در فیلد MyView.cshtml ، Name وارد کرده و بر روی دکمه Ok کلیک کنید.

افزودن View به پروژه ASP.NET Core MVC
افزودن View به پروژه ASP.NET Core MVC

در روش سوم برای ایجاد نما شما می توانید بر روی نام اکشن متد راست کلیک کرده و سپس گزینه Add View را انتخاب کرده و سپس در کادر Add MVC View نام ویوی خود را که به صورت پیش فرض Index است ، تغییر دهید . روش سوم نسبت به دو روش فوق راحت تر است.

افزودن View به پروژه ی ASP.NET Core2

پس از ایجاد نما به یکی از سه روش فوق ، ویژوال استدیو نمای Views/Home/MyView.cshtml را ایجاد و آن را برای ویرایش باز می‌کند . محتوای کنونی آن را با آنچه در زیر آمده است جایگزین کنید.

@{ 
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>
    <div>
        Hello World (from the view)
    </div>    
</body>
</html>

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

@{ 
    Layout = null;
}

کد بالا توسط موتور تولید نما (Razor) که مسئول تولید HTML و فرستادن آن به مرورگر است ، تفسیر شده و موجب تولید HTML و فرستادن آن به مرورگر می‌شود ، عبارت ساده بالا (Layout = null) مشخص می‌کند که برای تولید صفحه وب ، به دنبال استفاده از Layout نیستیم Layout مانند الگویی برای تولید صفحه وب به کار می‌رود و در فصل های آینده به صورت مفصل مورد بررسی قرار خواهد گرفت . بررسی بیشتر کد Razor را به آینده موکول می‌کنیم .

حالا برنامه را با انتخاب Start Debugging از فهرست Debug اجرا کنید. نتیجه را مانند تصویر زیر خواهید دید.

ایجاد ویو در ASP.NET Core
نمایش نتیجه کد

 

اکشن ()Index در جلسات آموزشی گذشته ، تنها یک رشته باز می‌گرداند. معنی آن این بود که MVC بدون آن که کاری انجام دهد، این رشته را برای مرورگر می‌فرستاد. اکنون که این اکشن شیئی از نوع View Result نتیجه می‌دهد . MVC نمایی را پردازش کرده و HTML تولید شده را برای مرورگر می‌فرستد.

اینم بخون، جالبه
پروژه‌ی عملی - ایجاد فرم ورود اطلاعات

از آنجا که نام نما را MyView قرار دادیم ، به صورت خودکار از مسیرهای پیش فرض و طبق یک قرارداد برای یافتن آن استفاده شده است. قرارداد مرسوم این است که نما هم نام متد اکشن بوده و در پوشه ای با نام کنترلر در برگیرنده ی اکشن ذخیره شده باشد.

/Views/Home/MyView.cshtml

متدهای اکشن افزون بر آنچه که در بالا دیدید ، می‌توانند انواع دیگری را هم بازگردانند ، به صورت مثال ، بازگرداندن شیئی از نوع RedirectResult موجب هدایت مرورگر به آدرس جدیدی می‌شود. اگر شیئی از نوع HttpUnauthorizedResult بازگرداده شود کاربر را مجبور به لاگین می‌کند . مجموعه‌ی این اشیا را به نام نتایج اکشن می‌شناسند که در فصل های آینده آشنایی بیشتری با این مجموعه پیدا خواهید کرد.

این جلسه آموزشی هم به پایان رسید. امیدوارم که از این جلسه آموزشی لذت کافی رو برده باشید . در صورتی که سوالی داشتید حتما در قسمت نظرات مطرح کنید.

 

 

ایجاد نما (View) در پروژه‌ی ASP.NET Core MVC
امتیاز 5 از 4 رای
برچسب ها

آرزو ابراهیمی

بیش از 4 سال است که زمینه طراحی و توسعه سایت فعالیت می‌کنم، طراح و برنامه نویس انواع سامانه‌های تخصصی پزشکی، مناقصات، فروشگاهی و ... بودم و هستم و هدفم در سایت میزفا ارائه اطلاعات بروز و ناب در زمینه طراحی سایت است. تا از این طریق بتونم تجربیات و دانسته های خودم را با تمامی علاقمندان به مباحث طراحی سایت به اشتراک بزارم .

نوشته های مشابه

‫10 نظرها

  1. سلام.وقتتون بخیر.
    ببخشید من برای ساخت view فقط از یه روش میتونم viewدرست کنم اونم کلیک راست و add new item هست.اون دو روش دیگه که میرم ،نرم افزار ارور میزنه.در ضمن از نسخه core2.1استفاده میکنم.به نظرتون مشکلش چیه.
    با تشکر.

    1. سلام وقتتون بخیر … منظورتون اینه که وقتی روی اکشن متد راست کلیک می کنید و می خواهید که ویو ایجاد کنید ارور می دهد ؟
      چه اروری میده ؟ تا بهتر بتونم راهنمایی تون کنم.

  2. سلام خانم ابراهیمی
    ببخشید سوالی داشتم.
    هنگام درج ویو برای اکشن متد، وقتی بر روی اکشن متد راست کلیک میکنم گزینه add view وجود ندارد.
    لطفا راهنمایی کنید. خیلی ممنون.

    1. سلام … نسخه .NET Core خودتون رو به 2.1 ارتقا بدید و قبلیش ویژوال استدیو رو آپدیت کنید تا مشکل حل شود.

  3. سلام اول از همه خیلی ممنونم از توضیحات خوبتون ..من ویژوال استودیو 2015 با آپدیت 3 رو روی سیتمم دارم و net Core.رو هم روی سیستمم نصب کردم از همون لینکی که شما معرفی کردین …برای ایجاد پروژه جدید Core هیچ مشکلی نداشتم ولی وقتی خواستم اولین View رو در پروژه ام ایجاد کنم دیدم که view ای که در پروژه من ساخته میشود با View که شما نمایش دادید .. کدهاش فرق داره !!! در حقیقت هیچ کد خاصی توش نبود. قبلش هم وقتی Add NewItems رو زدم Asp.net Core رو گوشه سمت چپ برنامه ندیدم .فقط Asp.net وجود داشت و MVC View Page هم در لیست وسط صفحه وجود داشت و انتخابش کردم …ولی داخل View محتوای خاصی نداشت.. حالا من باید چکار کنم ؟ آیا درست بوده یا نه ؟ من ادامه بدهم یا از اول SDK رو نصب کنم ؟ ممنون میشم راهنمایی ام کنید

    1. با سلام . ممنونم … شما مطمئن هستید که نسخه NET Core. به درستی براتون نصب شده ؟؟؟ چون من خودم با نصب نسخه net core. روی ویژوال 2015 به مشکل برخوردم به همه افرادی که در این مورد راهنمایی می خوان توصیه می کنم که حتما ویژوال 2017 نصب کنن تا به راحتی و بدون هیچ دردسری بتونن از نسخه core استفاده کنن …. با توجه به توضیحاتی که شما دادید به احتمال زیاد نسخه core روی ویژوال شما نصب نشده چون هنگام افزودن View باید Asp.net Core در گوشه سمت چپ برنامه وجود داشته باشه .

      1. سلام ممنونم از جوابتون. من دیگه بیخیال VS 2015 شدم و 2017 رو نصب کردم.View جدید رو هم اد کردم فقط یه سوال واسه اطمینان، در view جدیدی که در ویژوال 2017 اضافه شده در حالت Default هیچ کد خاصی وجود نداره درسته ؟

        1. با سلام . خواهش میکنم … هنگام ایجاد View اگه گزینه Create as a partial view رو تیک بزنید یک ویو خالی برای شما ایجاد می شود در غیر این صورت ویویی که ایجاد می شود از ویوی Layout.cshtml_ که در پوشه Shared تعریف شده به عنوان Template استفاده میکند و در واقع محتوای ویویی که ایجاد کردید به جای ()RenderBody@ قرار میگیره.

  4. با سلام
    از مطالب خوبتون ممنونم.
    مایلم لینک شما را به سایتم اضافه کنم. لطفا در صورت تایید مرا در جزیان قرار بدید

    1. سلام … ممنون بابت حضورتون … باعث افتخار ماست که سایت میزفا رو لینک کنید. موفق باشید.

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

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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره رایگان سئو