មាតិកា

1. សេចក្តីផ្តើម
2. គោលបំណង
3. តម្រូវការ
4. ជំហានទី១៖ បង្កើត Project
5. ជំហានទី២៖ បង្កើត Database ,Table និង Store Procedure
6. ជំហានទី៣៖ ធ្វើការ Add ADO.NET Entity data model
7. ជំហានទី៤៖ បង្កើត Controller
8. ជំហានទី៥៖ បង្កើត View
9. ជំហានទី៦៖ ប្រើប្រាស់ Ajax សម្រាប់ធ្វើការ send data ពី form ទៅកាន់ Server
10. ជំហានទី៧៖ ធ្វើការបន្ថែម method object របស់ json សម្រាប់ធ្វើការ Save data
11. ជំហានទី៨៖ Run Application

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

នៅក្នុង Tutorial នេះ យើងនឹងសិក្សាពីរបៀប Save data ចូលទៅក្នុង Multiple Tables ដោយប្រើប្រាស់ ASP.NET MVC ជាមួយនឹង Ajax ។ ខាងក្រោមនេះនឹងបង្ហាញពីជំហាននីមួយៗក្នុងការ implementation កូដ។

2. គោលបំណង

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

• យល់ដឹងពីរបៀបបង្កើតNET MVC Project
• យល់ដឹងការបង្កើត Model Controller និង View
• យល់ដឹងពីរបៀបបង្កើត NET Entity Data Model

3. តម្រូវការ

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

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

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

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

• ចុច “Start”
• បន្ទាប់ “All Programs”
• ជ្រើសរើសយក “Microsoft Visual Studio 2015”.
• ដាក់ឈ្មោះអោយ Project
• ចុច OK
• រើសយក MVC
• ចុច OK
• ក្រោយមកយើងនឹងទទួលបាន Project structure ដូចរូបខាងក្រោម៖

5. ជំហានទី២៖ បង្កើត Database ,Table និង Store Procedure

សូមចូលទៅបើកកម្មវិធី Microsoft SQL Server 2014

• right click លើ Database
• New Database…
• ក្រោយពីបង្កើត Database រួច សូមធ្វើការបង្កើត Table
• ចូរបង្កើត Table ដោយប្រើប្រាស់ Script

  CREATE TABLE [dbo].[TUser] (
          [Id]          INT           IDENTITY (1, 1) NOT NULL,
          [Name]        NVARCHAR (50) NOT NULL,
          [Email]       NVARCHAR (50) NOT NULL,
          [PhoneNumber] BIGINT        NOT NULL,
          PRIMARY KEY CLUSTERED ([Id] ASC)
      );
      CREATE TABLE [dbo].[TOrders] (
          [OrderId]     INT           IDENTITY (1, 1) NOT NULL,
          [ItemName]    NVARCHAR (50) NOT NULL,
          [PaymentType] NVARCHAR (50) NOT NULL,
          [Price]       BIGINT        NOT NULL,
          [Userid]      BIGINT        NOT NULL,
          PRIMARY KEY CLUSTERED ([OrderId] ASC)
      );
      CREATE TABLE [dbo].[TAddress] (
          [AddressId] BIGINT        IDENTITY (1, 1) NOT NULL,
          [Colony]    NVARCHAR (50) NOT NULL,
          [State]     NVARCHAR (50) NOT NULL,
          [Country]   NVARCHAR (50) NOT NULL,
          [Userid]    BIGINT        NOT NULL,
          PRIMARY KEY CLUSTERED ([AddressId] ASC)
      );

• ដូចនេះយើងទទួលបាន Tables ចំនួន 3​គឺ TUser, TOrders, និង TAddress ដែល Tables ទាំងនេះភ្ជាប់ Relationship គ្នាតាមរយៈ column មួយគឺ UserId។
• បន្ទាប់មកទៀតសូមធ្វើការបង្កើត procedure ដើម្បី save ទិន្នន័យទាំងអស់ចូលទៅក្នុង TUser, TOrders, និង TAddress តាមរយៈ UserId។

  CREATE PROCEDURE [dbo].[sp_InsertUser]
  		 @Name nvarchar(225) = null,
  		 @Email nvarchar(225) = null,
  		 @PhoneNumber Bigint=0
      AS
      BEGIN
  INSERT INTO TUser(Name,Email,PhoneNumber)  VALUES(@Name,@Email,@PhoneNumber)
  		 
  DECLARE @Id INT
  		 SET @Id=@@IDENTITY
  		 SELECT @Id AS id
      END
  
  

