Angular js Demo

----------------------------------------------------
angularjs setup install
layout html=> data-ng-app="myapp"
layout head=> <script src="https://use.fontawesome.com/bc3ab0b857.js"></script>
layou body=> <script src="~/Scripts/angular.min.js"></script>
----------------------------------------------------

index.cshtml
----------------------------------------------------


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div>
    <div data-ng-controller="DefultController">
        <div class="row" ng-init="Departmentbind(@Json.Encode(ViewBag.DepartData),@Json.Encode(ViewBag.StudentData))">
            <form role="form" id="frmstudent" name="frmstudent" ng-class="{'submitted':submitted}" ng-submit="submitted=true" novalidate>
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="form-group">
                            <label>Name :</label>
                            <input data-ng-model="objstudent.Name" id="Name" name="Name" class="form-control" required />
                            <span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Name is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>BirthDate :</label>
                            <input type="date" data-ng-model="objstudent.BirthDate" id="Birthdate" name="Birthdate" class="form-control" required />
                            <span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Birthdate is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>Department :</label>
                            <select data-ng-model="objstudent.DepartmentId" id="DepartmentId" name="DepartmentId" class="form-control" required data-ng-options="dm.DepartmentId as dm.DepartmentName for dm in Departmentlist">
                                <option value="">---Select---</option>
                            </select>
                            <span class="text-danger" ng-if="submitted && objstudent.DepartmentId==''"><i class="fa fa-exclamation-triangle"></i> Department is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>Gender :</label>
                            <input type="radio" ng-model="objstudent.Gender" value="1" name="Gender1" required />Male
                            <input type="radio" ng-model="objstudent.Gender" value="2" name="Gender1" required />Female
                            <br />
                            <span class="text-danger" ng-if="submitted && objstudent.Gender==''"><i class="fa fa-exclamation-triangle"></i> Gender is Required.!</span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default" data-ng-click="frmstudent.$valid && createupdate(objstudent)">Submit</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" ng-model="search" class="form-control" placeholder="Search" style="max-width: 100%;"><span class="input-group-addon">
                                    <span class="glyphicon glyphicon-search"></span>
                                </span>
                            </div>

                            <br />
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th ng-click="sort('Name')" style="cursor:pointer;">
                                            Name <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('BirthDate')" style="cursor:pointer;">
                                            BirthDate <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('Department')" style="cursor:pointer;">
                                            Department <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('Gender')" style="cursor:pointer;">
                                            Gender <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="studnt in Studentlist|filter:search|orderBy:sortKey:reverse">
                                        <td>
                                            {{studnt.Name}}
                                        </td>
                                        <td>
                                            {{studnt.BirthDate | date :  "dd-MMM-yyyy"}}
                                        </td>
                                        <td>
                                            {{studnt.Department}}
                                        </td>
                                        <td>
                                            {{studnt.Gender==1?"Male":"Female"}}
                                        </td>
                                        <td>
                                            <a ng-click="Edit(studnt)" style="cursor:pointer;" title="Edit" data-tooltip="Edit"><i class="fa fa-edit"></i></a>
                                            <a ng-click="Delete(studnt.StudentId)" style="cursor:pointer;" title="Delete" data-tooltip="Delete"><i class="fa fa-trash pr2"></i></a>
                                        </td>
                                    </tr>
                                    <tr ng-if="Studentlist==null || Studentlist.length <=0">
                                        <td class="col-md-4 col-md-offset-4">
                                            <label class="text-danger">Record Not Found.</label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <ul class="pagination pagination-sm">
                                <li ng-class="{active:0}">
                                    <a href="#" ng-click="firstPage()">First</a>
                                </li>
                                <li ng-repeat="n in range(ItemsByPage.length)">
                                    <a href="#" ng-click="setPage()" ng-bind="n+1">1</a>
                                </li>
                                <li>
                                    <a href="#" ng-click="lastPage()">Last</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/Scripts/Controller/DefultController.js"></script>
    <script src="~/Scripts/Services/DefultService.js"></script>
}


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div>
    <div data-ng-controller="DefultController">
        <div class="row" ng-init="Departmentbind(@Json.Encode(ViewBag.DepartData),@Json.Encode(ViewBag.StudentData))">
            <form role="form" id="frmstudent" name="frmstudent" ng-class="{'submitted':submitted}" ng-submit="submitted=true" novalidate>
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="form-group">
                            <label>Name :</label>
                            <input data-ng-model="objstudent.Name" id="Name" name="Name" class="form-control" required />
                            <span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Name is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>BirthDate :</label>
                            <input type="date" data-ng-model="objstudent.BirthDate" id="Birthdate" name="Birthdate" class="form-control" required />
                            <span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Birthdate is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>Department :</label>
                            <select data-ng-model="objstudent.DepartmentId" id="DepartmentId" name="DepartmentId" class="form-control" required data-ng-options="dm.DepartmentId as dm.DepartmentName for dm in Departmentlist">
                                <option value="">---Select---</option>
                            </select>
                            <span class="text-danger" ng-if="submitted && objstudent.DepartmentId==''"><i class="fa fa-exclamation-triangle"></i> Department is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>Gender :</label>
                            <input type="radio" ng-model="objstudent.Gender" value="1" name="Gender1" required />Male
                            <input type="radio" ng-model="objstudent.Gender" value="2" name="Gender1" required />Female
                            <br />
                            <span class="text-danger" ng-if="submitted && objstudent.Gender==''"><i class="fa fa-exclamation-triangle"></i> Gender is Required.!</span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default" data-ng-click="frmstudent.$valid && createupdate(objstudent)">Submit</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" ng-model="search" class="form-control" placeholder="Search" style="max-width: 100%;"><span class="input-group-addon">
                                    <span class="glyphicon glyphicon-search"></span>
                                </span>
                            </div>

                            <br />
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th ng-click="sort('Name')" style="cursor:pointer;">
                                            Name <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('BirthDate')" style="cursor:pointer;">
                                            BirthDate <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('Department')" style="cursor:pointer;">
                                            Department <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('Gender')" style="cursor:pointer;">
                                            Gender <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="studnt in Studentlist|filter:search|orderBy:sortKey:reverse">
                                        <td>
                                            {{studnt.Name}}
                                        </td>
                                        <td>
                                            {{studnt.BirthDate | date :  "dd-MMM-yyyy"}}
                                        </td>
                                        <td>
                                            {{studnt.Department}}
                                        </td>
                                        <td>
                                            {{studnt.Gender==1?"Male":"Female"}}
                                        </td>
                                        <td>
                                            <a ng-click="Edit(studnt)" style="cursor:pointer;" title="Edit" data-tooltip="Edit"><i class="fa fa-edit"></i></a>
                                            <a ng-click="Delete(studnt.StudentId)" style="cursor:pointer;" title="Delete" data-tooltip="Delete"><i class="fa fa-trash pr2"></i></a>
                                        </td>
                                    </tr>
                                    <tr ng-if="Studentlist==null || Studentlist.length <=0">
                                        <td class="col-md-4 col-md-offset-4">
                                            <label class="text-danger">Record Not Found.</label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <ul class="pagination pagination-sm">
                                <li ng-class="{active:0}">
                                    <a href="#" ng-click="firstPage()">First</a>
                                </li>
                                <li ng-repeat="n in range(ItemsByPage.length)">
                                    <a href="#" ng-click="setPage()" ng-bind="n+1">1</a>
                                </li>
                                <li>
                                    <a href="#" ng-click="lastPage()">Last</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/Scripts/Controller/DefultController.js"></script>
    <script src="~/Scripts/Services/DefultService.js"></script>
}


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div>
    <div data-ng-controller="DefultController">
        <div class="row" ng-init="Departmentbind(@Json.Encode(ViewBag.DepartData),@Json.Encode(ViewBag.StudentData))">
            <form role="form" id="frmstudent" name="frmstudent" ng-class="{'submitted':submitted}" ng-submit="submitted=true" novalidate>
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="form-group">
                            <label>Name :</label>
                            <input data-ng-model="objstudent.Name" id="Name" name="Name" class="form-control" required />
                            <span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Name is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>BirthDate :</label>
                            <input type="date" data-ng-model="objstudent.BirthDate" id="Birthdate" name="Birthdate" class="form-control" required />
                            <span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Birthdate is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>Department :</label>
                            <select data-ng-model="objstudent.DepartmentId" id="DepartmentId" name="DepartmentId" class="form-control" required data-ng-options="dm.DepartmentId as dm.DepartmentName for dm in Departmentlist">
                                <option value="">---Select---</option>
                            </select>
                            <span class="text-danger" ng-if="submitted && objstudent.DepartmentId==''"><i class="fa fa-exclamation-triangle"></i> Department is Required.!</span>
                        </div>
                        <div class="form-group">
                            <label>Gender :</label>
                            <input type="radio" ng-model="objstudent.Gender" value="1" name="Gender1" required />Male
                            <input type="radio" ng-model="objstudent.Gender" value="2" name="Gender1" required />Female
                            <br />
                            <span class="text-danger" ng-if="submitted && objstudent.Gender==''"><i class="fa fa-exclamation-triangle"></i> Gender is Required.!</span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default" data-ng-click="frmstudent.$valid && createupdate(objstudent)">Submit</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" ng-model="search" class="form-control" placeholder="Search" style="max-width: 100%;"><span class="input-group-addon">
                                    <span class="glyphicon glyphicon-search"></span>
                                </span>
                            </div>

                            <br />
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th ng-click="sort('Name')" style="cursor:pointer;">
                                            Name <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('BirthDate')" style="cursor:pointer;">
                                            BirthDate <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('Department')" style="cursor:pointer;">
                                            Department <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th ng-click="sort('Gender')" style="cursor:pointer;">
                                            Gender <i class="fa fa-sort" aria-hidden="true"></i>
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="studnt in Studentlist|filter:search|orderBy:sortKey:reverse">
                                        <td>
                                            {{studnt.Name}}
                                        </td>
                                        <td>
                                            {{studnt.BirthDate | date :  "dd-MMM-yyyy"}}
                                        </td>
                                        <td>
                                            {{studnt.Department}}
                                        </td>
                                        <td>
                                            {{studnt.Gender==1?"Male":"Female"}}
                                        </td>
                                        <td>
                                            <a ng-click="Edit(studnt)" style="cursor:pointer;" title="Edit" data-tooltip="Edit"><i class="fa fa-edit"></i></a>
                                            <a ng-click="Delete(studnt.StudentId)" style="cursor:pointer;" title="Delete" data-tooltip="Delete"><i class="fa fa-trash pr2"></i></a>
                                        </td>
                                    </tr>
                                    <tr ng-if="Studentlist==null || Studentlist.length <=0">
                                        <td class="col-md-4 col-md-offset-4">
                                            <label class="text-danger">Record Not Found.</label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <ul class="pagination pagination-sm">
                                <li ng-class="{active:0}">
                                    <a href="#" ng-click="firstPage()">First</a>
                                </li>
                                <li ng-repeat="n in range(ItemsByPage.length)">
                                    <a href="#" ng-click="setPage()" ng-bind="n+1">1</a>
                                </li>
                                <li>
                                    <a href="#" ng-click="lastPage()">Last</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/Scripts/Controller/DefultController.js"></script>
    <script src="~/Scripts/Services/DefultService.js"></script>
}


