۴
شهریور

جلسه ۱۳ : ایجاد Edit View در ASP.NET MVC

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. در بخش های قبلی در قالب مباحث آموزش Index view را ایجاد کردیم. در ادامه این مباحث در این بخش قصد داریم مراحل ایجاد Edit View در ASP.NET MVC را با توضیحات کامل انجام بدهیم. در این آموزش ما Edit view را با استفاده از قالب پیش فرض scaffolding ایجاد خواهیم کرد. سپس کاربر خواهد توانست داده های دانش آموز موجود را با استفاده از نمای Edit view به روز کند.

نتیجه ی Edit view

ایجاد Edit View در ASP.NET MVC

Edit view با کلیک روی دکمه ی Edit در Index view ایجاد می شود.

شکل زیر مجموعه کامل مراحل ویرایش را توصیف می کند:

مراحل ویرایش

در شکل بالا مراحل زیر انجام می شود:

۱- کاربر روی لینک Edit در Index view کلیک می کند. که درخواست HttpGET آدرس {http://localhost/student/edit/{Id را با پارامتر id متناظر در query string ارسال می کند.

درخواست فوق با متد اجرایی HttpGET Edit دستکاری می شود.

۲- متد HttpGet Edit اطلاعات دانش آموزان را از پایگاه داده بر اساس پارامتر id و Edit view را با داده های دانش آموزان خاص نمایش می دهد.

۳- کاربر می تواند داده ها را ویرایش کرده و روی دکمه Save در نمای ویرایش کلیک کند.

دکمه Save درخواست HttpPOST HTTP: // localhost / Student / Edit را باداده های فرم ارسال می کند.

۴- روش HttpPOST Edit Action در StudentController در نهایت داده ها را در پایگاه داده به روز می کند.

سپس یک صفحه Index را با داده های بازخوانی شده با استفاده از روش RedirectToAction به عنوان یک مرحله چهارم ارائه می دهد.

بنابراین این روند زمانیکه داده ها را با استفاده از Edit View در ASP.NET MVC ویرایش کنید؛کامل می شود.

از کلاس مدل Student برای Edit View استفاده می کنیم:

مثال :

public class Student
{
    public int StudentId { get; set; }

    [Display( Name="Name")]
    public string StudentName { get; set; }

    public int Age { get; set; }
}

public class Student

{

public int StudentId { get; set; }

[Display( Name="Name")]

public string StudentName { get; set; }

public int Age { get; set; }

}

مرحله ی ۱:

در حال حاضر در مرحله ی قبلی یک Index view ایجاد کرده ایم.

این Index view با استفاده از قالب Scaffolding که شامل یک پیوند عمل Edit است در زیر نشان داده ایم:

ایجاد index-view

یک لینک ویرایش درخواست HttpGet را با متد Edit Action StudentController با StudentId مربوطه در رشته پرس و جو ارسال می کند.

به عنوان مثال، Edit link با Student با نام John یک رشته پرس و جو StudentId = 1 را به url درخواست اضافه می کند.

مرحله ۲:

اکنون، یک متد اجرایی HttpGET Edit را در StudentController ایجاد می کنیم.

Index view نمایش داده شده در بالا، پارامتر StudentId را با متد اجرایی HttpGet Edit بر روی لینک Edit link ارسال می کند.

متد اجرایی () HttpGet Edit باید دو کار را انجام دهد:

ابتدا باید اطلاعات دانش آموز را از منبع داده زیر، که StudentId با StudentId در رشته پرس و جو مطابقت دارد، بیرون ببرد.

ثانیا، باید Edit view را با اطلاعات دانش آموزان ارائه دهد تا کاربر بتواند آن را به روز کند.

بنابراین، متد اجرایی ()Edit باید یک پارامتر StudentId داشته باشد.

MVC به طور خودکار یک رشته پرس و جو را به پارامترهای یک متد اجرایی مرتبط می کند البته اگر نام منطبق باشد.

لطفا مطمئن شوید که نام پارامتر با رشته پرس و جو مطابقت دارد.

مثال متد اجرایی ()Edit :

مثال :

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 Id)
        { 
            //Get the student from studentList sample collection for demo purpose.
            //Get the student from the database in the real application
            var std = studentList.Where(s => s.StudentId == Id).FirstOrDefault();
    
            return View(std);
        }
    }
}

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 Id)

{

//Get the student from studentList sample collection for demo purpose.

//Get the student from the database in the real application

var std = studentList.Where(s => s.StudentId == Id).FirstOrDefault();

return View(std);

}

همانطور که در متد Edit بالا مشاهده می کنید، ما از یک درخواست پرس و جوی LINQ استفاده کردیم.

