ការសិក្សាពីរបៀប បង្កើត Form តាមរយៈវិធី៤យ៉ាងក្នុង ASP.NET

មាតិកា

សេចក្តីផ្តើម
គោលបំណង
តម្រូវការ
ជំហានទី១៖ បង្កើត Project
ជំហានទី២៖ បង្កើត Class Model
ជំហានទី៣៖ Forms – Weakly Typed
ជំហានទី៤៖ Forms – Strongly Typed
ជំហានទី៥៖ Forms – Strongly Typed Ajax (Asynchronous)
ជំហានទី៦៖ ការប្រើប្រាស់ HTML Forms ជាមួយ Ajax និង JQuery

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

នៅក្នុង Tutorial នេះ យើងនឹងសិក្សាពីរបៀប បង្កើត Form តាមរយៈវិធី៤យ៉ាងដោយប្រើប្រាស់ ASP.NET MVC។ ខាងក្រោមនេះនឹងបង្ហាញពីជំហាននីមួយៗក្នុងការ implementation កូដ។

2. គោលបំណង

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

យល់ដឹងពីរបៀបបង្កើត Form ជាមួយNET MVC
យល់ដឹងពីវិធីសាស្រ្ត៤យ៉ាងដើម្បីបង្កើត Forms
- Forms – Weakly Typed (Synchronous)
- Forms – Strongly Typed (Synchronous)
- Forms – Strongly Typed AJAX (Asynchronous)
- Forms – HTML, AJAX and JQUERY
យល់ដឹងពីរបៀប Access Form data នៅក្នុង Controllers

3. តម្រូវការ

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

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

4. ជំហានទី១៖ បង្កើត Project

សូមចូលទៅបើកកម្មវិធី Microsoft visual studio

ចុច “Start”
បន្ទាប់ “All Programs”
ជ្រើសរើសយក “Microsoft Visual Studio 2015”.
ចូលទៅកាន់ File à New à Project
សូមមើលមេរៀនពីមុនៗអំពីរបៀបបង្កើត Project ជាមួយ MVC

5. ជំហានទី២៖ បង្កើត Class Model

សូមធ្វើការបង្កើត Class model “StudentModel”

right click លើ Model
Add
Class

ចូរសរសេរ Script ដូចខាងក្រោម៖

public class StudentModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool Addon { get; set; }
    }

6. ជំហានទី៣៖ Forms – Weakly Typed

Forms weakly typed គឺជាវិធីសាស្រ្តយ៉ាងងាយស្រួលនិងឆាប់រហ័សបំផុតក្នុងការបង្កើត Forms នៅក្នុង MVC

ចូលទៅកាន់ Views à Home àcshtml រួចធ្វើការកែប្រែកូដដូចខាងក្រោម

<h4 style="color:purple">
    <b>ID:</b> @ViewBag.ID <br />
    <b>Name:</b> @ViewBag.Name <br />
    <b>Addon:</b> @ViewBag.Addon
</h4>
<hr />
<h3><b>Forms - Weakly Typed</b></h3>
<form action="form1" method="post">
    <table>
        <tr>
            <td>Enter ID:</td>
            <td><input type="text" name="txtId" /></td>
        </tr>
        <tr>
            <td>Enter Name:</td>
            <td><input type="text" name="txtName" /></td>
        </tr>
        <tr>
            <td>Addon: </td>
            <td><input type="checkbox" name="chkAddon" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Submit Form" /></td>
        </tr>
    </table>
</form>

បន្ទាប់មកទៀត សូមធ្វើការ add action method សម្រាប់ form1 នៅក្នុង HomeController.cs

public ActionResult form1(int txtId, string txtName, string chkAddon)
        {
            ViewBag.Id = txtId;
            ViewBag.Name = txtName;
            if(chkAddon !=null)
            {
                ViewBag.Addon = "Selected";
            }
            else
            {
                ViewBag.Addon = "Not Selected";
            }
            return View("Index");
        }

output:

ការបកស្រាយ
- នៅក្នុង <form action=”form1″ method=”post”> ដែល form1 គឺជា action method ដែលធ្វើការ execute នៅពេលដែល form ធ្វើការបញ្ជូន dataទៅកាន់ HomeController ដោយប្រើប្រាស់ method “post”
- នៅក្នុង <input type=”text” name=”txtId” /> property name=”txtId” ត្រូវតែដូចគ្នាទៅនឹងឈ្មោះ parameter នៅក្នុង action method “form1”
- CheckBox sends “on” ប្រសិនបើវា selected ផ្ទុយមកវិញវានឹង send null
- គុណសម្បត្តិនៃការប្រើប្រាស់ Weakly Typed Form
  - វាងាយស្រួលក្នុងការបង្កើត Form
  - វាត្រូវបានគេប្រើប្រាស់ជាញឹកញាប់ភាគច្រើននៅពេលដែលយើងត្រូវការបង្កើត Form មួយជាមួយនិង input items មួយឬក៏ពីរ
- គុណវិបត្តិនៃការប្រើប្រាស់ Weakly Typed Form
  - Because, it is not strongly typed so IntelliSense doesn’t help you.
  - Have higher chance of getting exception and runtime error messages.
  - Very difficult to manage when forms have multiple input items and controls.
  - It is very clumsy when you need to add or remove some input items.

7. ជំហានទី៤៖ Forms – Strongly Typed

នៅក្នុងវិធីសាស្រ្តនេះ យើងធ្វើការ send នូវ object (model) ជំនួសដោយការ send នូវ item និមួយៗតាមរយៈ parameter។ វាមានភាពងាយស្រួលដើម្បីធ្វើការ maintain ដោយសារតែយើងមិនចាំបាច់ត្រូវការចងចាំរាល់ input item និមួយៗឡើយ ពីព្រោះ IntelliSense នឹងបង្ហាញយើងដោយស្វ័យប្រវត្តិនៅពេលដែលយើងវាយនូវ property របស់វា។

វិធីសាស្រ្តអនុវត្តន៍

ចូលទៅcshtml រួចសរសេរកូដដូចខាងក្រោម

@model _4WaysToCreateFormInAspMvc.Models.StudentModel
<h4 style="color:purple">
    <b>ID:</b> @ViewBag.ID <br />
    <b>Name:</b> @ViewBag.Name <br />
    <b>Addon:</b> @ViewBag.Addon
</h4>
<hr />
<h3><b>Forms - Strongly Typed</b></h3>
@using (Html.BeginForm("Form2","Home",FormMethod.Post))
{
    <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>Addon: </td>
            <td>@Html.CheckBoxFor(m => m.Addon)</td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Submit Form" /></td>
        </tr>
    </table>
}

បន្ទាប់មកទៀតចូលទៅcs រួចធ្វើការបន្ថែមនូវ action method ដូចខាងក្រោម

public ActionResult Form2(Models.StudentModel sm)
        {
            ViewBag.Id = sm.Id;
            ViewBag.Name = sm.Name;
            if(sm.Addon ==true)
            {
                ViewBag.Addon = "Selected";
            }
            else
            {
                ViewBag.Addon = "Not Selected";
            }
            return View("Index");
        }

Output:
ការបកស្រាយ
- @using (Html.BeginForm(“Form2”, “Home”, FormMethod.Post)) ត្រូវបានគេប្រើសម្រាប់ធ្វើការបង្កើតនូវ Strongly typed form ដែលក្នុងនោះមាន parameter ចំនួន៣
  - Form2: គឺជា ឈ្មោះរបស់ action method
  - Home: គឺជាឈ្មោះរបស់ Controller
  - Post: គឺរាល់ data ទាំងអស់នឹងត្រូវបាន submitទៅកាន់ controller តាមរយៈ method POST
  - @Html.TextBoxFor(m => m.Id)វាគឺជា Html helper។ នៅក្នុងនោះគឺយើងបង្កើត textbox ដោយប្រើប្រាស់ mvc html helper
  - m => m.Id គឺជា lambda expression ដែល mគឺជា instance of StudentModel