----------------------------------------------------
cntrl.js
----------------------------------------------------

(function () {
    angular.module("myapp", [])
        .controller("DefultController", [
        "$scope", "$http", "DefultService", "$filter",
        function DefultController($scope, $http, DefultService, $filter) {
            $scope.objstudent = {
                StudentId: 0,
                Name: '',
                BirthDate: new Date(),
                DepartmentId: '',
                DepartmentName: '',
                Gender: '',
            }
            $scope.currentPage = 0;
            $scope.pageSize = 2;
            $scope.createupdate = function (data) {
                DefultService.CreateUpdate(data).then(function (result) {
                    if (result.data != null) {
                        alert(result.data);
                        window.location.href = "/Default/Index";
                    }
                })
            }
            //$scope.search = function () {
            //    $scope.filteredList = filteredListService.searched($scope.allItems, $scope.searchText);
            //    if ($scope.searchText == '') {
            //        $scope.filteredList = $scope.allItems;
            //    }
            //    $scope.pagination();
            //}
            $scope.pagination = function () {
                $scope.ItemsByPage = filteredListService.paged($scope.filteredList, $scope.pageSize);
            };
            $scope.setPage = function () {
                $scope.currentPage = this.n;
            };
            $scope.firstPage = function () {
                $scope.currentPage = 0;
            };
            $scope.lastPage = function () {
                $scope.currentPage = $scope.ItemsByPage.length - 1;
            };
            $scope.range = function (input, total) {
                var ret = [];
                if (!total) {
                    total = input;
                    input = 0;
                }
                for (var i = input; i < total; i++) {
                    if (i != 0 && i != total - 1) {
                        ret.push(i);
                    }
                }
                return ret;
            };


            $scope.sort = function (keyname) {
                $scope.sortKey = keyname;   //set the sortKey to the param passed
                $scope.reverse = !$scope.reverse; //if true make it false and vice versa
            }
            $scope.Departmentbind = function (data, stdData) {
                $scope.Departmentlist = JSON.parse(data);
                $scope.Studentlist = JSON.parse(stdData);
            }
            $scope.Edit = function (data) {
                //data.Gender = data.Gender.toString();
                $scope.objstudent = angular.copy(data);
                //$scope.objstudent.Name = data.Name;
                $scope.objstudent.Gender = data.Gender.toString();
                $scope.objstudent.BirthDate = new Date(data.BirthDate);
                //$scope.objstudent.DepartmentId = data.DepartmentId;
                //$scope.objstudent.DepartmentName = data.Department;

            }
            $scope.Delete = function (id) {
                if (confirm("are you sure to delete?")) {
                    DefultService.Delete(id).then(function (result) {
                        if (result.data != null) {
                            alert(result.data);
                            window.location.href = "/Default/Index";
                        }
                    })
                }
            }
        }]);


    //.controller("DefultController", function () {
    //    console.log("Data");
    //})
    //.controller("DefultController", [
    //    "$scope", "$http", "DefultService", function DefultController($scope, $http, DefultService) {
    //    $scope.objstudent = {
    //        StudentId: 0,
    //        Name: '',
    //        Birthdate: '',
    //        DepartmentId: 0,
    //        DepartmentName: '',
    //        Gender: '',
    //    }
    //    $scope.createupdate = function (data) {

    //    }
    //    $scope.Departmentbind = function (data) {
    //        //DefultService.GetDepartment().then(function (result) {
    //        $scope.Departmentlist = data;
    //        //})
    //    }

    //}]);
})()