پرس و جوی LINQ مجموعه نمونه studentList که StudentId با StudentId مطابقت دارد را دریافت می کند.

سپس یک آبجکت Student را به View نمایش می دهد.

در حال حاضر، اگر شما روی لینک Edit از نمای Index کلیک کنید، خطای زیر را دریافت خواهید کرد:

دریافت خطا

خطای فوق به این دلیل رخ داده است که ما هم هنوز یک Edit view ایجاد نکرده ایم.

به طور پیش فرض MVC به دنبال Edit.cshtml یا Edit.vbhtml یا Edit.aspx یا Edit.ascx در پوشه View -> Student یا Shared خواهد بود.

مرحله ۳ :

برای ایجاد Edit view داخل متد Edit راست کلیک کرده و روی Add View.. کلیک کنید. سپس پنجره Add View باز خواهد شد.

در پنجره ی Add View نام را در فیلد view name همان Edit قرار دهید.

تنظیم نام

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

انتخاب گزینه ها

اکنون روی 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>

@model MVC_BasicTutorials.Models.Student

ViewBag.Title = "Edit";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<h4>Student</h4>

<hr />

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.HiddenFor(model => model.StudentId)

@Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })

</div>

@Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger"< })

</div>

</div>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

توجه کنید که Edit.cshtml شامل متد @using (Html.BeginForm()) برای ایجاد یک عنصر فرم HTML است.

Html.BeginForm درخواست پیش فرض HttpPost را ارسال می کند.

حالا روی لینک Edit یک student در نمای Index view کلیک کنید.

Edit view اطلاعات student که روی آن کلیک کرده اید را نمایش خواهد داد:

نتایج نمایش

شما می توانید نام یا سن یک Student را ویرایش کرده و سپس روی Save کلیک کنید.

متد Save باید یک درخواست HttpPOST ارسال کند.

در واقع درخواست POST اطلاعات فرم را به عنوان بخشی از درخواست ارسال می کند.

بنابراین یک متد POST در مرحله ی بعدی ایجاد می کنیم.

مرحله ۴ :

حالا یک متد اجرایی ویرایش POST را برای ذخیره سازی student های ویرایش شده می نویسیم:

مثال :

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

[HttpPost]

public ActionResult Edit(Student std)

{

//write code to update student

return RedirectToAction("Index");

}

همانطور که می توانید در کد بالا مشاهده کنید، روش () Edit به یک شی Student به عنوان پارامتر ورودی نیاز دارد.

نمایه () Edit به طور خودکار مجموعه داده های فرم را به پارامتر model student متصل می کند.

در حال حاضر، با کلیک بر روی دکمه Save در نمای Edit ، اطلاعات به روز شده را ذخیره و آن را به متد اجرایی Index () ارسال می کند.

به این ترتیب، شما می توانید قابلیت Edit را با استفاده از قالب پیش فرض scaffolding ویرایش کنید.

با این حال، شما همچنین می توانید یک ویرایش بدون استفاده از یک قالب 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 Id)
        { 
            //Get the student from studentList sample collection for demo purpose.
            //Get the student from the database in the real application
            var std = studentList.Where(s => s.StudentId == Id).FirstOrDefault();
    
            return View(std);
        }

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

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 Id)

{

//Get the student from studentList sample collection for demo purpose.

//Get the student from the database in the real application

var std = studentList.Where(s => s.StudentId == Id).FirstOrDefault();

return View(std);

}

[HttpPost]

public ActionResult Edit(Student std)

{

//write code to update student

return RedirectToAction("Index");

}

کلام آخر

در مباحث فوق به شما آموختیم که چه طور با ایجاد Edit View در ASP.NET MVC اطلاعات دانش آموزان را ویرایش کرده و سپس آن را بروزرسانی کنید، در بخش بعدی به آموزش چگونگی اعتبار سنجی در نمای razor خواهیم پرداخت.

QR: جلسه ۱۳ : ایجاد Edit View در ASP.NET MVC

به اشتراک بگذارید

Edit View در ASP.NET MVC ,آموزش asp از مقدماتی تا پیشرفته ,آموزش asp.net mvc ,آموزش برنامه نویسی ,آموزش تصویری asp.net mvc ,دوره کامل آموزش asp.net mvc

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۳ : ایجاد Edit View در ASP.NET MVC

مقدمه

ایجاد Edit View در ASP.NET MVC

مرحله ی ۱:

مرحله ۲:

مرحله ۳ :

مرحله ۴ :

کلام آخر

لیست مطالب دوره

مقدمات آموزش ASP.NET MVC

آموزش Html helper

اعتبارسنجی در ASP.NET MVC

نمای طراحی

تکنیک Bundling

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