خانه / برنامه نویسی / آموزش ASP.NET MVC برای مبتدیان-قسمت 15-Edit در MVC

آموزش ASP.NET MVC برای مبتدیان-قسمت 15-Edit در MVC

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

با سلام، ابتدای امر بنده باید از شما دوستان عذرخواهی کنم بابت تاخیری که در آماده کردن این قسمت داشتم.
در این جلسه در رابطه با Edit در MVC یا ویرایش رکورد در MVC صحبت میکنیم.
در اینجا ما در صفحه Index لیستی از تمام کارمندان را به نمایش گذاشته ایم که از بانک اطلاعاتی گرفته شده اند دقت کنید که در هر ردیف که مشخصات کارمند نمایش داده شده است لینکی یا عنوان ویرایش (Edit) نیز دیده میشود که با کلیک روی این لینک باید وارد صفحه ای شویم که حاوی فرمی برای ویرایش مشخصات است، سپس می توانیم مشخصات مورد نظر را ویرایش کنیم و با کلیک روی دکمه Save تمام تغییرات در بانک اطلاعاتی ذخیره کنیم.
حالا روی لینک Edit کلیک کنید ببینید چه اتفاقی خواهد افتاد، بله خطای 404 نمایش داده میشود! به دلیل این که صفحه ای
برای قسمت ویرایش در نظر گرفته نشده است یا به زبان ساده تر ویو ای نساخته ایم.
به آدرس دقت کنید، ما اکشن Edit را درخواست کرده ایم که درون کنترلر Employee قرار دارد و حالا به کلاس Employee دقت کنید
اکشن متدی با نام Edit نداریم! و این دلیل نمایش دادن صفحه 404 است، پس اولین کاری که باید انجام دهیم افزودن اکشن متد Edit به کلاس
Employee است.

کدهای اکشن متد Edit به صورت زیر هستند :

 

[HttpGet]
        public ActionResult Edit(int id)
        {
            var employeeBussinessLayer = new EmployeeBusinessLayer();
            var employee = employeeBussinessLayer.Employees.Single(emp => emp.EmployeeId == id);
            return View(employee);
        }

دقت کنید که نام این اکشن Edit است و با خاصیت HttpGet مشخص شده است که به این معنی است که این اکشن تنها به درخواست هاس Get پاسخ میدهد.
جا دارد که پرانتزی باز کنم برای توضیح Get و Post، به زبان بسیار ساده خدمت شما عرض میکنم که Get برای نمایش دادن است و Post برای ارسال به سرور.
پس این اکشن برای نمایش فرم ویرایش استفاده میشود و برای ثبت تغییرات (ارسال به سرور) نیاز به اکشن متد دیگری داریم که با خاصیت HttpPost مشخص شده باشد.
بازهم دقت کنید، این اکشن متد یک پارامتر یا ورودی دارد، آدرس را ببینید، بعد از نام اکشن (Edit) یک عدد نیز ارسال میشود که همان پارامتر است که شماره کارمند را ارسال میکند.
به کدهای درون اکشن دقت کنید، یک نمونه از BussinessLayer ساختیم و با استفاده از متدهای آن و پارامتر ارسالی رکوردی(کارمندی) که شماره آن برابر با پارامتر  ارسالی است را واکشی میکنیم و نتیجه را برای ویو ارسال کردیم (با دستور return View(…)) خوب اجازه بدید این تغییرات رو در کنترلر Employee اعمال کنیم یعنی اکشنی که توضیح دادیم رو اضافه کنیم.

برای این کار کدهای بالا رو به کنترلر Employee اضافه کنید.

یک بار دیگه خدمت شما توضیح میدم، یک نمونه از BussinessLayer درست کردیم و از پراپرتی Employee که تمام کارمندان رو میتونیم از اون واکشی کنیم استفاده کردیم و با استفاده از شرطی که گذاشتیم (کارمندی که شماره آن برابر پارامتر است را برگردان) رکورد یا کارمند مورد نظر رو واکشی کردیم و درون یک شی از نوع Employee قرار دادیم و به ویو ارسال کردیم.

