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

View چیست و چه کاربردی دارد ؟ چگونه می‌توانم یک View به پروژه ASP.NET Core اضافه کنم؟

درود ، من آرزو ابراهیمی هستم ، مدرس دوره آموزش جامع 3.0 ASP.NET Core ، و با یک مقاله آموزشی جذاب از دوره آموزشی رایگان و مقاله محور ASP.NET Core در خدمت شما دوستان هستم.

ویو (View) در ASP.NET Core چیست ؟

View واسط کاربری یا UI برنامه را می‌سازد و به زبان ساده View همان چیزیست که کاربر در صفحه مرورگر خود می‌بیند ، هر اکشن متد تعریف شده در کلاس کنترلر می‌تواند یک یا چند ویو (View)‌ را بازگشت دهد.

ویرایش Action Method برای بازگشت View

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

اگر به خاطر داشته باشید در جلسه آموزش  افزودن Controller به پروژه ASP.NET Core ، یک کنترلر به نام Sample به پروژه اضافه کردیم و درون این کنترلر یک اکشن متد به نام Index تعریف کردیم و این اکشن متد رشته‌ی “Hello World” را برای ما برمی‌گرداند. حالا می‌خواهیم همین اکشن متد Index را ویرایش کنیم تا این اکشن متد یک View را بازگرداند.

کنترلر Sample را به صورت زیر ویرایش کنید. همانطور که مشاهده می‌کنید در اکشن متد Index دوتا تغییر داشتیم اولین تغییر در نوع بازگشتی Action Method هست که از نوع string به نوع IActionResult تغییر پیدا کرده و تغییر دوم در مقدار بازگشتی اکشن متد هست ، این اکشن متد حالا یک View را بازگشت می دهد. چون از کد return View(); استفاده شده است.

پس زمانی که یک Action Method قرار است یک ویو را بازگشت دهد اول نوع بازگشتی آن را از نوع رابط IActionResult قرار دهید سپس بعد از return ، متد View را صدا بزنید این متد یک نمونه از کلاس ViewResult را بازگشت می‌دهد.

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

