آموزش ASP.NET Core MVC

پروژه‌ی عملی – ایجاد فرم ورود اطلاعات

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

ایجاد فرم ورود داده ها

پس از ایجاد نمایی که به داده ها مقید است و امکان دسترسی به آن از نمای Index ، نوبت تهیه محتوای صفحه Create.cshtml برای ویرایش اشیا ایجاد شده از کلاس GuestResponse رسیده است.
محتوای ویوی Create را ویرایش کرده و کدهای زیر در آن جایگزین کنید در ادامه‌ی این مقاله آموزشی به شما نحوه ایجاد این فرم را آموزش خواهم داد پس اگر با دیدن این کدها گیج شده اید نگران نباشید.

@model WellComeProject.Models.GuestResponse
@{
    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;
            width:40% !important;
            line-height: 28px;
        }
        label{
            font-weight:100 !important;
        }
    </style>
</head>
<body>
    <div class="container alert alert-info">
        <form asp-action="Create" method="post">
            <p>
                <label asp-for="Name">نام </label>
                <input asp-for="Name" class="form-control" />
            </p>

            <p>
                <label asp-for="Family">نام خانوادگی </label>
                <input asp-for="Family" class="form-control" />
            </p>

            <p>
                <label asp-for="Phone">تلفن </label>
                <input asp-for="Phone" class="form-control"/>
            </p>

            <p>
                <label>آیا در مهمانی شرکت خواهید کرد ؟</label>
                <select asp-for="WillAttend" class="form-control">
                    <option value="">انتخاب کنید</option>
                    <option value="True">بله</option>
                    <option value="False">خیر</option>
                </select>
            </p>

            <button type="submit" class="pull-left btn btn-success">ارسال اطلاعات فرم</button>
            
        </form>
    </div>
</body>
</html>

برای هر یک از خاصیت‌های تعریف شده در کلاس مدل GuestResponse یک عنصر Input و یک عنصر label تعریف شده است . هر یک از این عناصر به وسیله صفت asp-for که یک Tag Helper دیگر است به خصوصیتی از کلاس مدل متصل شده اند. در ادامه مثالی از کد اچ تی ام الی که Tag Helper های یاد شده ایجاد می‌کنند را می‌بینید.

<p>
   <label for="Name"> Your Name: </label>
   <input type="text" id="Name" name="Name" value=""/>
</p>

صفت asp-for در عنصر label تعیین کننده مقدار صفت for است (صفت for مربوط به تگ یا عنصر label معمولی ) به همین شکل صفت asp-for در عنصر input تعیین کننده‌ی مقدار صفت های id و name این عنصر است . این موضوع ممکن است هم اینک زیاد مهم به نظر نرسد ولی در آینده با فواید مهم تری از متصل کردن عناصر HTML با خصوصیات مدل داده آشنا خواهید شد.
صفت asp-action که در عنصر form به کار رفته در اینجا از اهمیت بیشتری برخوردار است این صفت با استفاده از پیکربندی مسیرهای پروژه در مورد URL ها ، صفت action (مربوط به عنصر form) را به فرمی تنظیم می‌کند که متد اکشن خاصی در کنترلر را هدف گیری کند :

 <form  method="post" action="/WellCome/Create">

معنی آن این است که اطلاعات فرم با روش post ( با استفاده از هدرهای HTTP) برای متد اکشن Create در کنترلر WellCome فرستاده می شوند. اجرای برنامه و کلیک بر روی لینک “ثبت نام در جشن” در ویوی Index فرم ساخته شده با Tag Helper ها را نمایش می‌دهد. من برای زیباتر شدن فرم ورود اطلاعات از کلاس های بوت استرپ استفاده کردم شما هم می‌توانید برای زیباتر نمودن تگ input از کلاس form-control و برای دکمه ها از کلاس btn و برای تغییر رنگ دکمه از کلاس های btn-danger ، btn-success ، btn-primary و … استفاده کنید .

حال پروژه رو اجرا کنید و آدرس /WellCome/Create/ را در نوار آدرس اضافه کنید فرمی به شکل زیر مشاهده می‌نمایید.

فرم ورود اطلاعات در ASP.NET Core
فرم ورود اطلاعات در ASP.NET Core

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

