خانه / برنامه نویسی / آموزش ASP.NET MVC برای مبتدیان-جلسه دهم-ساخت ویو برای ثبت اطلاعات در بانک اطلاعاتی
امدادگرافیک

آموزش ASP.NET MVC برای مبتدیان-جلسه دهم-ساخت ویو برای ثبت اطلاعات در بانک اطلاعاتی

در این جلسه قصد داریم ساخت ویو برای ثبت اطلاعات رو کار کنیم، دقت کنید فقط ویو رو در این جلسه درست میکنیم و در جلسات آینده در رابطه با ثبت اطلاعات در بانک اطلاعاتی صحبت خواهیم کرد.

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

آموزش ASP.NET MVC برای مبتدیان – مقدمه

آموزش ASP.NET MVC برای مبتدیان-جلسه اول

آموزش ASP.NET MVC برای مبتدیان-جلسه دوم

آموزش ASP.NET MVC برای مبتدیان-جلسه سوم

آموزش ASP.NET MVC برای مبتدیان-جلسه چهارم

آموزش ASP.NET MVC برای مبتدیان-جلسه پنجم

آموزش ASP.NET MVC برای مبتدیان-جلسه ششم

آموزش ASP.NET MVC برای مبتدیان-جلسه هفتم

آموزش ASP.NET MVC برای مبتدیان-جلسه هشتم

آموزش ASP.NET MVC برای مبتدیان-جلسه نهم

ما میخواهیم ویو ای درست کنیم تا اطلاعات یک کارمند رو دریافت کرده و در بانک اطلاعاتی ثبت کنه :

ساخت ویو در MVC
ساخت ویو در MVC

CreateView

