آموزش ایجاد یک نما ویرایش (Edit View) در ASP.Net MVC

آموزش ایجاد یک نمای ویرایش در (Edit View) در ASP.Net MVC :

در بخش های اموزشی قبل، فایل Index View را ایجاد کردیم. در این درس، با استفاده از یک تمپلیت scaffolding فایل EditView را ایجاد می کنیم. با استفاده از نما Edit View، کاربر می تواند اطلاعات هر Student مورد نظر خود را ویرایش کند. عکس زیر، خروجی نمای Edit View را نشان می دهد :

نما Edit View به هنگام کلیک کاربر بر روی دکمه Edit در صفحه Index View تولید خواهد شد. دیاگرام زیر، مراحل مختلف ویرایش اطلاعات Student را نشان داده است :

مراحل عملیات ویرایش، مطابق عکس فوق، به شرح زیر هستند :

1. کاربر بر روی لینک Edit در Index View، کلیک می کند. این کار، درخواست HttpGET Request با آدرس http://localhost/student/edit/{Id} را با پارامتر Id مشخص در query string ارسال می کند. درخواست ارسال شده، توسط متد اجرایی HttpGET Edit، مدیریت خواهد شد. (به صورت پیش فرض، اگر هیچ خاصیتی تعیین نشده باشد، متد اجرایی action method درخواست HttpGET را مدیریت می کند).
2. متد اجرایی HttpGET Edit، بر حسب پارامتر Id دریافتی، اطلاعات Student مورد نظر را از پایگاه داده دریافت کرده و نما Edit View را با اطلاعات آن دانش آموز، تولید می کند.
3. کاربر می تواند اطلاعات Student نمایش داده شده را ویرایش نموده و برای ثبت، دکمه Save را بزند. دکمه Save یک درخواست HttpPost Request را همراه با مجموعه اطلاعات فرم به آدرس http://localhost/Student/Edit، ارسال می کند.
4. در مرحله چهارم، متد اجرایی HttpPOST Edit، کلاس Student Controller ، اطلاعات جدید را در پایگاه داده به روز رسانی کرده و با استفاده از متد Redirect To Action ، صفحه Index View را با اطلاعات جدید، نمایش می دهد.
5. بنابراین، مراحل فوق، پروسه کامل ویرایش اطلاعات توسط یک Edit View در چهارچوب کاری MVC می باشد.

اکنون قصد داریم تا مراحل گفته شده را در عمل و همراه با سورس کدهای لازم آموزش دهیم.
از کلاس Student Model زیر در Edit View استفاده خواهیم کرد :

public class Student
{
    public int StudentId { get; set; }
    [Display( Name="Name")]
    public string StudentName { get; set; }
    public int Age { get; set; }
}

مرحله اول :

در درس های آموزشی قبل، با استفاده از تمپلیت Scaffolding List، یک Index View را ایجاد کردیم، که همانند تصویر زیر، اطلاعات کلیه Student ها را به همراه لینک های لازم جهت Edit و ... در یک لیست نشان می دهد :

یک لینک Edit، درخواست Http Request را به متد اجرایی کنترلر StudentController همراه با StudentId متناظر آن به عنوان query string ارسال می کند. برای مثال، لینک Edit سطر Student با نام John، پارامتر StudentId=1 را به صورت query string به آدرس url صفحه اضافه کرده و درخواست را ارسال می کند، زیرا مقدار خاصیت StudentId شخص John برابر با 1 است. به همین صورت، سایر لینک های Edit لیست فوق، حاوی یک پارامتر StudentId با پارامتر مربوط به آن هستند.

مرحله دوم :

