How to save Data Using Class with angularJs.

Hi,

I am having Customer Class

public class Customer
{
    private int _Id;
    public int Id
    {
        get { return _Id; }
        set { _Id = value; }
    }
    private String _Name;
    public String Name
    {   
        get { return _Name; }
        set { _Name = value; }
    }
    private String _Address;
    public String Address
    {
        get { return _Address; }
        set { _Address = value; }
    }      
}

SQL Script For you

CREATE TABLE [dbo].[tblCustomer](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Address] [varchar](500) NULL,
 CONSTRAINT [PK_tblCustomer] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

Now, you have Customer Class and then Customer table in your database

Next, you have create a aspx page called ajsExample.aspx

Instead of that you have create a basic layout of angularjs

You have place CDN of AJS inside the header tag

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="text/javascript"></script>


In body you need initialize AJS  Structure

<div ng-app="myApp" ng-controller="csrControl">

</div>

ng-app - stands for my app name
ng-controller - stands for my controller name

Next you have create html controls for inputs

  <table>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        :
                    </td>
                    <td>
                        <input id="txtName" type="text" ng-model="csrName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Address
                    </td>
                    <td>
                        :
                    </td>
                    <td>
                        <input id="txtAddress" type="text" ng-model="csrAddress" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="right">
                        <input id="Button1" type="button" value="Save" ng-click="Save()" />
                    </td>
                </tr>
            </table>

So the basic html markup over here.

Next we are moving into web method

Use : using System.Data.SqlClient;


[System.Web.Services.WebMethod()]
        public static void SaveCustomer(Customer objcsr)
        {
            using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.Connection = con;
                    cmd.CommandText = "INSERT INTO tblCustomer (Name,Address) VALUES (@Name,@Address)";
                    cmd.Parameters.AddWithValue("@Name", objcsr.Name);
                    cmd.Parameters.AddWithValue("@Address", objcsr.Address);
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }

Next going to AngularJs

1. Create module for my application
2. Initialize controller
3. write ng-click function



 <script type="text/javascript">
     var app = angular.module("myApp", []);
     app.controller("csrControl", function ($scope, $http) {
     $scope.Save = function () {
                var objcsr = {
                    "Name": $scope.csrName,
                    "Address": $scope.csrAddress
                };
               
                var httpreq = {
                    method: 'POST',
                    url: 'ajsExample.aspx/SaveCustomer',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                        'dataType': 'json'
                    },
                    data: { objcsr }
                }
                $http(httpreq).success(function (response) {
                    alert("Saved successfully.");

                    //Here Clear textbox data
                    $scope.csrName = "";
                    $scope.csrAddress = "";
                })
            };
     });
    </script>



Here is the Full Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hi</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
     var app = angular.module("myApp", []);
     app.controller("csrControl", function ($scope, $http) {
     $scope.Save = function () {
                var objcsr = {
                    "Name": $scope.csrName,
                    "Address": $scope.csrAddress
                };
               
                var httpreq = {
                    method: 'POST',
                    url: 'ajsExample.aspx/SaveCustomer',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                        'dataType': 'json'
                    },
                    data: { objcsr }
                }
                $http(httpreq).success(function (response) {
                    alert("Saved successfully.");
                    $scope.csrName = "";
                    $scope.csrAddress = "";
                })
            };
     });
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div ng-app="myApp" ng-controller="csrControl">
            <table>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        :
                    </td>
                    <td>
                        <input id="txtName" type="text" ng-model="csrName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Address
                    </td>
                    <td>
                        :
                    </td>
                    <td>
                        <input id="txtAddress" type="text" ng-model="csrAddress" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="right">
                        <input id="Button1" type="button" value="Save" ng-click="Save()" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <p>
    </p>
    </form>
</body>
</html>