• ក្រោយពីយើងបានបង្កើត Tables និង store procedure រួចរាល់យើងទទួលបានដូចរូប
  

6. ជំហានទី៣៖ ធ្វើការ Add ADO.NET Entity data model

ដើម្បីបង្កើត Model Class បាន ត្រូវ

• Right click លើ Folder “Models”
• Add
• NET Entity DataModel
• វានឹងលោតផ្ទាំងមួយទៀត
• ដាក់ឈ្មោះអោយ Model
• Click “OK”
• Screen របស់ Entity Data Model Wizard បាន popup មក
• Select យក EF designer from Database
• ចុច Next
• ចុច Next
• សូមធ្វើការ Tick​ ត្រង់ Tables និង Stored Procedures and Functions
• ចុច Finish
• ក្នុង Folder Models យើងបានដូចរូប

7. ជំហានទី៤៖ បង្កើត Controller

ដើម្បីបង្កើត Controller Class បាន ត្រូវ

• Right click លើ Folder “Controller”
• Add
• Controller…
• វានឹង popup ផ្ទាំងមួយទៀតមក
• សូមយក MVC 5 Controller -Empty
• ចុច Add
• ដាក់ឈ្មោះអោយ Controller
• យើងនឹងទទួលបាន class controller ជាមួយ action របស់វាដូចខាងក្រោម

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace PassingMultipleModelsInASP.Controllers
  {
      public class MyController : Controller
      {
          // GET: My
          public ActionResult Index()
          {
              return View();
          }
      }
  }

8. ជំហានទី៥៖ បង្កើត View

បង្កើត view ដើម្បី Add the data

• សូមធ្វើការ right click ទៅលើ ActionResult Index Method
• បន្ទាប់មក click “Add View”

• សូមធ្វើការសរសេរកូដចូលដូចខាងក្រោម

• ក្នុង folder content

• សូមធ្វើការសរសេរកូដដូចខាងក្រោម

  @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  }

  body {
  font-family: “Roboto”, Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #4CAF50;
  }

  .container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  }

  #contact input[type=”text”],
  #contact input[type=”email”],
  #contact input[type=”tel”],
  #contact input[type=”url”],
  #contact textarea,
  #contact button[type=”submit”] {
  font: 400 12px/16px “Roboto”, Helvetica, Arial, sans-serif;
  }
  #contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }

  #contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
  }

  #contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
  }

  fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
  }
  #contact input[type=”text”],
  #contact input[type=”email”],
  #contact input[type=”tel”],
  #contact input[type=”url”],
  #contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  }
  #contact select{
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  }

  #contact input[type=”text”]:hover,
  #contact input[type=”email”]:hover,
  #contact input[type=”tel”]:hover,
  #contact input[type=”url”]:hover,
  #contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
  }

  #contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
  }

  #contact button[type=”button”] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
  }

  #contact button[type=”button”]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
  }

  #contact button[type=”button”]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  .copyright {
  text-align: center;
  }

  #contact input:focus,
  #contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
  }

  ::-webkit-input-placeholder {
  color: #888;
  }

  :-moz-placeholder {
  color: #888;
  }

  ::-moz-placeholder {
  color: #888;
  }

  :-ms-input-placeholder {
  color: #888;
  }

9. ជំហានទី៦៖ ប្រើប្រាស់ Ajax សម្រាប់ធ្វើការ send data ពី form ទៅកាន់ Server