----------------------------------------------------
service.js
----------------------------------------------------
(function () {
    angular.module("myapp")
        .service("DefultService", [
        "$http",
        function ($http) {
            var listing = {};
            listing.CreateUpdate = function (obj) {
                return $http({
                    method: "POST",
                    url: "/Default/CreateUpdate",
                    data: obj
                })
            };
            listing.Delete = function (id) {
                return $http({
                    method: "POST",
                    url: "/Default/Delete?id=" + id,
                })
            };
            return listing;
        }])
})()



----------------------------------------------------
cntrl.cs
----------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using AngularJs_Demo.Models;
using Newtonsoft.Json;
using System.Web.Script.Serialization;

namespace AngularJs_Demo.Controllers
{
    public class DefaultController : Controller
    {
        DemoEntities contextt = new DemoEntities();
        // GET: Default
        public ActionResult Index()
        {
            List<DepartmentMaster> obj = new List<DepartmentMaster>();
            obj = contextt.DepartmentMasters.ToList();
            var qry = contextt.StudentMasters.Join(
                      contextt.DepartmentMasters,
                      post => post.DepartmentId,
                      meta => meta.DepartmentId,
                      (post, meta) => new { Post = post, Meta = meta }).ToList();
            List<StudentMaster> std = contextt.StudentMasters.Where(x => x.IsActive == true).ToList();
            int i = 0;
            foreach (var dpt in qry)
            {
                if (std.Count > 0 && std.Count > i)
                {
                    if (std[i].DepartmentId == dpt.Meta.DepartmentId)
                    {
                        std[i].Department = dpt.Meta.DepartmentName;
                        i++;
                    }
                    //std[i].DepartmentName = dpt.DepartmentName;
                }
            }
            JavaScriptSerializer json_serializer = new JavaScriptSerializer();
            ViewBag.DepartData = JsonConvert.SerializeObject(obj,
                                 Formatting.None,
                                 new JsonSerializerSettings()
                                 {
                                     ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
                                 });
            ViewBag.StudentData = JsonConvert.SerializeObject(std,
                                  Formatting.None,
                                  new JsonSerializerSettings()
                                  {
                                      ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
                                  });
            return View();
        }
        [HttpPost]
        public JsonResult CreateUpdate(StudentMaster obj)
        {
            int error = 0;
            string msg = "";
            obj.IsActive = true;
            if (obj.StudentId > 0)
            {
                StudentMaster objstd = contextt.StudentMasters.Find(obj.StudentId);
                objstd.DepartmentId = obj.DepartmentId;
                objstd.Name = obj.Name;
                objstd.BirthDate = obj.BirthDate;
                objstd.Gender = obj.Gender;
                contextt.Entry(objstd).State = System.Data.Entity.EntityState.Modified;
                contextt.SaveChanges();
                error = 1;
            }
            else
            {
                contextt.StudentMasters.Add(obj);
                contextt.SaveChanges();
                error = 1;
            }
            if (error == 1)
            {
                msg = "Data Saved Successfully.";
            }
            else
            {
                msg = "Data Not Saved.";
            }
            return Json(msg);
        }
        public JsonResult Delete(int id)
        {
            int error = 0;
            string msg = "";
            if (id > 0)
            {
                StudentMaster objstd = contextt.StudentMasters.Find(id);
                objstd.IsActive = false;
                contextt.Entry(objstd).State = System.Data.Entity.EntityState.Modified;
                contextt.SaveChanges();
                error = 1;
            }
            if (error == 1)
            {
                msg = "Data Deleted Successfully.";
            }
            else
            {
                msg = "Data Not Deleted.";
            }
            return Json(msg);
        }
    }
}

MVC Jquery

---controller---------