حالا نیاز به ویو برای نمایش فرم و اطلاعات کارمند داریم، برای این کار روی اکشن مورد نظر کلیک راست میکنیم و AddView رو انتخاب میکنیم.(در این قسمت باهم یاد گرفتیم به چه صورتی ویوو اضافه کنیم)

نام ویو Edit و موتور Razor و کلاس مدل هم Employee و از منوی پایین افتان Template گزینه Edit رو انتخاب میکنیم.
با فشردن دکمه Add ویو مورد نظر ما اضافه خواهد شد، برنامه ر اجرا کرده به اکشن Index رفته و روی لینک Edit یکی از کارمندان کلیک کنید بله میبینید که فرم ویرایش کارمند نمایش داده میشود و مشخصات کارمند انتخاب شده در فیلدها قرار دارد. فقط چیزی که من رو اذیت میکنه جنسیت یا Gender هست که به صورت تکست باکس نمایش داده شده، بهتر نبود به صورت منوی پایین افتان نمایش داده میشد که فقط دو مقدار Male و Female رو داشته باشه؟
و اگر به یاد داشته باشید در ویو افزودن کارمند جدید هم برای مشخص کردن فیلد Gender یا جنسیت از DropDownList استفاده کردیم. پس میتونیم از همان کدها
در این ویو هم استفاده کنیم، کدهای زیر رو کپی میکنم که از ویو Create کپی کردم :

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

دوباره یکی از کارمندان را به حالت ویرایش ببرید، بله میبینید که جنسیت کارمند به صورت منوی پایین افتان در آمده است.
اجازه بدید تغیراتی در مشخصات کارمند ایجاد کنیم و تغییرات رو ذخیره کنیم! میبینیم که پیام خطای 404 یا پیدا نشدن صفحه نمایش داده میشود.
دلیل نمایش این پیام چی بوده!؟ اگر به خاطر داشته باشید بالاتر گفتیم که اکشن Get رو درست میکنیم، بله هنوز اکشن Post نوشته نشده پس وقتی روی دکمه دخیره تغییرات کلیک میکنیم و فرم را پست میکنیم اکشن Post ر پیدا نمیکند و پیام خطا نمایش داده میشود.

اجازه بدید مروری کنیم تا به اینجای کار رو، تا به اینجا اکشن متدی برای ویرایش یک کاربر درست کردیم که به درخواست های Get پاسخ میدهد پس وظیفه نمایش فرم مورد نظر برای ویرایش رو به عهده دارد، در این اکشن که یک ورودی یا پارامتر را دریافت میکند و این ورودی همان شماره کارمند است، با استفاده از لایه Bussiness کارمند مورد نظر را واکشی کردیم و به ویو مورد نظر ارسال کردیم.

در ادامه میخواهیم اکشن مربوط به همین Edit را درست کنیم که به درخواست های Post پاسخ میدهد و تغییرات انجام شده را برای ما ذخیره میکند.

دقت کنید وقتی روی دکمه Save کلیک میکنیم انتظار داریم رکورد کارمند مورد نظر به روزرسانی یا Update شود، پس برای اینکار ابتدا یک Stored Procedure ای برای ویرایش در بانک اطلاعاتی می سازیم، کدهای این Stored Procedure به صورت زیر هستند:

Create procedure spSaveEmployee
@Id int,
@Name nvarchar(50),
@Gender nvarchar(50),
@City nvarchar(50),
@DepartmentId int 
as
Begin
Update tblEmployee Set Name = @Name,Gender = @Gender,City = @City,DepartmentId = @DepartmentId 
Where EmployeeId = @Id 
End

