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

មាតិកា

1. សេចក្តីផ្តើម
2. គោលបំណង
3. តម្រូវការ
4. ជំហានទី១៖ បង្កើត Project
5. ជំហានទី២៖ បង្កើត Class Model
6. ជំហានទី៣៖ Forms – Weakly Typed
7. ជំហានទី៤៖ Forms – Strongly Typed
8. ជំហានទី៥៖ Forms – Strongly Typed Ajax (Asynchronous)
9. ជំហានទី៦៖ ការប្រើប្រាស់ 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

1. ចូលទៅកាន់ 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>

2. បន្ទាប់មកទៀត សូមធ្វើការ 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 ដូចខាងក្រោម

  <h3><b>Forms - Pure HTML and JQUERY</b></h3>
  
  <table>
      <tr>
          <td>Enter ID: </td>
          <td><input type="text" id="Id" /></td>
      </tr>
      <tr>
          <td>Enter Name: </td>
          <td><input type="text" id="Name" /></td>
      </tr>
      <tr>
          <td>Addon: </td>
          <td><input type="checkbox" id="Addon" /></td>
      </tr>
      <tr>
          <td colspan="2"><button onclick="submit()">Submit Form</button></td>
      </tr>
  </table>
  
  <h4 style="color:purple" id="output"></h4>
  
  <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