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

افزودن View به پروژه ASP.NET Core
add view to asp net core project

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
the view not found in asp.net core

خطای 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 را انتخاب کنید. همانند تصویر زیر.

روش اول - افزودن ویو به پروژه ASP.NET Core 3.0
the first method add view to project asp.net core

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

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

اضافه کردن ویو به پروژه ASP.NET Core
the first method add mvc 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 را در مرورگر وارد کنید ، حالا تصویر زیر را در صفحه مرورگر خواهید دید.

نتیجه اجرای برنامه ASP.NET Core
code output

روش دوم

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

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

افزودن View به پروژه ASP.NET Core MVC
the second method add view to project asp.net core

حالا در پوشه 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 در پنجره مرورگر به شما نمایش داده می‌شود.

خروجی کد - افزودن ویو با نام متفاوت از اکشن متد
code output

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

 

 

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

25 نظر

25 پاسخ

  1. سلام خانم ابراهیمی وقتتون به خیر
    من دوره ی asp شما رو دارم ،الان وقتی که میخوام یه ویو اضافه کنم این There was an error running the selected code generator.’Package restore failed. Rolling back Package chenges for ‘NewsWebsite’ ارور رو میده بهم بالاتر توضیح دادین به اینترنت متصل باشم.
    به اینترنت وصلم ولی بازم ارور میده
    و اینکه شما تو اموزش براتون نام پنجره Add Mvc View هست ولی من اینو ندارم به جاش Add Reazor View دارم
    ممنون میشم راهنمایی کنید

    1. سلام وقتتون بخیر
      پکیج Microsoft.VisualStudio.Web.CodeGeneration.Design انگار با net core 3.1 هنوز سازگار نیست و باعث بروز این مشکل شده است.

      1. سلام وقت بخیر، آیا راه حلی هست برای این ارور چون منم هم در زمان ایجاد کنترلر این ارور رو دارم ؟

  2. با سلام.من برای آموزش خودم خیلی جستجو میکنم و چیزی که دستگیرم شده اینه که هربار یه جا قفل میشم این سایت کلید این قفلو داره.خیلی ممنونم.توضیحات ساده و روان.موفق باشید

    1. سلام وقتتون بخیر ، خیلی خوش حالم از این بابت
      موفق باشید.

  3. سلام برای نمایشاطلاعات کنترل و فرستادن به وییو باید چی رو اضاف کرد به صفحه ی index.cshtml

    1. می تونید اطلاعات را داخل Model و ViewModel قرار بدید و بعد به View ارسال کنید و یا می تونید از Viewbag و یا ViewData استفاده نمایید.

    1. شما روی اکشن متد راست کلیک کنید گزینه add view براتون نمایش داده می شود
      اگر نمایش نمی دهد پیشنهاد میکنم ویژوال استدیو خودتون رو آپدیت کنید.

  4. @{
    Layout = null;
    }
    سلام وقتتون بخیر
    من دارم با دوره شما پیش میرم و عالیه ولی با ویژوال استدیو 2019 کار میکنم صفحه ویووی من
    @{
    ViewData[“Title”] = “MyView”;
    }

    میاد .
    آیا برای کپی نوشته شما باید جایگزین این کنم یا اینو بذارم متن شما رو هم بنویسم؟ اگه ممکنه توضیحی در مورد این تفاوتlayout و view بنویسید ممنون میشم

    1. سلام وقتتون بخیر … در مورد تفاوت Layout و View باید بگم که ما توی سایت بخش های ثابت سایت را که در صفحات مختلف تکرار می شوند مثل منو و فوتر سایت را در Layout تعریف میکنیم حالا هر کدوم از ویوها که به عنوان مثال به بخش های ثابت منو و فوتر سایت احتیاج داشته باشند می توانند از Layout استفاده کنند. و وقتی که شما توی ویو مقدار Layout را null قرار میدهید به این صورت Layout = null دیگر ویوی شما نمی تواند از Latout استفاده کند.

  5. سلام
    من برای ایجاد view به مشکل خوردم و با ارور زیر مواجه میشم:
    There was an error running the selected code generator.’Package restore failed. Rolling back Package chenges for ‘FirstWebApp’
    ممنون میشم پاسخ بدید.

    1. سلام وقتتون بخیر ، برای ایجاد ویو چک کنید که حتما به اینترنت متصل باشید چون برنامه میخواد که یک پکیج رو نصب کنه.

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

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

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

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

  8. سلام اول از همه خیلی ممنونم از توضیحات خوبتون ..من ویژوال استودیو 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@ قرار میگیره.

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

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

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=