این قدم اول بود و برای قدم دوم اضافه کردن متد مربوط به ثبت تغییرات رکورد در بانک اطلاعاتی است، کلاس EmployeeBussinessLayer رو باز کنید، اگر به خاطر داشته باشید در جلسه نهم این کلاس رو ساختیم و متد افزودن رکورد جدید رو به اون اضافه کردیم، در این جلسه متد مربوط به ویرایش برای انجام عمل Edit در MVC رو به این کلاس اضافه میکنیم :

public void SaveEmplotee(Employee employee)
        {
            string connectionstring = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

            using (var con = new SqlConnection(connectionstring))
            {
                var cmd = new SqlCommand("spSaveEmployee", con);
                cmd.CommandType = CommandType.StoredProcedure;

                var paId = new SqlParameter();
                paId.ParameterName = "@Id";
                paId.Value = employee.EmployeeId;
                cmd.Parameters.Add(paId);

                var paName = new SqlParameter();
                paName.ParameterName = "@Name";
                paName.Value = employee.Name;
                cmd.Parameters.Add(paName);

                var paCity = new SqlParameter();
                paCity.ParameterName = "@City";
                paCity.Value = employee.City;
                cmd.Parameters.Add(paCity);

                var paGender = new SqlParameter();
                paGender.ParameterName = "@Gender";
                paGender.Value = employee.Gender;
                cmd.Parameters.Add(paGender);

                var paDepartmentId = new SqlParameter();
                paDepartmentId.ParameterName = "@DepartmentId";
                paDepartmentId.Value = employee.DepartmentId;
                cmd.Parameters.Add(paDepartmentId);

                con.Open();
                cmd.ExecuteNonQuery();
            }
        }

اگر به خاطر داشته باشید این کدها در جلسه نهم تا حدودی توضیح داده شده است و تنها چیز متفاوت همان Stored Procedure بود که در جلسه نهم مربوط به ذخیره رکورد جدید بود و در این جلسه مربوط به ثبت تغییرات کارمند است.

و قدم سوم که قدم نهایی است ساخت اکشن Edit با خاصیت Post هست پس کلاس یا کنترلر Employee را باز کنید و کدهای زیر را به آن اضافه کنید :

[HttpPost]
        public ActionResult Edit(Employee employee)
        {
            if (ModelState.IsValid)
            {
                var employeeBussinessLayer = new EmployeeBusinessLayer();
                employeeBussinessLayer.SaveEmplotee(employee);
                return RedirectToAction("Index");
            }
            return View();
        }

خوب همونطور که مشاهده میکنید این اکشن با خاصیت Post علامت گذاری شده است و به این معنی است که به درخواست های Post پاسخ خواهد داد، یک ورودی که یک شی از Employee است را از ورودی دریافت میکند، اگر خطایی وجود نداشت (ModelState.IsValid) یک نمونه از BussinessLayer میسازیم و از متد SaveEmployee که بالاتر ساختیم استفاده میکنیم و شی employee را به آن پاس میدهیم و متد مورد نظر کار ذخیره تغییرات را انجام میدهد و کاربر به ویو Index ریدایرکت یا هدایت میشود. اگر مشکلی یا خطایی وجود داشت (برای مثال کاربر فیلدی را خالی گذاشته است) فرم ویرایش مجددا نمایش داده میشود.

حالا پروژه را اجرا کرده و آزمایش کنید، یکی از رکوردها را ویرایش کنید و تغییرات را ذخیره کنید، بله مشکلی نیست و کارمند با موفقیت ویرایش شد!

بسیار خوب، در این جلسه Edit در MVC رو با هم یاد گرفتیم، امیدوارم توضیحات بنده ساده و روان بوده باشه و دوستان عزیز استفاده کامل رو برده باشند.

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

 

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

تنظیمات در زامارین استادیو

آموزش زامارین قسمت دوم فیلم مقدمه ای بر زامارین

در پست مقدمه ای بر زامارین فلم آموزشی که وب سایت زامارین پرشین آماده کرده است را ...

پاسخ دهید

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