آموزش ASP.NET Core MVC

پروژه‌ی عملی – تنظیم سناریو

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

ضمنا در این پروژه از تشریح برخی از جزئیات خودداری میکنم و بررسی بیشتر آنها را به فصل های بعدی موکول میکنم.

تنظیم سناریوی پروژه

وبسایتی را در نظر بگیرید که میهمان ها قرار است از طریق آن حضور خود را اعلام کنند این وب سایت باید دارای مشخصات زیر باشد.

  • صفحه نخست باید اطلاعاتی در باره مهمانی نشان دهد.
  • فرمی که مهمان باید آن را تکمیل کند.
  • اعتبارسنجی فرم و نمایش صفحه تشکر به مهمان
  • صفحه‌ای که نشان دهنده لیست مهمان ها باشد.

برای شروع کار ابتدا یک پروژه ایجاد نمایید من نام پروژه خودم را WellComeProject قرار می‌دهم شما می‌توانید یک نام دلخواه برای پروژه خود انتخاب کنید . چنانچه با نحوه ایجاد یک پروژه ی ASP.NET Core MVC آشنایی ندارید پیشنهاد میکنم مقاله آموزشی ایجاد پروژه در ASP.NET Core MVC را مطالعه نمایید و اگر نحوه ایجاد پروژه در ASP.NET Core را فراموش کردید به تصویر زیر دقت کنید:

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

حال یک کنترلر به پروژه خود اضافه نمایید برای ایجاد کنترلر بر روی پوشه Controllers راست کلیک کرده و گزینه Add انتخاب کنید سپس بر روی گزینه NewItem را کلیک کنید تا پنجره ی Add New Item برای شما باز شود.

نحوه افزودن کنترلر به پروژه ASP.NET Core
نحوه افزودن کنترلر به پروژه ASP.NET Core

سپس همانند تصویر زیر  MVC Controller Class را انتخاب نموده و سپس در قسمت Name یک نام برای کنترلر خود انتخاب کنید سپس بر روی Add کلیک کنید تا کنترلر ایجاد شود. من نام کنترلر خود را WellCome قرار می‌دهم.

نحوه افزودن کنترلر به پروژه ASP.NET Core
نحوه افزودن کنترلر به پروژه ASP.NET Core

حال فایل کنترلر را باز نموده و محتویات درون کنترلر را که در تصویر زیر دور آن خط کشیده ام را پاک کنید و خودتان یک action برای کنترلر خود تعریف نمایید.

من نام اکشن خودم را Index قرار می دهم حالا یک ViewBag درون اکشن متد تعریف کنید من ViewBag.Wellcome که دربردارنده متن خوش آمدگویی به مهمانی است را در درون اکشن متد تعریف می‌کنم به  صورت زیر :

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


namespace WellComeProject.Controllers
{
    public class WellCome : Controller
    {
        public ViewResult Index()
        {
            ViewBag.WellCome = "سلام مهمان گرامی به جشن ما خوش آمدید";
            return View();
        }
    }
}

لازم به ذکر است که شما می‌توانید نام دیگری به غیر از Index برای اکشن متد خود انتخاب نمایید حال باید یک View برای اکشن متد ایجاد کنید برای این منظور بر روی پوشه View راست کلیک کرده سپس گزینه Add و سپس New Folder را انتخاب کنید حال یک NewFolder در پوشه Views برای شما ایجاد می‌شود حال بر روی New Folder راست کلیک کرده و سپس Rename را انتخاب کنید نام این NewFolder را هم نام کنترلری که ایجاد کرده اید قرار دهید چون نام کنترلر من WellCome است من نام این پوشه را WellCome قرار می‌دهم.

ایجاد یک پوشه هم نام کنترلر در پوشه Views
ایجاد یک پوشه هم نام کنترلر در پوشه Views

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

نحوه ایجاد View در ASP.NET Core
نحوه ایجاد View در ASP.NET Core

حال درون View ابتدا Layout را برابر null کرده تا صفحه از layout پیش فرضی که در پوشه Shared تعریف شده استفاده نکند و سپس و کدهای html خود را برای خوش آمدگویی به مهمان بنویسند همچنین ViewBag.WellCome را برای نمایش متن خوش آمدگویی در View تعریف کنید دقت کنید که حتما باید قبل از ViewBag.WellCome علامت @ را قرار دهید. کدهای زیر مربوط به ویو Index است :