اگر به خاطر داشته باشید در جلسه ی قبل ویو Index رو درست کردیم که یک لیست از کارمندان (جدول tblEmployee) رو برای ما نمایش میداد و در این ویو لینک هایی مثل Edit و Delete و Create داشتیم، وقتی روی لینک Create کلیک میکنیم (به آدرس http://localhost/MVCDemo/Employee/Create هدایت میشیم) میبینیم که خطای 404 به معنی پیدا نشدن صفحه مورد نظر رو به ما نمایش میده، اگر به خاطر داشته باشید ما در MVC صفحه ای نداریم و صفحات ما رو اکشن متدها و ویوها درست میکنند، پس یعنی اکشن متد و ویو ای به نام Create نداریم! در این جلسه میخواهیم طریقه ی ساخت ویو Create رو بررسی کنیم و در جلسات آینده اکشن متد اون رو آماده میکنیم تا یک فرم برای ثبت اطلاعات در پایگاه داده داشته باشیم.(ساخت ویو برای ثبت اطلاعات)

برای رفع این خطا (خطای 404) ابتدا باید اکشن متد Create رو در کنترلر Employee اضافه کنیم.پس زیر اکشن متد Index اکشن متد Create رو به صورت زیر اضافه میکنیم :

public ActionResult Create()
{
	return View();
}

 

خوب اجازه بدید در یک مورد توضیح بدم خدمت شما بعد ادامه کدها رو اضافه کنیم، اکشن متد Index رو یادتون هست؟یک لیست از رکوردهای جدول tblEmployee رو نمایش میداد، پس فقط چیزی رو نمایش میداد و قرار نبود فرمی رو ثبت کنه یا در اصطلاح ارسالی به سرور نداشتیم،حالا اکشن متد Create رو تصور کنید، یک فرم یا کلا یک ظاهری رو باید اول به ما نمایش بده و بعد قراره همون فرم رو پر کنیم و به سرور ارسال کنیم تا در بانگ اطلاعاتی ثبت کنیم، پس ارسال اطلاعات هم داریم، پس دو اکشن با نام Create باید داشته باشیم! که یکی ویو رو برمیگردونه و دومی وظیفه انجام عملیات ثبت اطلاعات در بانک اطلاعاتی رو دارد (زمانی که روی دکمه “ثبت کن” کلیک کردیم این اکشن متد فراخوانی میشود)، اما یادتون که هست!؟ نمیتونیم دو امشن متد همنام داشته باشیم پس اینجا باید از خاصیت (Attribute) به نام HttpGet و HttpPost استفاده میکنیم. از HttpGet برای اکشن متدی که ویو رو برمیگردونه استفاده میشه (چون این اکشن متد فقط به درخواست نمایش ویو پاسخ میده) و از HttpPost برای اکشن متدی که اطلاعات رو ثبت میکنه، پس کدهای بالا به شکل زیر تغییر میکنند :

[HttpGet]
public ActionResult Create()
{
	return View();
}

 

حالا روی اکشن متد Create کلیک راست کنید و گزینه Add View رو انتخاب کنید،از منوی پایین افتان Template گزینه Create رو انتخاب میکنیم (در ویژوال استادیو 2010 باید ابتدا گزینه create a strongly-typed view رو اول انتخاب میکنید بعد از Template گزینه Create رو انتخاب میکنید) و برای Model Class هم مدل که همون کلاس Employee هست رو انتخاب میکنیم. خوب ببینید در این قسمت ما حالت Template یا همون Scaffold Template رو روی Create قرار دادیم ببینید این Scaffold Template بر اساس مدل و گزینه انتخابی (که ما Create رو در اینجا انتخاب کردیم) یک سری کدهای پیش فرض رو برای ما در ویو درست میکنه که در اینجا برای ما فرم ثبت اطلاعات رو از روی مدل درست میکنه، به تعداد پراپرتی هایی که برای Employee داشتیم فیلد ورود اطلاعات قرار میده.

بهتره روی Create کلیک کنید تا ویو ساخته بشه و خودتون نتیجه رو ببینید، یک ویو در پوشه Employee که در پوشه Views قرار دارد ساخته شد، ویو رو باز کنید میبینید که کدهایی رو هم برای شما درست کرده یک بار اجرا کنید تا ببینید به چه صورتی در آمده است، تا اینجا ویو مورد نظر برای ما ساخته شد ولی اجازه بدید کمی تغییرات بدیم.

ابتدا پایین صفحه قسمت اسکریپت رو دقت کنید :

@section Scripts {
	@Scripts.Render("~/bundles/jqueryval")
}

 

ما نیازی به این قسمت نداریم و در جلسات بعدی در باره قسمت اسکریپت ها صحبت خواهیم کرد پس این قسمت رو پاک میکنیم (البته اگر وجود داشت).

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

اگر یادتون باشه زمانی که پنجره Add View باز شد در قسمت Model Class نام کلاس Employee رو انتخاب کردیم که در کلاس Employee هم دقیقا همین پراپرتی ها رو داشتیم، از روی همون پراپرتی ها این فرم برای ما درست شده.

خوب برگردیم به بحث اصلی، ببینید در قسمت جنسیت (Gender) ما دو انتخاب بیشتر نداریم مرد یا زن (Male/Female) پس نیازی به تکست باکس نداریم یک DropDownList کفایت میکند.

برای این کار ویو رو باز کنید و به دنبال این قسمت بگردید :

<div class="form-group">
@Html.LabelFor(model => model.Gender, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Gender)
@Html.ValidationMessageFor(model => model.Gender)
</div>
</div>

حالا قسمت EditorFor رو باید تغییر بدیم، در اینجا داریم از HtmlHelper استفاده میکنیم که در جلسات بعدی بیشتر صحبت خواهیم کرد.

<div class="form-group">
@Html.LabelFor(model => model.Gender, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Gender",new List<SelectListItem>
{
new SelectListItem{Text = "Male", Value = "Male"},
new SelectListItem{Text = "Female", Value = "Female"}
})
@Html.ValidationMessageFor(model => model.Gender)
</div>
</div>

 

میبینید که ما از HtmlHelper استفاده کردیم به صورت Html.DropDownList که اولین پارامتر عنوان بود و دومی یک لیست بود.

حالا فرم رو اجرا کنید میبینید که به جای تکست باکس یک دراپ دان لیست برای ما نمایش داده میشود، دقت کنید به صورت پیشفرض مقدار Male در حالت انتخاب قرار گرفته ولی میخواهیم یک متن مانند “Select Gender” یا “جنسیت را انتخاب کنید” نمایش داده شود، برای این کار دوباره به ویو برگشته و قسمت ویرایش شده رو ببینید، به صورت زیر تغییر میدهیم :

@Html.DropDownList("Gender",new List<SelectListItem>
                {
                    new SelectListItem{Text = "Male", Value = "Male"},
                    new SelectListItem{Text = "Female", Value = "Female"}
                },"Select Gender")

 

تنها کاری که کردیم اضافه کردن یک پارامتر دیگر به انتهای HtmlHelper بود که متن مورد نظر ما رو گرفت.

تا اینجا قسمت HttpGet اکشن متد Create رو درست کردیم یعنی شما اگر آدرس Http://localhost/MvcDemo/Employee/Create رو در مرورگر تایپ کنید میبینید که این فرم نمایش داده میشود،

یعنی اکشن متدی که با خاصیت HttpGet مقدار دهی شده بود پاسخگو است، حالا روی دکمه Create در همین فرم کلیک کنید میبینید که خطای 404 نمایش داده میشود، به آدرس دقت کنید، بله همان آدرس Http://localhost/MVCDemo/Employee.Create است اما چرا خطای 404 !؟

به دلیل اینکه ما روی دکمه Create کلیک کردیم و این بدان معنی است که اکشن متد Create که خاطیت HttpPost در بالای آن نوشته شده است را فراخوانی کرده ایم (اطلاعاتی را پست میکنیم) ولی اکشن متدی با این مشخصات وجود ندارد.

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

با ما همراه باشید.

مطلب پیشنهادی

کمپایلر زبان های برنامه نویسی

دانلود کمپایلر زبان های برنامه نویسی

کمپایلر زبان های برنامه نویسی AIDE مخفف محیط یکپارچه توسعه دهندگی اندروید می باشد. با ...

پاسخ دهید

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

برای مشاهده محصولات به قسمت فروشگاه سایت مراجعه نمایید. رد کردن