namespace MyFirstProject.Controllers
{
    public class SampleController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

خب حالا می‌خواهیم که پروژه را اجرا کنیم ، برای این منظور روی IIS Express کلیک کنید یا از کلیدهای میانبر Ctrl + F5 استفاده نمایید. بعد از این که پروژه اجرا شد بعد از آدرس https://localhost:44323/ ابتدا نام کنترلی که اکشن متد در آن تعریف شده سپس علامت اسلش و بعد نام اکشن متدی که می‌خواهید اجرا شود را وارد کند. به صورت https://localhost:44323/Sample/Index

چون نام اکشن متد Index هست طبق الگوی Routing تعریف شده در فایل Startup.cs می‌توانید بعد از نام کنترلر نام اکشن متد را وارد نکنید به صورت https://localhost:44323/Sample
پیشنهاد می‌کنم برای درک بهتر مباحث Routing مقاله‌ی آموزش مسیریابی (Routing) در ASP.NET Core را مطالعه نمایید. نکات بسیار مهمی در این مقاله آموزشی مطرح شده است.
بعد از اجرای اکشن متد Index در کنترلر Sample با خطای زیر مواجه خواهید شد.

خطای The view 'Index' was not found که در تصویر بالا مشاهده می‌کنید ، نشان دهنده‌ی این است که برنامه به دنبال یافتن ویوی اکشن متد Index بوده است ولی نتوانسته این View را پیدا کند.
در پیغام خطای بالا همچنین مشخص شده است که برنامه در مسیرهای زیر به دنبال View گشته است.

/Views/Sample/Index.cshtml
/Views/Shared/Index.cshtml
/Pages/Shared/Index.cshtml

طبق یک قرارداد همه View‌های مربوط به یک کنترلر باید در پوشه‌ای همنام آن کنترلر قرار بگیرند به عنوان مثال در اینجا یک کنترلر به نام Sample داریم پس برنامه در پوشه Views به دنبال پوشه Sample می‌گردد و درون پوشه Sample به دنبال یک View به نام Index هست. به همین خاطر در اولین مسیر /Views/Sample/Index.cshtml برنامه به دنبال View گشته است و نتوانسته آن را بیاید.

نکته : توجه داشته باشید که در مسیرهای دوم (/Views/Shared/Index.cshtml) و سوم (/Pages/Shared/Index.cshtml) برنامه در پوشه‌ی Shared ایجاد شده داخل پوشه Views و Pages به دنبال View گشته ، همونطور که در جلسه آشنایی با ساختار پوشه ها و فایل ها در پروژه های ASP.NET Core گفتم ویوهای اشتراکی بین کنترلرهای مختلف داخل پوشه Shared قرار می‌گرند بنابراین زمانی که برنامه از جستجو در مسیر اول ناامید شد به سراغ پوشه Shared می رود تا شاید آنجا بتواند ویوی Index را پیدا کند.

پس حالا برای رفع خطا ، باید برای اکشن متد Index یک ویو تعریف کنیم ، در ادامه این مقاله‌ی آموزشی با افزودن View به پروژه به دو روش آشنا خواهید شد.

اضافه کردن View به پروژه ASP.NET Core

روش اول

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

سپس در پنجره‌ی Add MVC View در قسمت View name یک نام برای View خود انتخاب کنید. نام View را هم نام اکشن متد قرار دهید (نام اکشن متد Index هست پس من نام View مربوط به این اکشن متد را Index قرار می دهم) سپس بر روی Add کلیک کنید تا این View برای شما ساخته شود.

سوال : شاید این سوال برای شما پیش بیاد که آیا حتما باید نام View همنام اکشن متد باشد یا می‌توانیم هر دلخواهی برای نام View قرار دهیم ؟ پاسخ این سوال این است که بله شما می‌توانید هر نام دلخواهی برای View قرار دهید در ادامه راجب این موضوع صحبت خواهم کرد پس با من همراه باشید و زیاد عجله نکنید ?

بعد از کلیک روی گزینه Add یک فایل به نام Index با پسوند cshtml در پوشه‌ی Sample برای شما ساخته می‌شود این فایل را باز کنید. کدهای زیر را درون این فایل مشاهده خواهید کرد.

@{
ViewData["Title"] = "Index";
}
<h1>Index</h1>

در View می‌توانیم از کدهای HTML و #C در کنار هم استفاده نماییم حالا می‌خواهیم عبارت بین تگ باز و بسته‌ی h1 را کمی تغییر داده و پروژه را اجرا کنیم ، اگر با HTML آشنایی ندارید پیشنهاد میکنم مقالات اموزش HTML سایت را مشاهده نمایید.

من بین تگ باز و بسته ی h1 ، عبارت Mizfa.com را قرار دادم حالا دکمه های میانبر ctrl + f5 را فشار دهید تا پروژه شما اجرا شود سپس آدرس https://localhost:44323/sample را در مرورگر وارد کنید ، حالا تصویر زیر را در صفحه مرورگر خواهید دید.

روش دوم

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

نکته : روش دوم نسبت به دو روش فوق راحت تر است.

حالا در پوشه Views یک فایل به نام Details با پسوند cshtml ایجاد می‌شود و می‌خواهیم که اکشن متد Index ، ویوی Details را بازگشت دهد. پس به سراغ اکشن متد Index می‌رویم تا تغییراتی را در این Action Method ایجاد نماییم. به کد زیر دقت کنید ، در اکشن متد Index چون میخواهیم که ویوی Details را بازگشت دهد باید نام ویو را به متد View پاس دهیم. به صورت رو به رو return View("Details")


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

namespace MyFirstProject.Controllers
{
    public class SampleController : Controller
    {
        public IActionResult Index()
        {
            return View("Details");
        }
    }
}

حالا اگر هیچ پارامتری را به متد View() پاس ندهیم به صورت پیش فرض برنامه دنبال یک ویو هم نام اکشن متد می گردد و این ویو را بازگشت می دهد پس زمانی که نام View همنام اکشن متد هست می توانم نام View را به متد View() پاس ندهیم.

حالا کد ویوی Details را به صورت زیر ویرایش کنید.

@{
ViewData["Title"] = "Details";
}

<h1>Mizfa.com From Details View</h1>

و سپس پروژه را اجرا کنید ، همانطور که می بیند خروجی View در پنجره مرورگر به شما نمایش داده می‌شود.

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