ការសិក្សាពីរបៀបប្រើប្រាស់ Model Binding ក្នុង ASP.NET MVC 5

មាតិកា

I. សេចក្តីផ្តើម

II.  គោលបំណង

III. តម្រូវការ

IV. អ្វីទៅជា Model Binding?

V.  No Binding

VI. Simple Binding

VII.Class Binding

VIII.Complex Binding

I. សេចក្តីផ្តើម

នៅក្នុង Tutorial នេះ យើងនឹងសិក្សាពីរបៀបប្រើប្រាស់ Model Binding នៅក្នុង ASP.NET MVC។ ដើម្បីយល់បន្ថែមទៀតសូមធ្វើការអនុវត្តន៍ដូចខាងក្រោម។

II. គោលបំណង

ក្រោយពីអនុវត្តន៍តាម Tutorial នេះ លោកអ្នកនឹងយល់អំពី

• យល់ដឹងពីរអ្វីទៅជា Model Binding
• យល់ដឹងពីដំណើរការរបស់ Model Binding
• យល់ដឹងពីការប្រើប្រាស់ programming code ជាមួយ asp.net mvc

III. តម្រូវការ

ដើម្បីអាចសិក្សា បានយើងត្រូវមាន

• Microsoft Visual Studio (any version)
• Microsoft SQL Server (any version)

IV. អ្វីទៅជា Model Binding?

តើយើងធ្លាប់បាយឆ្ងល់ថា តើ form dataទទួលយករាល់ properties របស់ model បានយ៉ាងដូចម្តេចទេ?សូមធ្វើការមើលទៅកាន់រូបខាងក្រោមនេះ៖

• យើងក៏អាចធ្វើការកត់សំគាល់បានដូចខាងក្រោមនេះ៖
  • It is much cleaner code and there is no fancy coding.
  • No type casting needed.
  • No need to remember model properties because it appears in IntelliSense.
  • Adding and deleting properties from model is easy.
• Model Binding ធ្វើអោយការងារទាំងអស់មានភាពងាយស្រួលប្រើប្រាស់។ ជាធម្មតា Model binding មានន័យថា bind នូវ input control របស់យើងទៅកាន់​ properties​ របស់ model និមួយៗរបស់វា។
• ខាងក្រោមនេះគឺជាតិចនិចមួយចំនួនក្នុងការប្រើប្រាស់ model binding ដើម្បីធ្វើការ access input data នៅក្នុង​ models ហើយនិង​ controllers.
  • No Binding
  • Simple Binding
  • Class Binding
  • Complex Binding
  • FormCollection Binding
  • Bind Attribute

V. No Binding

No Binding មានន័យថាការ access data ធ្វើឡើងដោយផ្ទាល់ ដោយគ្មានការ bind ទៅកាន់ specific model ឡើយ។

ឧទាហរណ៍

• Model: StudentModel.cs

namespace MvcForms.Models

{

    public class StudentModel

    {

        public int Id { get; set; }

        public string Name { get; set; }

    }

}

• View: Index.cshtml

<h2>Mvc Forms – Model Binding</h2>

@using (Html.BeginForm())

{

    <table>

        <tr>

            <td>Enter ID: </td>

            <td>@Html.TextBox(“Id”)</td>

        </tr>

        <tr>

            <td>Enter Name: </td>

            <td>@Html.TextBox(“Name”)</td>

        </tr>

        <tr>

            <td colspan=”2″><input type=”submit” value=”Submit”></td>

        </tr>

    </table>

}

<h4 style=”color:purple”>

    ID: @ViewBag.Id<br />

    Name: @ViewBag.Name<br />

</h4>

• Controller: HomeController.cs

public ActionResult Index()

{

    if (Request.Form.Count > 0)

    {

        ViewBag.Id = Request.Form[“Id”];

        ViewBag.Name = Request.Form[“Name”];

        return View(“Index”);

    }

    return View();

}

VI. Simple Binding

នៅក្នុង Simple Binding ត្រូវបាន pass parameter នៅក្នុង action method ជាមួយនឹងឈ្មោះដូចគ្នាទៅនឹង properties របស់ model។ ចំពោះ MVC default Binder នឹងធ្វើការmap​នូវ action method ដោយស្វ័យប្រវត្តិនូវ request.

• Controller: HomeController.cs

public ActionResult Index(int Id, string Name)

{

    ViewBag.Id = Id;

    ViewBag.Name = Name;

    return View(“Index”);

}

VII. Class Binding

នៅក្នុង Class Binding ត្រូវបាន pass model ជា parameter នៅក្នុងaction method ហើយបន្ទាប់មក access នូវ variable ដែលជា member របស់វាទាំងមូល។

• Controller: HomeController.cs

public ActionResult Index(StudentModel sm)

{

    ViewBag.Id = sm.Id;

    ViewBag.Name = sm.Name;

    return View(“Index”);

}

VIII. Complex Binding

Complex Binding វាត្រូវបានគេប្រើដើម្បី apply multiple នៅក្នុង view តែមួយ។ ខាងក្រោមនេះគឺជាឧទាហរណ៍ដែលបង្ហាញយើងអំពីរបៀប bind នូវ multiple models នៅក្នុង view តែមួយ។

ជំហានទី១៖ បង្កើត class models ចំនួន២ដូចខាងក្រោម

• Model: StudentModel.cs

namespace MvcForms.Models

{

    public class StudentModel

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public CourseModel courseModel { get; set; }

    }

}

• Model: CourseModel.cs

namespace MvcForms.Models

{

    public class CourseModel

    {

        public int Id { get; set; }

        public string Course { get; set; }

        public string Duration { get; set; }

    }

}

សូមធ្វើការអង្កេតមើល យើងបានបន្ថែម CourseModel ជា Property នៅក្នុង StudentModel។ ដូច្នេះ StudentModel មានសិទ្ធិដើម្បី access នូវ property របស់ CourseModel។

ជំហានទី២៖ បង្កើត Form ដូចខាងក្រោម

@model MvcForms.Models.StudentModel

<h2>Mvc Forms – Model Binding</h2>

@using (Html.BeginForm())

{

    <table>

        <tr>

            <td>Enter ID: </td>

            <td>@Html.TextBoxFor(m => m.Id)</td>

        </tr>

        <tr>

            <td>Enter Name: </td>

            <td>@Html.TextBoxFor(m => m.Name)</td>

        </tr>

        <tr>

            <td>Enter Course: </td>

            <td>@Html.TextBoxFor(m => m.courseModel.Course)</td>

        </tr>

        <tr>

            <td>Enter Duration: </td>

            <td>@Html.TextBoxFor(m => m.courseModel.Duration)</td>

        </tr>

        <tr>

            <td colspan=”2″><input type=”submit” value=”Submit”></td>

        </tr>

    </table>

}

<h4 style=”color:purple”>

    ID: @ViewBag.Id<br />

    Name: @ViewBag.Name<br />

    Course: @ViewBag.Course<br />

    Duration: @ViewBag.Duration<br />

</h4>

ជំហានទី៣៖ បង្កើត Action Method ដូចខាងក្រោម

[HttpGet]

public ActionResult Index()

{

    return View();

}

[HttpPost]

public ActionResult Index(StudentModel sm)

{

    ViewBag.Id = sm.Id;

    ViewBag.Name = sm.Name;

    ViewBag.Course = sm.courseModel.Course;

    ViewBag.Duration = sm.courseModel.Duration;

    return View(“Index”);

}

លទ្ធផល