برچسب ها

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

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

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

‫4 نظرها

  1. من درحال خودآموزی ASP.Net هستم تا یک ایده ایی که شامل یک سایت با خواص عضویت و دسترسی های متفاوت و خرید و فروش داکیومنت و فایل میباشد را بسازم. خیلی تجاری نیست زیرا مشتری هایم محدود هستند ، و فقط احتیاج دارم که کار با سایت راحت باشد.

    سوال من اینجاست ، من یک سری فیلم آموزشی به زبان انگلیسی برای ASP.NET MVC 5 با EE را دارم
    ولی تمایل دارم Core 2 را یاد بگیرم ، یا درواقع با core 2 شروع کنم

    با توجه به محدودیت وقتی که دارم (فقط شبی 1 تا 2 ساعت) نمیتوانم هر دو را جداگانه مطالعه کنم

    آیا در این دو روش تفاوت های زیادی وجود دارد ؟؟؟؟ با توجه به اینکه فیلم اولی بسیار دقیق و کامل است ، مطالب در خصوص core 2 روی اینترنت بسیار محدود است به نظر شما با کدام شروع کنم

    از اینکه سوال بنده خصوصی است و بی ربط به مطالب آموزشی شماست بسیار بسیار پوزش میطلبم

    1. با سلام … نظر بنده این است که شما با یادگیری ASP.NET MVC 5 آموزش رو شروع کنید چرا یادگیری ASP.NET Core برای افرادی که ASP.NET MVC 5 رو به خوبی یادگرفتن خیلی سادست و قطعا در زمان خیلی کوتاه می تونید ASP.NET Core را یاد بگیرید.
      ASP.NET MVC و ASP NET Core از نظر ساختار برنامه نویسی خیلی مشابه هستند برای همین بنده به شما پیشنهاد میکنم که ابتدا آموزش ASP NET MVC رو به صورت کامل یاد بگیرید و بعد برید سراغ برنامه نویسی ASP.NET Core . شما بعد از یادگیری ASP NET MVC قادر خواهید که یک سایت با تمامی امکاناتی که ذکر کردید را پیاده سازی کنید.
      موفق باشید.

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

    من برای تولید ویوی Create در کنترلر روی ویورریزالت Create راست کلیک کردم و ایتم اول (ساخت ویور) رو انتخاب کردم و از تمپلت اتوماتیک کرییت استفاده کردم
    تمام کد های شما را اتوماتیک ایجاد نمود ، ولی کم و بیش متفاوت
    خیلی شبیه بود ولی متفاوت برای همین نتوانستم از آن استفاده کنم ، و دوباره به کد شما مراجعه کردم

    به نظر من بهتر است از ویزارد های اتوماتیک خود میکروسافت استودیو استفاده کنید و پس از ایجاد به شرح کد ایجاد شده یا تغییر آن بپردازید ، زیرا برای تازه کار ها و آماتور ها این بهترین راه برای رسیدن به اهداف کوتاه مدت و ساده است

    سوال دیگری نیز دارم که در یک پست جداگانه عرض مینمایم

    1. با سلام … شما درست می فرمایید ….استفاده از کدهای آماده ی مایکروسافت برای شروع کار و استفاده ی افراد تازه کار خیلی خوبه ولی در عین حال برای فردی که هیچ پیش زمینه ای در مورد برنامه نویسی ASP نداره خیلی گیج کننده هست و وقتی که فرد کد ایجاد شده رو درک نکنه در آینده نمی تونه کدنویسی در سطح پیشرفته انجام بده چون در واقع کدهایی که به صورت اتوماتیک ساخته نشده رو نمی تونه درک کنه و تغییر بده … انشالله در جلسات آینده نحوه استفاده از ویوهای ها و کنترلرهایی که برای 4 عمل اصلی به صورت اتوماتیک ایجاد می شود را آموزش خواهم داد فقط الان کمی زوده و افرادی که دوره رو به تازگی شروع کنن باید ابتدا با مفاهیم اولیه MVC آشنا بشن اونوقت درک این کدهای آماده براشون خیلی راحت تر خواهد بود … با تشکر از نگاه دقیقتون.

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

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

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

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

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