• នៅក្នុងជំហាននេះគឺយើងត្រូវធ្វើការ save data​ ទាំង 3 tables ក្នុងពេលតែមួយ ដោយប្រើប្រាស់ Ajax ជាជំនួយ ដើម្បីការពារកុំអោយមានការ refresh page។
• សូមធ្វើការ Add Script ខាងក្រោមចូលទៅក្នុង View “Index.cshtml”

      $(document).ready(function () {
          $("#contact-submit").click(function () {
              var url = "@Url.Action("SaveUser","My")";
              debugger;
              var userdata = {
                  Name: $.trim($("#txtname").val()),
                  Email: $.trim($("#txtemail").val()),
                  PhoneNumber:$.trim($("#txtphone").val())
              };
              $.post(url, { UserData: userdata }, function (data) {
                  debugger;
                  if (data!=0 && data > 0) {
                      var url = "@Url.Action("SaveAddress","My")";
                      var addressdata = {
                          Colony: $.trim($("#txtcolony").val()),
                          State: $.trim($("#txtstate").val()),
                          Country: $.trim($("#ddlcountry").val()),
                          Userid:data
                      };
                      $.post(url, { AddressData: addressdata }, function (response) {
                          debugger;
                          if (response == true) {
                              var orderdata = {
                                  ItemName: $.trim($("#txtitemname").val()),
                                  PaymentType: $.trim($("#ddlpaymentttype").val()),
                                  Price: $.trim($("#txtprice").val()),
                                  Userid:data
                              };
                              $.post("@Url.Action("SaveOrders", "My")", { OrdersData: orderdata }, function (result) {
                                  debugger;
                                  if (result == true) {
                                      alert("Form data saved successfully in 3 tables");
                                      resetForm();
                                  }
                              });
                          }
                      });
                  }
              });
          });
      });
      function resetForm() {
          $("#txtname").val("");
          $("#txtemail").val("");
          $("#txtphone").val("");
          $("#txtcolony").val("");
          $("#txtstate").val("");
          $("#ddlcountry").val("");
          $("#txtitemname").val("");
          $("#ddlpaymentttype").val("");
          $("#txtprice").val("");
      }
  

10. ជំហានទី៧៖ ធ្វើការបន្ថែម method object របស់ json សម្រាប់ធ្វើការ Save data

• ចូលទៅកាន់ controller
• ស្វែងរកឈ្មោះ controller របស់យើងរួចធ្វើការ add code ខាងក្រោម

  using PassingMultipleModelsInASP.Models;
  using System;
  using System.Collections.Generic;
  using System.Data.SqlClient;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace PassingMultipleModelsInASP.Controllers
  {
      public class MyController : Controller
      {
          // GET: My
          public ActionResult Index()
          {
              return View();
          }
  
          public JsonResult SaveUser(TUser UserData)
          {
              int Userid = 0;
              try
              {
                  if (UserData != null)
                  {
                      using (ASPMVC_DBEntities db = new ASPMVC_DBEntities())
                      {
                          //saves the user data and returns userid from procedure.
                          var id = db.Database.SqlQuery<int>("sp_InsertUser @Name,@Email,@PhoneNumber",
                              new SqlParameter("Name", UserData.Name),
                              new SqlParameter("Email", UserData.Email),
                              new SqlParameter("PhoneNumber", UserData.PhoneNumber)).Single();
                          Userid = id;
                      }
                  }
              }
              catch (Exception ex)
              {
                  throw ex;
              }
              return Json(Userid, JsonRequestBehavior.AllowGet);
          }
          //saves Address data TAddress table
          public JsonResult SaveAddress(TAddress AddressData)
          {
              bool result = false;
              try
              {
                  if (AddressData != null)
                  {
                      using (ASPMVC_DBEntities db = new ASPMVC_DBEntities())
                      {
                          db.TAddresses.Add(AddressData);
                          db.SaveChanges();
                          result = true;
                      }
                  }
              }
              catch (Exception ex)
              {
                  throw ex;
              }
              return Json(result, JsonRequestBehavior.AllowGet);
          }
  //saves orderdata in TOrders table
          public JsonResult SaveOrders(TOrder OrdersData)
          {
              bool result = false;
              try
              {
                  if (OrdersData != null)
                  {
                      using (ASPMVC_DBEntities db = new ASPMVC_DBEntities())
                      {
                          db.TOrders.Add(OrdersData);
                          db.SaveChanges();
                          result = true;
                      }
                  }
              }
              catch (Exception ex)
              {
                  throw ex;
              }
              return Json(result, JsonRequestBehavior.AllowGet);
          }
      }
  }
  
  

• ចំណាំ៖

ASPMVC_DBEntities db = new ASPMVC_DBEntities()

សូមដាក់ឈ្មោះ Connection អោយដូចនៅក្នុង Web.config

11. ជំហានទី៨៖ Run Application

ដើម្បីដំណើរការកម្មវិធី យើងត្រូវ

• ចូលទៅកាន់ menu
• រើសយក Debug
• Start Debugging ឬក៏ Start Debugging Without Debugging
• ពេលនោះវានឹងដំណើរការ page ឡើងមក
• សូមធ្វើការបញ្ចូលទិន្នន័យនៅក្នុង form
• បន្ទាប់មកចុចប៊ូតុង Submit
• វានឹងលោត message មក
• សូមធ្វើការចូលទៅមើលក្នុង Tables វិញម្តង
• យើងនឹងទទួលបានទិន្នន័យដូចក្នុងរូប