@{ 
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
    <style>
        .container{
            margin-top:40px;
            direction:rtl;
        }
    </style>
</head>
<body>
    <div class="container alert alert-info">
         <p>@ViewBag.WellCome</p>
         <p> برای بهتر برگزار شدن این جشن لازمه که اطلاعات خود را به عنوان مهمان وارد کنید برای این منظور بر روی دکمه " ثبت نام جهت شرکت درجشن " کلیک کنید .</p>
         <a class="pull-left btn btn-success">ثبت نام در جشن</a>
    </div>
</body>
</html>

در صورتی که با HTML آشنایی ندارید پیشنهاد میکنم که  آموزش HTML سایت میزفا رو از دست ندید . من برای استایل دهی از کلاس های Bootstrap استفاده کردم شما هم می‌تونید برای استفاده از بوت استرپ در Solution Explorer بر روی wwwroot کلیک کرده و سپس از داخل پوشه lib ، پوشه bootstrap را باز کنید و فایل bootstrap.css را داخل تگ head درگ کنید .

حال وقت آن رسیده که پروژه را اجرا کنید شما می‌تونید از روش قبلی که بهتون آموزش دادم پروژه را اجرا کنید یا برای اجرای پروژه بر روی دکمه IIS Express کلیک کنید. حال صفحه  localhost:xxxx  برای شما باز می‌شود به انتهای این آدرس نام کنترلر سپس علامت ‘/’ (اسلش) و سپس نام View خود را وارد نمایید تا ویوی شما نمایش داده شود. به تصویر زیر و آدرس مرورگر دقت کنید.

 

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

 

برچسب ها

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

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

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

‫11 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. با سلام و عرض خسته نباشید و ممنون بخاطر آموزش هاتون .
    یک سری سوالاتی داشتم در مورد layout
    قبلا در MVC با بوت استرپ به راحتی میشد بخش بندی کرد و در Layout بخشهای rendersection (قسمتهای چارچوب چپ و راست) رو تعیین کرد اما الان مشکل دارم و فکر میکنم اگر یک تعریف مختصری داشته باشید خیلی ممنون میشم .

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

    1. با سلام … اگر داخل ویو ، Layout رو Null کنید دیگه View از Layout.cshtml_ که در پوشه Shared تعریف شده استفاده نمی کنه … برای Null کردن هم از کد زیر درون View استفاده کنید .

      @{
          Layout = null;
      }
      
      1. با سلام و وقت بخیر من هم این مشکل رو دارم و هیچی نمیاره برام وقتی اون آدرس رو میزنم:(

        1. با سلام …. وقت شما هم بخیر … یک صفحه خالی برای شما میاره یا ارور 404 میده ؟

  2. با سلام
    در آخرین تصویری که شما منتشر کردید ، صفحه ی اضافه نمودن مهمان با یک فونت زیبا نمایش داده شده است؟
    لطفا میفرمایید اسم فونت مورد استفاده شما چیست؟
    و آیا این فونت را در همین صفحه باید مشخص کنیم یا در فولدر bootstrap

    با تشکر

    1. با سلام .
      اسم فونتی که من استفاده کردم Sahel هست شما هم می تونید در فایل css بوت استرپ این فونت رو تعریف کنید و هم می تونید در wwwroot یک پوشه به نام css ایجاد کنید و سپس درون این پوشه یک فایل css برای تعریف مسیر فونت ایجاد کنید.
      موفق باشید.

  3. با عرض سلام و خسته نباشید
    لطفا این پیغامو برای نمایش نذارین؛ صرفه جهت اطلاع هستش.
    جسارتا چنتا نکته و انتقاد رو می خواستم خدمتتون عرض کنم

    – اول اینکه، اسم پروژه و فایل هاتونو “WellCome” گذاشتین، که صحیحش “WelCome” هستش.

    – دوم اینکه، معمول اینه که برای ایجاد کنترلر، در پسوند اسم خود کلمه “Controller” رو میذارن؛ برای مثال اسم کنترلر شما میشه : “WellComeController”؛ ( بازم تاکید می کنم”معمول” نه “واجب” ).

    – سوم اینکه، برای ایجاد View راحت تر اینه که بعد از ساخت Controller داخل کنترلر خودتون راست کلیک کنید و بعد Add View رو انتخاب کنید، که دیگه نیازی به کار اضافی برای ایجاد فولدر جدید و … نباشه.

    – و چهارم، البته بنظر شخصی بنده اینکه؛ یکمی آموزشتون بر خلاف گفتتون 0 تا 100 نیست؛ و بعضی مسائل مهم رو نادیده گرفتین.

    با درود و تشکر بابت زحماتتون

    1. با سلام خدمت شما … بر خلاف خواسته ی شما من نظر شما رو تایید کردم به دلیل اینکه شما هم بتونید پاسخ رو بخونید و شاید این نقطه نظرات و انتقادات برای سایر بازدیدکننده ها هم به وجود بیاد … از شما تشکر میکنم بابت نگاه دقیقتون …
      _ نام پروژه زیاد مهم به نظر نمیاد … حالا WellCome یا WelCome فکر نمیکنم زیاد مهم باشه هر چند که خیلی جاها WellCome استفاده میشه.
      _ بله درست میگین .
      _متاسفانه من در ویژوال 2017 خیلی از امکاناتی که شما می گید رو نمی بینم قبلا در ویژوال 2015 خیلی راحت و به همین روشی که شما گفتید میشد View و Controller اضافه کرد اما در ویژوال 2017 من نتونستم … حتی من در ویژوال 2015 روی اکشن متد که راست کلیک میکردم می تونستم به راحتی View اضافه کنم اما این قابلیت رو در ویژوال 2017 ندیدم…
      _ کاش بعد از تکمیل دوره آموزشی قضاوت میکردید چون این دوره به قدری مفصل هست که بنده برای اینکه دوره زودتر تموم بشه می خوام بعضی از فصل ها رو به صورت ویدیویی منتشر کنم . در فصل های آینده به طور خیلی مفصل به مباحثی که فقط در حد آشنایی گفته شده مثل View ، Controller ، مسیریابی و … پرداخته میشه .
      ممنونم بابت حضورتون .

      1

پاسخی بگذارید

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

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

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

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