Elaunch_DemoEntities context = new Elaunch_DemoEntities();
        // GET: Employee
        public ActionResult Index(int id=0)
        {
            return View();
        }
        public bool submitData(EmployeeMaster obj)
        {
            try
            {
                context.EmployeeMasters.Add(obj);
                context.SaveChanges();
                return true;
            }
            catch(Exception)
            {
                return false;
            }
        }
        public JsonResult GetAll()
        {
          List<EmployeeMaster> emp = context.EmployeeMasters.ToList();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        public JsonResult GetbyId(int id)
        {
            var emp = context.EmployeeMasters.Find(id);
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        public JsonResult Update(EmployeeMaster emp)
        {
            context.Entry(emp).State = System.Data.Entity.EntityState.Modified;
            context.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        public JsonResult Delete(int Id)
        {
            EmployeeMaster emp = context.EmployeeMasters.Find(Id);
            context.EmployeeMasters.Remove(emp);
            context.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }


---------Index---------------


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<h2>Index</h2>
<div class="container">
    <div class="form-group" hidden>
            <label for="EmployeeId">ID</label>
            <input type="text" class="form-control" id="Id" name="Id" placeholder="Id" />
        </div>
    <div class="form-group">
        <span>Name:</span>
        <input type="text" class="form-control" id="Name" name="Name" />
    </div>
    <div class="form-group">
        <span>City:</span>
        <input type="text" class="form-control" id="City" name="City" data-valmsg-for="Address" />
    </div>
    <div class="form-group">
        <span>Address:</span>
        <input type="text" id="Address" class="form-control" name="Address" data-valmsg-for="Address" />
    </div>
    <div class="form-group">
        <span>CreatedDate:</span>
        <input type="date" id="CreatedDate" class="form-control" name="CreatedDate" data-valmsg-for="Address" />
    </div>
    <div class="form-group">
        <span>Male:</span> <input checked="checked" id="Gender" name="Gender" type="radio" value="Male" />
        <span>Female:</span> <input id="Gender" name="Gender" type="radio" value="Female" />
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-success" id="btnAdd" onclick="return submitData()">Add</button>
        <button type="button" class="btn btn-success" id="btnUpdate" style="display:none;" onclick="return Update();">Update</button>
    </div>
    @* <input type="button" class="btn btn-success" id="Submit" value="Submit" onclick="submitData()" />*@
</div>
<div>
    <table id="resultTable" class="table table-bordered table-hover"></table>
</div>
<script type="text/javascript">
    getData();
    function submitData() {
        var res = validate();
        if (res == false) {
            return false;
        }
        var data = {
            Id: $('#Id').val(),
            Name: $("#Name").val(),
            City: $("#City").val(),
            Address: $("#Address").val(),
            CreatedDate: $("#CreatedDate").val(),
            Gender: $("#Gender").val()
        }
        $.ajax({
            type: "POST",
            url: '@Url.Action("SubmitData", "Employee")',
            data: data,
            success: function (res) {
                if (res) {
                    getData();
                    //$("#Id").val('');
                    $("#Name").val('');
                    $("#City").val('');
                    $("#Address").val('');
                    $("#CreatedDate").val('');
                    $("#Gender").val('');
                }
            }
        });
    }
    function getData() {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetAll", "Employee")',
            success: function (result) {
                debugger
                var data = '<tr><th>Sr.no</th><th>Name</th><th>City</th><th>Address</th><th>CreatedDate</th><th>Gender</th><th></th></tr>';
                for (var i = 0; i < result.length; i++) {
                    data += '<tr><td>' + result[i].Id + '</td><td>' + result[i].Name + '</td><td>' + result[i].City + '</td><td>' + result[i].Address + '</td><td>' + ConvertDate(result[i].CreatedDate,"dd-mm-yyyy") + '</td><td>' + result[i].Gender + '</td><td><a href="#" onclick="getbyID(' + result[i].Id + ')">Edit</a> | <a href="#" onclick="Delele(' + result[i].Id + ')">Delete</a></td></tr>'
                }
                $("#resultTable").html(data)
            }
        });
    }
    function ConvertDate(data, format) {
        if (data == null) return '';
        var r = /\/Date\(([0-9]+)\)\//gi
        var matches = data.match(r);
        if (matches == null) return '';
        var result = matches.toString().substring(6, 19);
        var epochMilliseconds = result.replace(
        /^\/Date\(([0-9]+)([+-][0-9]{4})?\)\/$/,
        '$1');
        var b = new Date(parseInt(epochMilliseconds));
        var c = new Date(b.toString());
        var curr_date = c.getDate();
        var curr_month = c.getMonth() + 1;
        var curr_year = c.getFullYear();
        var curr_h = c.getHours();
        var curr_m = c.getMinutes();
        var curr_s = c.getSeconds();
        var curr_offset = c.getTimezoneOffset() / 60
        //var d = curr_month.toString() + '/' + curr_date + '/' + curr_year;
        //return d;
        return format.replace('mm', curr_month).replace('dd', curr_date).replace('yyyy', curr_year);
    }
    function getbyID(EmpID) {
        $('#Name').css('border-color', 'lightgrey');
        $('#City').css('border-color', 'lightgrey');
        $('#Address').css('border-color', 'lightgrey');
        $('#CreatedDate').css('border-color', 'lightgrey');
        $("#Gender").css('border-color', 'lightgrey');
        $.ajax({
            //url: '@Url.Action("SubmitData", "Employee")',
            url: "/Employee/getbyID/" + EmpID,
            type: "GET",
            contentType: "application/json;charset=UTF-8",
            //dataType: "json",
            success: function (result) {
                $('#Id').val(result.Id);
                $('#Name').val(result.Name);
                $('#City').val(result.City);
                $('#Address').val(result.Address);
                $('#CreatedDate').val(result.CreatedDate);
                $('#Gender').val(result.Gender);
                //$('#Submit').show();
                $('#btnUpdate').show();
                $('#btnAdd').hide();
            },
        });
        return false;
    }
    //function for updating employee's record
    function Update() {
        var res = validate();
        if (res == false) {
            return false;
        }
        var empObj = {
            Id: $('#Id').val(),
            Name: $('#Name').val(),
            City: $('#City').val(),
            Address: $('#Address').val(),
            CreatedDate: $('#CreatedDate').val(),
            Gender: $('#Gender').val()
        };
        $.ajax({
            url: "/Employee/Update",
            data: JSON.stringify(empObj),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                getData();
                $('#Id').val("");
                $('#Name').val("");
                $('#City').val("");
                $('#Address').val("");
                $('#CreatedDate').val("");
                $('#Gender').val("");
            }
        });
    }
    //function for deleting employee's record
    function Delele(ID) {
        var ans = confirm("Are you sure you want to delete this Record?");
        if (ans) {
            $.ajax({
                url: "/Employee/Delete/" + ID,
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (result) {
                    loadData();
                }
            });
        }
    }
    function validate() {
        var isValid = true;
        if ($('#Name').val().trim() == "") {
            $('#Name').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#Name').css('border-color', 'lightgrey');
        }
        if ($('#City').val().trim() == "") {
            $('#City').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#City').css('border-color', 'lightgrey');
        }
        if ($('#Address').val().trim() == "") {
            $('#Address').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#Address').css('border-color', 'lightgrey');
        }
        if ($('#CreatedDate').val().trim() == "") {
            $('#CreatedDate').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#CreatedDate').css('border-color', 'lightgrey');
        }
        if ($('#Gender').val().trim() == "") {
            $('#Gender').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#Gender').css('border-color', 'lightgrey');
        }
        return isValid;
    }
</script>

MVC Demo

-----main controller--------


 Elaunch_DemoEntities context = new Elaunch_DemoEntities();
        const int pageSize = 10;
        // GET: Student
        public ActionResult Index(int id = 0)
        {
            StudentMaster objstu = new StudentMaster();
            if (id == 0)
            {
                ViewBag.check = "Add";
                return View();
            }
            else
            {
                ViewBag.check = "Update";
                objstu = context.StudentMasters.Find(id);
            }
            return View(objstu);

        }
        [HttpGet]
        public ActionResult GetAllStud(int page = 1, int sortby = 1, bool isAsc = true, string search = null)
        {
            IEnumerable<StudentMaster> Stuobj = context.StudentMasters.Where(p => search == null || p.Name.Contains(search) || p.Gender.Contains(search) || p.hobbies.Contains(search) || p.BirthDate.ToString().Contains(search));
            #region Sorting
            //switch (sortby)
            //{
            //    case 1:
            //        Stuobj = isAsc ? Stuobj.OrderBy(p => p.Name) : Stuobj.OrderByDescending(p => p.Name);
            //        break;
            //    case 2:
            //        Stuobj = isAsc ? Stuobj.OrderBy(p => p.Gender) : Stuobj.OrderByDescending(p => p.Gender);
            //        break;
            //    case 3:
            //        Stuobj = isAsc ? Stuobj.OrderBy(p => p.hobbies) : Stuobj.OrderByDescending(p => p.hobbies);
            //        break;
            //    default:
            //        Stuobj = isAsc ? Stuobj.OrderBy(p => p.BirthDate) : Stuobj.OrderByDescending(p => p.BirthDate);
            //        break;


            //}
            #endregion
            Stuobj = Stuobj.Skip((page - 1) * pageSize).Take(pageSize).ToList();
            ViewBag.CurrentPage = page;
            ViewBag.PageSize = pageSize;
            ViewBag.TotalPage = Math.Ceiling((double)context.StudentMasters.Count() / pageSize);
            ViewBag.Search = search;
            ViewBag.SortBy = sortby;
            ViewBag.IsAsc = isAsc;
            return View(Stuobj);
        }
        [HttpPost]
        public ActionResult createupdate(StudentMaster obj)
        {
            ModelState["StudentId"].Errors.Clear();
            if (ModelState.IsValid)
            {
                StudentMaster objstud = new StudentMaster();
                if (obj.StudentId > 0)
                {
                    objstud.Name = obj.Name;
                    objstud.BirthDate = obj.BirthDate;
                    objstud.Gender = obj.Gender;
                    objstud.hobbies = obj.hobbies;
                    objstud.StudentId = obj.StudentId;
                    context.Entry(obj).State = System.Data.Entity.EntityState.Modified;
                    context.SaveChanges();
                }
                else
                {
                    objstud.StudentId = obj.StudentId;
                    objstud.Name = obj.Name;
                    objstud.hobbies = obj.hobbies;
                    objstud.Gender = obj.Gender;
                    objstud.BirthDate = obj.BirthDate;
                    context.StudentMasters.Add(objstud);
                    context.SaveChanges();
                    Response.Write("Insert SuccssesFully");
                }
                return RedirectToAction("GetAllStud");
            }
            else
            {
                return View("Index");

            }
        }
        public ActionResult Delete(int id)
        {
            var obj = context.StudentMasters.Find(id);
            context.StudentMasters.Remove(obj);
            context.SaveChanges();
            return RedirectToAction("GetAllStud");
        }




