មាតិកា

  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 ដូចខាងក្រោម
    &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