LightBlog

Friday, 30 September 2016

AngularJs CRUD Operation Using ASMX WebService




















HTML AND Angular Js Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../AngularJs/angular.min.js"></script>

    <script>

        var app = angular.module("myApp", [])
        app.controller("Myctrl", function ($scope, $http) {


            GetAllRecords();
            function GetAllRecords()
            {
                $http.get('http://localhost:19742/WebService/Employee.asmx/GetEmployees').then(function (response) { $scope.EmployeeData = response.data; }, function () { alert("Failed TO Get Records") });
            }


            $scope.Insert = function (formdata)
            {
                var Id = formdata.Id;
                var Name = formdata.Name;
                var Gender = formdata.Gender;
                var Salary = formdata.Salary;
               
                $http.get('http://localhost:19742/WebService/Employee.asmx/AddEmployee',
             {
                 params: { Id: Id, Name: Name, Gender: Gender, Salary: Salary },

             }
         ).then(function (res) { alert("Success Fully Inserted"); GetAllRecords(); }, function () { alert("Failed Insert Record"); });

            }



            $scope.Update = function (formdata)
            {


                var Id = formdata.Id;
                var Name = formdata.Name;
                var Gender = formdata.Gender;
                var Salary = formdata.Salary;

                $http.get('http://localhost:19742/WebService/Employee.asmx/UpdateEmployee',
             {
                 params: { Id: Id, Name: Name, Gender: Gender, Salary: Salary },

             }
         ).then(function (res) { alert("Success Fully Updated"); GetAllRecords(); }, function () { alert("Failed Update Record"); });



            }

            //Eiti Logic
            $scope.EditRecord = function (index) {
                alert("hi");
                $scope.Employee = { Id: $scope.EmployeeData[index].Id, Name: $scope.EmployeeData[index].Name, Gender: $scope.EmployeeData[index].Gender, Salary: $scope.EmployeeData[index].Salary }


            }




            //Deletion Logi
            $scope.DeleteEmp=function(Id)
            {
                alert(Id);

                $http.get('http://localhost:19742/WebService/Employee.asmx/DeleteEmployee',
          {
              params: { Id: Id },

          }
      ).then(function (res) { alert("Delete record is SUccess"); GetAllRecords(); }, function () { alert("Failed to Delete Record"); });


            }


            });
      </script>


</head>
<body ng-app="myApp" ng-controller="Myctrl">

    <table border="1">
        <tr ng-repeat="item in EmployeeData">
            <td>{{item.Id}}</td>
            <td>{{item.Name}}</td>
            <td>{{item.Gender}}</td>
            <td>{{item.Salary}}</td>
            <td><input type="button" ng-click="DeleteEmp(item.Id)" value="Delete" /></td>
            <td><input type="button" ng-click="EditRecord($index)" value="Edit" /></td>
        </tr>
    </table>
    <br />
    <input type="text" ng-model="Employee.Id" placeholder="Enter Employee Id" /><br />
    <input type="text" ng-model="Employee.Name" placeholder="Enter Employee Name" /><br />
    <input type="text" ng-model="Employee.Gender" placeholder="Enter Employee Gender" /><br />
    <input type="text" ng-model="Employee.Salary" placeholder="Enter Employee Salary" /><br />

    <input type="button" ng-click="Insert(Employee)" value="Insert Record">
    <input type="button" ng-click="Update(Employee)" value="Update Record">

</body>
</html>


ASMX Webservice Class
Employee ASMX


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Configuration;
using System.Web.Script.Services;

namespace MultiTableEntity.WebService
{
    /// <summary>
    /// Summary description for Employee
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
     [System.Web.Script.Services.ScriptService]
    public class Employee : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
//Delete EMployee Methode
        public void DeleteEmployee(int id)
        {


            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString))
            {
                SqlCommand cmd = new SqlCommand("Delete From EmployeeTbl Where Id='"+id+"'", con);

                con.Open();
                cmd.ExecuteNonQuery();

            }

        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        //Create new objec Insert
        public void AddEmployee(int id,string Name,string Gender, Decimal Salary)
        {
          
            
            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString))
            {
                SqlCommand cmd = new SqlCommand("Insert into EmployeeTbl values('" + id + "','" + Name + "','" + Gender + "','" + Salary + "')", con);

                con.Open();
                cmd.ExecuteNonQuery();

            }

        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public void UpdateEmployee(int id, string Name, string Gender, Decimal Salary)
        {


            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString))
            {
                SqlCommand cmd = new SqlCommand("Update EmployeeTbl Set Name='"+Name+"',Gender='"+Gender+"',Salary='"+Salary+"' Where Id='"+id+"'", con);

                con.Open();
                cmd.ExecuteNonQuery();

            }

        }

        //Get all Students
        [WebMethod]
        public void GetEmployees()
        {
            List<EmployeeTbl> EmpList = new List<EmployeeTbl>();
           
            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString))
            {
                SqlCommand cmd = new SqlCommand("select*from EmployeeTbl", con);
                con.Open();
                SqlDataReader dr = cmd.ExecuteReader();

                if (dr.HasRows == true)
                {

                    while (dr.Read())
                    {
                        EmployeeTbl obj = new EmployeeTbl();
                        obj.Id = (int)dr["id"];
                        obj.Name = (string)dr["name"];
                        obj.Gender = (string)dr["gender"];
                        obj.Salary = Convert.ToDecimal(dr["Salary"]);

                        EmpList.Add(obj);
                    }

                }
                con.Close();

            }
            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(EmpList));
        }
    }
}



Click Here To Watch Video of this Topic




No comments:

Post a Comment

LightBlog