---------View Index---------------

@model studentRegistrationMVC.Models.StudentMaster

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*@using (Html.BeginForm("createupdate", "Student", FormMethod.Post))*@
@using (Html.BeginForm("createupdate", "Student", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="row">
        <br />
        <h4>@ViewBag.check Student Registration</h4>
        <div class="row">
            @Html.HiddenFor(x=>x.StudentId)
            <div class="form-group">
                @Html.LabelFor(x => x.Name)
                @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(x => x.Name, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.BirthDate)
                @Html.TextBoxFor(x => x.BirthDate, new { @class = "form-control" })
                @Html.ValidationMessageFor(x => x.BirthDate, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.hobbies)
                @Html.DropDownListFor(x => x.hobbies, new List<SelectListItem> { new SelectListItem { Value = "Reading", Text = "Reading" }, new SelectListItem { Value = "dancing", Text = "dancing" } }, new { @class = "form-control" })
                @Html.ValidationMessageFor(x => x.hobbies, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.Gender)
                @Html.RadioButtonFor(x => x.Gender, "Male", true) Male
                @Html.RadioButtonFor(x => x.Gender, "Female", true) Female
                @Html.ValidationMessageFor(x => x.Gender, "", new { @class = "text-danger" })
            </div>
          <div class="form-group">
              <input type="submit" value="Save" class="btn btn-success" />
          </div>
        </div>
    </div>

                    }



--------view GetAllstud-----------
@model IEnumerable<studentRegistrationMVC.Models.StudentMaster>
@{
    ViewBag.Title = "GetAllStud";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h4>Student List</h4>
<div class="row">
    <div class="col-sm-12">
        <div class="product-search">
            <form action="@Url.Action("GetAllStud", "Student")" method="get">
                Search<input id="search" name="search" type="text" value="@ViewBag.Search" />
                @*<input type="submit" value="Search" />*@
            </form>
        </div>
        <div class="pull-right">
            <a href="@Url.Action("Index", "student")"><input type="button" name="Add Student" value="Add Student" /></a>
        </div>
        <table class="table table-hover">
            <thead>
                <tr>

                    <th>Name</th>
                    <th>Birth Date</th>
                    <th>Gender</th>
                    <th>Hobbies</th>
                    <th>Action</th>
                </tr>
            </thead>

            @foreach (var stu in Model)
            {
                <tbody>
                    <tr>
                        <td>@Html.Label(stu.Name)</td>


                        <td>@Html.Label(stu.BirthDate.Value.ToString("dd/MM/yyyy"))</td>


                        <td>@Html.Label(stu.Gender)</td>


                        <td>@Html.Label(stu.hobbies)</td>
                        <td>
                            @Html.ActionLink("Edit", "Index", new { id = stu.StudentId })
                            @Html.ActionLink("Delete", "Delete", new { id = stu.StudentId })
                        </td>

                    </tr>
                </tbody>


            }

        </table>
        <div class="pagination">
            Page:
            @for (int p = 1; p <= ViewBag.TotalPage; p++)
            {
                <a class="@(p==ViewBag.CurrentPage?"Current":"")" href="@Url.Action("GetAllStud", "Student", new {Page=p })">@p</a>
            }
        </div>

    </div>
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        $("#search").change(function (data) {
            var searchId = $("#search").val();
            window.location.href = "/Student/GetAllStud?search=" + searchId;
            //$.getJSON("/Student/GetAllStud?", {
            //    search: searchId
            //});
            //alert(search);
        })
    })

   
</script>

MVC Jquery

-------------------------
C# File
------------------------


using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DemoPractice.Controllers
{
public class AjaxController : Controller
{
private EmployeeEntities emp = new EmployeeEntities();
public static List<Employee> emplist = new List<Employee>();
public ActionResult Index()
{
return View();
}
public bool SubmitData(Employee obj)
{
try
{
emp.Employees.Add(obj);
emp.SaveChanges();
//emplist.Add(obj);
return true;
}
catch
{
return false;
}
}
public JsonResult GetAll()
{
emplist = emp.Employees.ToList();
return Json(emplist, JsonRequestBehavior.AllowGet);
}
public JsonResult GetbyID(int ID)
{
var emps = emplist.Find(x => x.Id.Equals(ID));
return Json(emps, JsonRequestBehavior.AllowGet);
}
public ActionResult Edit(Employee employees)
{
if (ModelState.IsValid)
{
emp.Entry(employees).State = EntityState.Modified;
emp.SaveChanges();
return RedirectToAction("Index");
}
return View(employees);
}
public JsonResult Update(Employee emps)
{
emp.Entry(emps).State = EntityState.Modified;
emp.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}
public JsonResult Delete(int ID)
{
Employee employees = emp.Employees.Find(ID);
emp.Employees.Remove(employees);
emp.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}
}
}

-------------------------
 Create View with JavaScript
------------------------

@{

ViewBag.Title = "Index";

}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<h2>Index</h2>

<div class="container">

<div class="form-group">

<label for="EmployeeId">ID</label>

<input type="text" class="form-control" id="Id" name="Id" placeholder="Id" disabled="disabled" />

</div>

<div class="form-group">

<span>Name:</span>

<input type="text" id="Name" name="Name" />

</div>

<div class="form-group">

<span>City:</span>

<input type="text" id="City" name="City" data-valmsg-for="Address" />

</div>

<div class="form-group">

<span>Address:</span>

<input type="text" id="Address" name="Address" data-valmsg-for="Address" />

</div>

<div class="form-group">

<span>CreatedDate:</span>

<input type="date" id="CreatedDate" name="CreatedDate" data-valmsg-for="Address" />

</div>

<div class="form-group">

<span>Male:</span> <input checked="checked" id="Gender" name="Gender" type="radio" value="Male" />

<span>FeMale:</span> <input id="Gender" name="Gender" type="radio" value="Female" />

</div>

<div class="form-group">

<button type="button" class="btn btn-success" id="btnAdd" onclick="return submitData()">Add</button>

<button type="button" class="btn btn-success" id="btnUpdate" style="display:none;" onclick="return Update();">Update</button>

</div>

@* <input type="button" class="btn btn-success" id="Submit" value="Submit" onclick="submitData()" />*@

</div>

<div>