8. ជំហានទី៥៖ Forms – Strongly Typed Ajax (Asynchronous)

Asynchronous AJAX form គឺជាវិធីសាស្រ្តដើម្បីធ្វើការ submit data ទៅកាន់ Controller ដោយមិនអោយ load page។ ដើម្បីអាចប្រើប្រាស់នូវ Ajax Form បានលុះត្រាតែយើងត្រូវធ្វើការ add នូវ JQuery-Unobstrusive-AJAX ចូលទៅក្នុង project។

ដើម្បីអាច add JQuery-Unobstrusive-AJAX
- Right click លើឈ្មោះ Project ក្នុង solution explorer
- click លើ Manage Nuget Packages…
- ចូលទៅ Browse ហើយ search រកពាក្យ ajax
- ធ្វើការតម្លើង Microsoft-JQuery-Unobstrusive-Ajax.
- ក្រោយពីតម្លើងរួចយើងនឹងឃើញវានៅក្នុង folder Script
ឥលូវនេះ project របស់យើងរួចរាល់ដើម្បីប្រើប្រាស់ JavaScript ហើយនឹង Ajax

វិធីសាស្រ្តអនុវត្តន៍

បង្កើត Form នៅក្នុង cshtml

@model _4WaysToCreateFormInAspMvc.Models.StudentModel
<a href="http://@Url.Content(">http://@Url.Content(</a>
<a href="http://@Url.Content(">http://@Url.Content(</a>

&lt;h4 id="id1" style="color:purple"&gt;&lt;/h4&gt;
&lt;hr /&gt;
&lt;h3&gt;&lt;b&gt;Forms - Strongly Typed AJAX (Asynchronous)&lt;/b&gt;&lt;/h3&gt;
@using (Ajax.BeginForm("Form3", "Home", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "id1",
    LoadingElementId = "LoadingImage",
    OnSuccess = "onSuccess_Message",
    OnFailure = "onFailure_Message"

}))
{
    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;Enter ID: &lt;/td&gt;
            &lt;td&gt;@Html.TextBoxFor(m =&gt; m.Id)&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Enter Name: &lt;/td&gt;
            &lt;td&gt;@Html.TextBoxFor(m =&gt; m.Name)&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Addon: &lt;/td&gt;
            &lt;td&gt;@Html.CheckBoxFor(m =&gt; m.Addon)&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td colspan="2"&gt;&lt;input type="submit" value="Submit Form" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

Loading…

}

ការបកស្រាយ
- សូមធ្វើការ add script ចូល
```
<a href="http://@Url.Content(">http://@Url.Content(</a>
<a href="http://@Url.Content(">http://@Url.Content(</a>
```
- នៅក្នុង script
```
@using (Ajax.BeginForm("Form3", "Home", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "id1",
    LoadingElementId = "LoadingImage",
    OnSuccess = "onSuccess_Message",
    OnFailure = "onFailure_Message"

}))
```
  - BeginForm គឺត្រូវបានគេប្រើប្រាស់សម្រាប់បង្កើត Asynchronous AJAX Forms.
  - Form3 គឺជា Action method.
  - Home គឺជាឈ្មោះ Controller
  - HttpMethod = “POST” គឺ data នឹងធ្វើការ sent ទៅកាន់ server ដោយប្រើប្រាស់ POST method.
  - UpdateTargetId ធ្វើការកែប្រែតំបន់ដែលនឹងបង្ហាញនូវ output។ ក្នុង, <h4 id=”id1″ style=”color:purple”></h4> នឹងធ្វើការកែប្រែ ព្រមទាំងបង្ហាញចេញនូវ
  - LoadingElementId បង្ហាញនូវ loading image ឬក៏ loading message ទន្ទឹមនឹង AJAX is posting និង retrieving data ចេញពី models ហើយនិង
  - OnSuccess ដំណើរការនៅពេលដែលការងារត្រូវបានបញ្ចប់ដោយជោគជ័យ។
  - OnFailure ដំណើរការនៅពេលដែលការងារត្រូវបានបញ្ចប់ដោយមិនបានជោគជ័យ។
  - ចូលទៅកាន់ HomeController រួចធ្វើការបញ្ចូលកូដខាងក្រោម