در مرحله بعدی، یک متد اجرایی HttpGET Edit را در کنترلر StudentController ایجاد می کنیم. Index View مثال فوق، پارامتر StudentId را در هنگام کلیک بر روی لینک Edit به متد اجرایی HttpGET Edit ارسال خواهد کرد.
متد اجرایی ()HttpGet Edit بایستی دو کار را انجام دهد. در فاز اول، بایستی اطلاعات Student مورد نظر را از منبع داده ای تعیین شده دریافت کند، که در آن StudentId رکورد، با پارامتر StudentId موجود در query string یکسان باشد. سپس در فاز دوم، نمای Edit View را با اطلاعات Student انتخاب شده، نمایش داده تا کاربر بتواند اطلاعات آن را ویرایش کند.
برای رسیدن به اهداف فوق، action method بایستی دارای پارامتر StudentId باشد. چهارچوب کاری MVC، در صورتی که نام یک query string و نام پارامتر یک متد اجرایی، با هم یکسان باشد، آن دو را به هم متصل (Bind) می کند. بنابراین حتما توجه داشته باشید که نام query string با پارامتر متد اجرایی، یکسان باشد.
کد زیر، فایل کنترلر StudentController را نشان می دهد :

using MVC_BasicTutorials.Models;
namespace MVC_BasicTutorials.Controllers
{
    public class StudentController : Controller
    {
        IList<student> studentList = new List<student>() { 
                    new Student(){ StudentId=1, StudentName="John", Age = 18 },
                    new Student(){ StudentId=2, StudentName="Steve", Age = 21 },
                    new Student(){ StudentId=3, StudentName="Bill", Age = 25 },
                    new Student(){ StudentId=4, StudentName="Ram", Age = 20 },
                    new Student(){ StudentId=5, StudentName="Ron", Age = 31 },
                    new Student(){ StudentId=6, StudentName="Chris", Age = 17 },
                    new Student(){ StudentId=7, StudentName="Rob", Age = 19 }
                };
        public ActionResult Edit(int StudentId)
        { 
            //Get the student from studentList sample collection for demo purpose.
            //You can get the student from the database in the real application
            var std = studentList.Where(s => s.StudentId == StudentId).FirstOrDefault();
    
            return View(std);
        }
    }
}

همانطور که در متد Edit کد فوق مشاهده می کنید، با استفاده از یک LINQ query، اطلاعات Student مورد نظر در مجموعه Student List Collection را که مقدار StudentId آن با رکورد متناظر هم خوانی دارد، از پایگاه داده خوانده و سپس اطلاعات شی Student object را به View، ارسال کرده ایم.
حال، اگر بر روی لینک Edit در نمای Index View کلیک نماید، با خطای زیر مواجه خواهید شد :

خطای فوق، به دلیل این که ما هنوز یک Edit View، ایجاد نکرده ایم، رخ داده است. به صورت پیش فرض، چهارچوب کاری MVC، پس از کلیک بر روی لینک Edit، به دنبال یک View با نام های مثل Edit.cshtml، Edit.vbhtml، Edit.aspx و یا Edit.aspx در پوشه View->Student یا پوشه مشترک Shared خواهد پرداخت.

مرحله سوم :

برای ایجاد Edit View، درون کد متد Edit action کلیک راست کرده و گزینه Add View را انتخاب نمایید تا پنجره Add View، همانند تصویر زیر باز شود. در پنجره Add View، نام آن را همچنان Edit نگه داشته (گرچه نمی توان آن را به مقدار دلخواه تغییر داد).

در کادر کشویی Template، گزینه Edit و در کادر Model Class نیز آیتم Student را همانند توصیر زیر، انتخاب کنید :

اکنون، دکمه Add را بزنید تا برنامه نما Edit.cshtml را در پوشه View/Student با کد زیر، تولید کند :

@model MVC_BasicTutorials.Models.Student
@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Edit</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
                        <div class="form-horizontal">
                        <h4>Student</h4>
                        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.StudentId)
                        <div class="form-group">
            @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                @Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
            </div>
        </div>
                        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger"< })
            </div>
        </div>
                        <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