<table id="resultTable" class="table table-bordered table-hover"></table>

</div>

<script type="text/javascript">

getData();

function submitData(){

var res = validate();

if (res == false) {

return false;

}

var data = {

Id: $('#Id').val(),

Name: $("#Name").val(),

City: $("#City").val(),

Address: $("#Address").val(),

CreatedDate: $("CreatedDate").val(),

Gender: $("Gender").val()

}

$.ajax({

type: "POST",

url: '@Url.Action("SubmitData", "Ajax")',

data: data,

success: function (res) {

if (res) {

getData();

//$("#Id").val('');

$("#Name").val('');

$("#City").val('');

$("#Address").val('');

$("#CreatedDate").val('');

$("#Gender").val('');

}

}

});

}

function getData() {

$.ajax({

type: "GET",

url: '@Url.Action("GetAll","Ajax")',

success: function (result) {

debugger

var data = '<tr><th>Sr.no</th><th>Name</th><th>City</th><th>Address</th><th>CreatedDate</th><th>Gender</th><th></th></tr>';

for (var i = 0; i < result.length; i++) {

data += '<tr><td>' + result[i].Id + '</td><td>' + result[i].Name + '</td><td>' + result[i].City + '</td><td>' + result[i].Address + '</td><td>' + result[i].CreatedDate + '</td><td>' + result[i].Gender + '</td><td><a href="#" onclick="getbyID(' + result[i].Id + ')">Edit</a> | <a href="#" onclick="Delele(' + result[i].Id + ')">Delete</a></td></tr>'

}

$("#resultTable").html(data)

}

});

}

function getbyID(EmpID) {

$('#Name').css('border-color', 'lightgrey');

$('#City').css('border-color', 'lightgrey');

$('#Address').css('border-color', 'lightgrey');

$('#CreatedDate').css('border-color', 'lightgrey');

$("#Gender").css('border-color', 'lightgrey');

$.ajax({

//url: '@Url.Action("SubmitData", "Ajax")',

url: "/Ajax/getbyID/" + EmpID,

type: "GET",

contentType: "application/json;charset=UTF-8",

//dataType: "json",

success: function (result) {

$('#Id').val(result.Id);

$('#Name').val(result.Name);

$('#City').val(result.City);

$('#Address').val(result.Address);

$('#CreatedDate').val(result.CreatedDate);

$('#Gender').val(result.Gender);

//$('#Submit').show();

$('#btnUpdate').show();

$('#btnAdd').hide();

},

});

return false;

}

//function for updating employee's record

function Update() {

var res = validate();

if (res == false) {

return false;

}

var empObj = {

Id: $('#Id').val(),

Name: $('#Name').val(),

City: $('#City').val(),

Address: $('#Address').val(),

CreatedDate: $('#CreatedDate').val(),

Gender: $('#Gender').val()

};

$.ajax({

url: "/Ajax/Update",

data: JSON.stringify(empObj),

type: "POST",

contentType: "application/json;charset=utf-8",

dataType: "json",

success: function (result) {

getData();

$('#Id').val("");

$('#Name').val("");

$('#City').val("");

$('#Address').val("");

$('#CreatedDate').val("");

$('#Gender').val("");

}

});

}

//function for deleting employee's record

function Delele(ID) {

var ans = confirm("Are you sure you want to delete this Record?");

if (ans) {

$.ajax({

url: "/Ajax/Delete/" + ID,

type: "POST",

contentType: "application/json;charset=UTF-8",

dataType: "json",

success: function (result) {

loadData();

}

});

}

}

function validate() {

var isValid = true;

if ($('#Name').val().trim() == "") {

$('#Name').css('border-color', 'Red');

isValid = false;

}

else {

$('#Name').css('border-color', 'lightgrey');

}

if ($('#City').val().trim() == "") {

$('#City').css('border-color', 'Red');

isValid = false;

}

else {

$('#City').css('border-color', 'lightgrey');

}

if ($('#Address').val().trim() == "") {

$('#Address').css('border-color', 'Red');

isValid = false;

}

else {

$('#Address').css('border-color', 'lightgrey');

}

if ($('#CreatedDate').val().trim() == "") {

$('#CreatedDate').css('border-color', 'Red');

isValid = false;

}

else {

$('#CreatedDate').css('border-color', 'lightgrey');

}

if ($('#Gender').val().trim() == "") {

$('#Gender').css('border-color', 'Red');

isValid = false;

}

else {

$('#Gender').css('border-color', 'lightgrey');

}

return isValid;

}

</script>

Fully JQuery Crud Operation / Insert ,Update, Delete Demo (Using Ajax And WebService)

============================
 .aspx page (design page)