```
public class HomeController : Controller
    {
        [HttpPost]
        public ActionResult Form3(Models.StudentModel sm)
        {
            if (ModelState.IsValid)
            {
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append("ID: " + sm.Id + "<br />");
                sb.Append("Name: " + sm.Name + "<br />");
                sb.Append("Addon: " + sm.Addon + "<br />");
                return Content(sb.ToString());
            }
            else
            {
                return View("Index");
            }
        }
```
output

9. ជំហានទី៦៖ ការប្រើប្រាស់ HTML Forms ជាមួយ Ajax និង JQuery

នៅក្នុងវិធីសាស្រ្តនេះ យើងមិនត្រឹមតែអាចធ្វើការបញ្ជូនទិន្នន័យពី input control តែប៉ុណ្ណោះទេ តែយើងក៏អាចប្រើនូវ html element បានផងដែរ ដូចជា <p>…..</p>, <span>…….</span>ដើម្បី send data ទៅកាន់ controller បានដែរ។ ការ send data បែបនេះគឺយើងប្រើប្រាស់នូវ JQuery ហើយងនឹង AJAX query។

ដំណាក់កាលទី១៖ ចូរទៅកាន់ cshtml រួចធ្វើការបង្កើត form ដូចខាងក្រោម

&lt;h3&gt;&lt;b&gt;Forms - Pure HTML and JQUERY&lt;/b&gt;&lt;/h3&gt;

&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;Enter ID: &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="Id" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Enter Name: &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="Name" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Addon: &lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" id="Addon" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="2"&gt;&lt;button onclick="submit()"&gt;Submit Form&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;

&lt;h4 style="color:purple" id="output"&gt;&lt;/h4&gt;

<a href="http://~/Scripts/jquery-1.10.2.min.js">http://~/Scripts/jquery-1.10.2.min.js</a>

        function submit(){
            var data = {
                Id: $('#Id').val(),
                Name: $('#Name').val(),
                Addon: $('#Addon').is(':checked')
            };

            $.post("/Home/Form4", { sm: data }, function () { alert('Successfully Saved') });
        }

ដំណាក់កាលទី២៖ ចូរទៅកាន់ HomeController រួចធ្វើការបង្កើត action method ដូចខាងក្រោម

[HttpPost]
        public ActionResult Form4(StudentModel sm)
        {
            string value = "ID: " + Convert.ToString(sm.Id)
                + "<br />Name: " + sm.Name
                + "<br />Addon: " + Convert.ToString(sm.Addon);

            string s = "$('#output').html('" + value + "');";
            return JavaScript(s);
        }

ការបកស្រាយ
- នៅក្នុង form ត្រូវបានគេបង្កើតឡើងដោយប្រើប្រាស់នូវ html control ព្រមទាំងមាន function submit() នៅក្នុង button onclick
- variable រួមទាំង member របស់វាត្រូវតែ map អោយត្រូវគ្នា ដោយផ្អែកទៅលើ models ហើយនឹង controller member របស់យើង។ សូមធ្វើការពិនិត្យមើលរូបខាងក្រោម៖
- method “$.post()” ប្រើសម្រាប់ធ្វើការ send data ពី form ទៅកាន់ controller
  - /Home/Form4 – ដែល Home គឺជាឈ្មោះរបស់ controller ហើយ Form4 គឺជាឈ្មោះរបស់ action method
  - sm: data – sm គឺជា object មួយរបស់ StudenModel នៅក្នុង action method “Form4”
- Output:
  - Screen 1
  - Screen 2