ការសិក្សាពីរបៀប Save Data ចូលទៅក្នុង Tables ច្រើន ដោយប្រើប្រាស់ Ajax ក្នុង ASP.NET MVC 5

មាតិកា

សេចក្តីផ្តើម
គោលបំណង
តម្រូវការ
ជំហានទី១៖ បង្កើត Project
ជំហានទី២៖ បង្កើត Database ,Table និង Store Procedure
ជំហានទី៣៖ ធ្វើការ Add ADO.NET Entity data model
ជំហានទី៤៖ បង្កើត Controller
ជំហានទី៥៖ បង្កើត View
ជំហានទី៦៖ ប្រើប្រាស់ Ajax សម្រាប់ធ្វើការ send data ពី form ទៅកាន់ Server
ជំហានទី៧៖ ធ្វើការបន្ថែម method object របស់ json សម្រាប់ធ្វើការ Save data
ជំហានទី៨៖ 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 វិញម្តង
យើងនឹងទទួលបានទិន្នន័យដូចក្នុងរូប