============================


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Employee Master</title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <link href="font/css/font-awesome.css" rel="stylesheet" type="text/css"></link>
   
    <script type="text/javascript">
        $(document).ready(function () {
            // Country Combo Fill
            GetAjaxcall("ControlMaster.asmx/GetCombo", "{ type: 'CON' }", bindCombo, "Country");
            // Sate Combo Fill
            GetAjaxcall("ControlMaster.asmx/GetCombo", "{ type: 'STA' }", bindCombo, "State");
            // City Combo Fill
            GetAjaxcall("ControlMaster.asmx/GetCombo", "{ type: 'CIT' }", bindCombo, "City");
            // Employee Reord Fill
            GetAjaxcall("ControlMaster.asmx/GetEmployee", "{ PerPage: " + $('#ddlPage').val() + ", searchKey: '" + $('#txtSearch').val() + "' , type: 'EMP' }", bindEmpolyee, "");
            // Search Record Get
            $("#txtSearch").keyup(function () {
                GetAjaxcall("ControlMaster.asmx/GetEmployee", "{ PerPage: " + $('#ddlPage').val() + ", searchKey: '" + $('#txtSearch').val() + "' , type: 'EMP'}", bindEmpolyee, "");
            });
            // Search Record Pagewise Get
            $("#ddlPage").change(function () {
                GetAjaxcall("ControlMaster.asmx/GetEmployee", "{ PerPage: " + $('#ddlPage').val() + ", searchKey: '" + $('#txtSearch').val() + "' , type: 'EMP'}", bindEmpolyee, "");
            });
            // Save Button Click Event
            $("#btnSave").click(function () {
                var empDetail = {};
                empDetail.id = ($('#hdnId').val() == undefined || $('#hdnId').val() == null || $('#hdnId').val() == "") ? 0 : $('#hdnId').val();
                empDetail.name = $('#txtName').val();
                empDetail.country = $('#ddlCountry').find('option:selected').text();
                empDetail.state = $('#ddlState').find('option:selected').text();
                empDetail.city = $('#ddlCity').find('option:selected').text();
                empDetail.salary = $('#txtSalary').val();
                GetAjaxcall("ControlMaster.asmx/IUDEMP", "{ empDetail: " + JSON.stringify(empDetail) + " , type: 'Save' }", "", "");
                GetAjaxcall("ControlMaster.asmx/GetEmployee", "{ PerPage: " + $('#ddlPage').val() + ", searchKey: '" + $('#txtSearch').val() + "' , type: 'EMP'}", bindEmpolyee, "");
                clearedata();
            });
        });
        function clearedata() {
            $('#hdnId').val('');
            $('#txtName').val('');
            $("#ddlCountry option:first").attr('selected', 'selected');
            $("#ddlState option:first").attr('selected', 'selected');
            $("#ddlCity option:first").attr('selected', 'selected');
            $('#txtSalary').val('');
        }
        function EditData(id) {
            GetAjaxcall("ControlMaster.asmx/GetEmployee", "{ PerPage: " + $('#ddlPage').val() + ", searchKey: '" + id + "', type: 'SNG' }", bindEditEmpolyee, "");
        }
        function bindEditEmpolyee(data) {
            var row = (data.d.lstEmp);
            if (row.length > 0) {
                $('#hdnId').val(row[0].Id);
                $('#txtName').val(row[0].Name);
                $("#ddlCountry option:contains(" + row[0].Country + ")").attr("selected", "selected");
                $("#ddlState option:contains(" + row[0].State + ")").attr("selected", "selected");
                $("#ddlCity option:contains(" + row[0].City + ")").attr("selected", "selected");
                $("#txtSalary").val(row[0].Salary);
            }
        }
        function DeleteData(id) {
            var ans = confirm("Are You Sure To Delete???");
            if (ans) {
                var empDetail = {};
                empDetail.id = id;
                GetAjaxcall("ControlMaster.asmx/IUDEMP", "{ empDetail: " + JSON.stringify(empDetail) + ", type: 'Delete'}", "", "");
            }
            GetAjaxcall("ControlMaster.asmx/GetEmployee", "{ PerPage: " + $('#ddlPage').val() + ", searchKey: '" + $('#txtSearch').val() + "', type: 'EMP' }", bindEmpolyee, "");
        }
        // Comman Combo fill function
        function bindCombo(data, para) {
            var setdata = '';
            $('#ddl' + para).html('');
            var row = (data.d.lstCombo);
            setdata = "<option value='0'> -- Select " + para + "-- </option>";
            for (var i = 0 ; i < row.length; i++) {
                setdata += "<option value=" + row[i].id + ">" + row[i].name + "</option>";
            }
            $('#ddl' + para).html(setdata);
        }
        // Comman Empolyee Reord fill function
        function bindEmpolyee(data) {
            var setgrid = '';
            $("#tblGrid").html('');
            var row = (data.d.lstEmp);
            if (row.length > 0) {
                setgrid = "<table id='example' class='table table-striped table-bordered' cellspacing='0' width='100%'>
<tr>";
                setgrid += "<th>NAME <i class='fa fa-sort' ></i></th>";
                setgrid += "<th>COUNTRY <i class='fa fa-sort' aria-hidden='true'></i></th>";
                setgrid += "<th>STATE <i class='fa fa-sort' aria-hidden='true'></i></th>";
                setgrid += "<th>CITY <i class='fa fa-sort' aria-hidden='true'></i></th>";
                setgrid += "<th>SALARY <i class='fa fa-sort' aria-hidden='true'></i></th>";
                setgrid += "<th colspan='2'>COMMAND</th></tr>
";
                for (var i = 0 ; i < row.length; i++) {
                    setgrid += "<tr><td>" + row[i].Name + "</td><td>" + row[i].Country + "</td><td>" + row[i].State + "</td><td>" + row[i].City + "</td><td>" + row[i].Salary + "</td>";
                    setgrid += "<td><input type='button' value='Edit' id='btnEdit' onclick='EditData(" + row[i].Id + ");' /></td>";
                    setgrid += "<td><input type='button' value='Delete' id='btnDelete' onclick='DeleteData(" + row[i].Id + ");' /></td></tr>
";
                }
                setgrid += "</table>
";
            } else { setgrid = 'Record Not Found!'; }
            $("#tblGrid").html(setgrid);
        }
        // Comman Ajax Call Function
        function GetAjaxcall(url, data, func, para) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                async: false,
                url: url,
                data: data,
                success: function (data) {
                    if (func != "") {
                        if (para != "")
                            func(data, para);
                        else
                            func(data);
                    } else {
                        alert(data.d);
                        GetAjaxcall("ControlMaster.asmx/GetEmployee", "{ PerPage: " + $('#ddlPage').val() + ", searchKey: '" + $('#txtSearch').val() + "' , type: 'EMP'}", bindEmpolyee, "");
                    }
                },
                failure: function (response) {
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="divform">
                <table>
<tr>
                        <td>Name : </td>
                        <td>
                            <input id="txtName" type="text" />
                        </td>
                    </tr>
<tr>
                        <td>Country : </td>
                        <td>
                            <select id="ddlCountry">
                            </select>
                        </td>
                    </tr>
<tr>
                        <td>State : </td>
                        <td>
                            <select id="ddlState">
                            </select>
                        </td>
                    </tr>
<tr>
                        <td>City : </td>
                        <td>
                            &lt;%--<input id="txtCity" type="text" />--%&gt;
                            <select id="ddlCity">
                            </select>
                        </td>
                    </tr>
<tr>
                        <td>Salary : </td>
                        <td>
                            <input id="txtSalary" type="text" />
                        </td>
                    </tr>
<tr>
                        <td colspan="2">
                            <input id="hdnId" type="hidden" />
                            <input id="btnSave" type="button" value="Save" />
                            <input id="btnCancel" onclick="clearedata();" type="button" value="Cancel" />
                        </td>
                    </tr>
</table>
<br />
            </div>
<div id="divGrig">
                <div style="text-align: left;">
                    Search :
                    <input id="txtSearch" type="text" />
                </div>
<table id="tblGrid">
                </table>
<div style="text-align: left;">
                    <select id="ddlPage">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option selected="selected" value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="20">30</option>
                    </select>
                </div>
</div>
</div>
</form>
</body>
</html>


</div>




===========================
 .asmx page (web service)
===========================

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

namespace WebApplication1
{
    /// <summary>
    /// Summary description for ControlMaster
    /// </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 ControlMaster : System.Web.Services.WebService
    {
        SqlConnection con = new SqlConnection(@"Data Source=PCSUPPLY-PC;Initial Catalog=BillAndEmpMst;User ID=sa;Password=123456");
        //SqlConnection con = new SqlConnection(@"Data Source=SANMANSURAT2-PC;Initial Catalog=EmpMst;User ID=sa;Password=123456");

        [WebMethod]
        public ReturnList GetCombo(string type)
        {
            ReturnList rl = new ReturnList();
            List<comboData> lstCombo = new List<comboData>();

            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            if (con.State == ConnectionState.Broken) { con.Close(); }
            if (con.State == ConnectionState.Closed) { con.Open(); }
            try
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.CommandText = "sp_GetData";
                cmd.Parameters.Clear();
                cmd.Parameters.AddWithValue("@type", type);
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                for (int i = 0; i < dt.DefaultView.Count; i++)
                {
                    comboData cd = new comboData();
                    cd.id = Convert.ToInt32(dt.DefaultView[i]["Id"]);
                    cd.name = Convert.ToString(dt.DefaultView[i]["Name"]);
                    lstCombo.Add(cd);
                }
                rl.msg = "";
                rl.lstCombo = lstCombo;
            }
            catch (Exception)
            {
                rl.msg = "Data Not Found!";
                rl.lstCombo = lstCombo;
                throw;
            }
            finally
            {
                cmd.Connection = null;
                cmd.Parameters.Clear();
                cmd.Dispose();
                if (con.State != ConnectionState.Closed) { con.Close(); }
            }
            return rl;
        }

        [WebMethod]
        public ReturnList GetEmployee(int PerPage, string searchKey, string type)
        {
            ReturnList rl = new ReturnList();
            List<EmpDetail> lstEmp = new List<EmpDetail>();

            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            if (con.State == ConnectionState.Broken) { con.Close(); }
            if (con.State == ConnectionState.Closed) { con.Open(); }
            try
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.CommandText = "sp_GetData";
                cmd.Parameters.Clear();
                cmd.Parameters.AddWithValue("@type", type);
                cmd.Parameters.AddWithValue("@RecordPerPage", PerPage);
                cmd.Parameters.AddWithValue("@SearchField", searchKey);
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                //if (searchKey != "")
                //dt.DefaultView.RowFilter = "Name Like '%" + searchKey + "%' Or Country Like '%" + searchKey + "%' Or State Like '%" + searchKey + "%' Or City Like '%" + searchKey + "%' Or Salary Like '%" + searchKey + "%'";
                for (int i = 0; i < dt.DefaultView.Count; i++)
                {
                    EmpDetail ed = new EmpDetail();
                    ed.Id = Convert.ToInt32(dt.DefaultView[i]["id"]);
                    ed.Name = Convert.ToString(dt.DefaultView[i]["name"]);
                    ed.Country = Convert.ToString(dt.DefaultView[i]["country"]);
                    ed.State = Convert.ToString(dt.DefaultView[i]["state"]);
                    ed.City = Convert.ToString(dt.DefaultView[i]["city"]);
                    ed.Salary = Convert.ToInt32(dt.DefaultView[i]["salary"]);
                    lstEmp.Add(ed);
                }
                rl.msg = "";
                rl.lstEmp = lstEmp;
            }
            catch (Exception)
            {
                rl.msg = "Data Not Found!";
                rl.lstEmp = lstEmp;
                throw;
            }
            finally
            {
                cmd.Connection = null;
                cmd.Parameters.Clear();
                cmd.Dispose();
                if (con.State != ConnectionState.Closed) { con.Close(); }
            }
            return rl;
        }

        [WebMethod]
        public string IUDEMP(EmpDetail empDetail, string type)
        {
            string msg = "";
            EmpDetail ed = new EmpDetail();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            if (con.State == ConnectionState.Broken) { con.Close(); }
            if (con.State == ConnectionState.Closed) { con.Open(); }
            try
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.CommandText = "sp_IUDData";
                cmd.Parameters.Clear();
                cmd.Parameters.AddWithValue("@Etype", type);
                cmd.Parameters.AddWithValue("@Eid", empDetail.Id);
                if (!string.IsNullOrEmpty(empDetail.Name)) cmd.Parameters.AddWithValue("@Ename", empDetail.Name);
                if (!string.IsNullOrEmpty(empDetail.Country)) cmd.Parameters.AddWithValue("@Ecountry", empDetail.Country);
                if (!string.IsNullOrEmpty(empDetail.State)) cmd.Parameters.AddWithValue("@Estate", empDetail.State);
                if (!string.IsNullOrEmpty(empDetail.City)) cmd.Parameters.AddWithValue("@Ecity", empDetail.City);
                if (!string.IsNullOrEmpty(Convert.ToString(empDetail.Salary))) cmd.Parameters.AddWithValue("@Esalary", empDetail.Salary);
                cmd.ExecuteNonQuery();
                msg = "Successfully Opration.";
            }
            catch (Exception)
            {
                msg = "";
                throw;
            }
            finally
            {
                cmd.Connection = null;
                cmd.Parameters.Clear();
                cmd.Dispose();
                if (con.State != ConnectionState.Closed) { con.Close(); }
            }
            return msg;
        }

        #region " Class "
        public class comboData
        {
            public int id;
            public string name;
        }
        public class ReturnList
        {
            public string msg;
            public List<EmpDetail> lstEmp;
            public List<comboData> lstCombo;
        }
        public class EmpDetail
        {
            public int Id;
            public string Name, Country, State, City;
            public decimal Salary;
        }
        #endregion
    }
}