توجه داشته باشید که نما Edit.cshtml شامل یک متد با شناسه @using(()Html BeginForm) بوده که یک فرم HTML را بر روی صفحه ایجاد می کند. متد Html.BeginForm به صورت پیش فرض، در هنگام submit، یک درخواست HttpPOST را به سرور ارسال می کند.
اکنون، بر روی لینک Edit هر Student دلخواه خود در Index View کلیک نمایید. نما Edit View اطلاعات Student ای که روی لینک آن، کلیک کرده اید را همانند تصویر زیر نشان می دهد :

در فرم فوق، می توانید مقدار Name و Age دانش آموز مورد نظر را ویرایش کرده و برای ثبت دکمه Save را بزنید. متد save، اطلاعات جدید را به وسیله یک درخواست HttpPOST و در بدنه صفحه (نه به صورت query string در آدرس url) به مقصد ارسال می کند. بنابراین در مرحله چهارم بایستی یک متد POST را کدنویسی کنیم.

مرحله چهارم :

اکنون می توانید متد POST Edit را جهت ثبت اطلاعات ویرایش شده Student به صورت زیر بنویسید :

[HttpPost]
public ActionResult Edit(Student std)
{
    //write code to update student 
            
    return RedirectToAction("Index");
}

همانطور که در کد فوق مشاهده می کنید، متد ()Edit یک شی Student Object را به عنوان پارامتر ورودی نیاز دارد. نما Edit View به صورت اتوماتیک اطلاعات مجموعه فرم صفحه را به پارامترهای مدل Student، متصل می کند. برای دریافت اطلاعات بیشتر به بخش آموزش Model Binding در درس قبل بروید. در کد فوق، می توانید اطلاعات جدید ویرایش شده را در پایگاه داده به روز کرده و سپس View را به متد Index action ارسال کنید. (البته به دلیل این که بحث ویرایش اطلاعات مربوط به این بخش نیست، کد لازم آن را در این قسمت نشان داده ایم).
در نهایت، با زدن دکمه Save در نمای Edit View، اطلاعات جدید دانش آموز ثبت شده و صفحه به Index View، انتقال داده می شود.
در کد مثال این درس، از یک تمپلیت scaffolding آماده که دارای توابع و پارامترهای لازم جهت عملیات ویرایش است، استفاده کردیم. اما شما می توانید بدون استفاده از این تمپلیت و به صورت دستی کد لازم جهت انجام عملیات را بنویسید.
کد مثال زیر، کلاس StudentController را به همراه کلیه متدهای اجرایی آن نشان داده است :

using MVC_BasicTutorials.Models;
namespace MVC_BasicTutorials.Controllers
{
    public class StudentController : Controller
    {
        IList<student> studentList = new List<student>() { 
                    new Student(){ StudentId=1, StudentName="John", Age = 18 },
                    new Student(){ StudentId=2, StudentName="Steve", Age = 21 },
                    new Student(){ StudentId=3, StudentName="Bill", Age = 25 },
                    new Student(){ StudentId=4, StudentName="Ram", Age = 20 },
                    new Student(){ StudentId=5, StudentName="Ron", Age = 31 },
                    new Student(){ StudentId=6, StudentName="Chris", Age = 17 },
                    new Student(){ StudentId=7, StudentName="Rob", Age = 19 }
                };
        // GET: Student
        public ActionResult Index()
        {
            return View(studentList);
        }
        public ActionResult Edit(int StudentId)
        { 
            //Get the student from studentList sample collection for demo purpose.
            //You can get the student from the database in the real application
            var std = studentList.Where(s => s.StudentId == StudentId).FirstOrDefault();
    
            return View(std);
        }
        [HttpPost]
        public ActionResult Edit(Student std)
        {
            //write code to update student 
            
            return RedirectToAction("Index");
        }
    }
}

در درس بعدی به آموزش نحوه اعتبارسنجی (Validation) اطلاعات در یک Razor View خواهیم پرداخت.