==========================
Store Procedure
==========================
-----------------------------------------
1.) Insert/Update/Delete (sp_IUDData)
-----------------------------------------

ALTER PROCEDURE [dbo].[sp_IUDData]
@Etype  varchar(50) = '',
@Eid int = 0,
@Ename varchar(80) = '',
@Ecountry varchar(80) = '',
@Estate varchar(80) = '',
@Ecity varchar(80) = '',
@Esalary int = 0,
@Edate varchar(50)=''
AS
BEGIN
SET NOCOUNT ON;
if @Etype = 'Insert'
begin
Insert into Emp_Mast(name, country, [state], city, salary, currentdate)
values (@Ename,@Ecountry,@Estate,@Ecity,@Esalary,GETDATE())
end
else if @Etype = 'Update'
begin
Update Emp_Mast set name=@Ename, country=@Ecountry, [state]=@Estate, city=@Ecity,
salary=@Esalary where id=@Eid
end
else if @Etype = 'Delete'
begin
Delete from Emp_Mast where id=@Eid
end
else if @Etype = 'Save'
begin
if Exists(Select 1 from dbo.Emp_Mast Where id=@Eid)
begin
Update Emp_Mast set name=@Ename, country=@Ecountry, [state]=@Estate, city=@Ecity,
salary=@Esalary,currentdate=GETDATE() where id=@Eid
end
else
begin
Insert into Emp_Mast(name, country, [state], city, salary, currentdate)
values (@Ename,@Ecountry,@Estate,@Ecity,@Esalary,GETDATE())
end
end
END

----------------------------------
2). Select/Get Data (sp_GetData)
----------------------------------

ALTER PROCEDURE [dbo].[sp_GetData]
@type  varchar(50) = '',
@RecordPerPage INT = 0,
@SearchField varchar(50) = ''
AS
BEGIN
SET NOCOUNT ON;
if @type = 'EMP'
begin
DECLARE @CurrentPage INT SET @CurrentPage = 1
DECLARE @From INT SET @From = (@CurrentPage -1) * @RecordPerPage + 1
DECLARE @TO INT SET @TO = @CurrentPage * @RecordPerPage;

WITH EmpList as (
select ROW_NUMBER() over (order by id ) as [row] , * from Emp_Mast
where id like '%' +  @SearchField + '%' Or name like '%' +  @SearchField + '%'
Or country like '%' +  @SearchField + '%' Or [state] like '%' +  @SearchField + '%'
Or city like '%' +  @SearchField + '%' Or salary like '%' +  @SearchField + '%'
)
select * from EmpList where row between @From And @TO
end
else if @type = 'CON'
begin
Select couid As Id, country As Name from Country_Mast
end
else if @type = 'STA'
begin
Select stateid As Id, state As Name from State_Mast
end
else if @type = 'CIT'
begin
Select cid As Id, city As Name from City_Mast
end
END