angular js File Upload

Controller

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult Post()
        {
            var file = Request.Files[0];
            file.SaveAs(Server.MapPath("~/Image/" + Path.GetFileName(file.FileName)));
            return Json(Request.Form["EID"] + " " + Request.Form["NAME"], JsonRequestBehavior.AllowGet);
        }
    }
}
View Code


@{
    ViewBag.Title = "Index";
}

<h2>Jay Jagannath...</h2>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<div class="container" ng-app="app" ng-controller="ctr">
    <form class="form-horizontal" >
        <div class="form-group">
            <label class="col-lg-4 control-label">Eid</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="EID" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label">Name</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="NAME" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label">File Upload</label>
            <div class="col-lg-4">
                <input type="file" class="form-control" id="fu"  />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label"></label>
            <div class="col-lg-4">
                <input type="button" class="btn btn-primary" value="Save" ng-click="save()" />
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    angular.module("app", []).controller("ctr", function ($scope, FileUploadService) {
        $scope.save = function () {
            var formData = new FormData();
            var file = document.getElementById("fu").files[0];
            formData.append("fu", file);
            formData.append("EID", $scope.EID);
            formData.append("NAME", $scope.NAME);
            FileUploadService.savefile(formData).then(function (d) {
                alert(d.data);
            });
        }

    }).factory("FileUploadService", function ($http) {

        var fac = {};
        fac.savefile = function (fd)
        {
            var config = {
                headers: {
                    'Content-Type': 'multipart/form-data;charset=utf-8;'
                }
            }
            return $http.post('/Home/Post', fd, config);
        }
        return fac;
    });
</script>

cascading dropdown in angular js,MVC & web api

WEB API CODE :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using WebApplication33.Models;

namespace WebApplication33.Controllers

{

   

    public class ValuesController : ApiController

    {

        public List<COUNTRY> Getc()

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.COUNTRies.ToList();

            }

        }

        public List<STATE> Gets(int CID)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.STATEs.Where(m => m.CID==CID).ToList();

            }

        }

        

    }

}

VIEW CODE :

@{

    ViewBag.Title = "Index";

}

<link href="~/Content/bootstrap.css" rel="stylesheet" />

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

<script src="~/Scripts/angular.js"></script>

<h2>jay jagannath</h2>

<div class="container" ng-app="app" ng-controller="ctr">

    <form class="form-horizontal">

        <div class="form-group">

            <label class="col-lg-4 control-label">COUNTRY</label>

            <div class="col-lg-4">

                <select class="form-control" ng-options="c.CID as c.CNAME for c in listc" ng-model="CID" ng-change="fillddl()">

                    <option value="">Select</option>

                </select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">STATE</label>

            <div class="col-lg-4">

                <select class="form-control" ng-options="c.SID as c.SNAME for c in lists" ng-model="SID" >

                    <option value="">{{display}}</option>

                </select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label"></label>

            <div class="col-lg-4">

                <input type="button" value="Result" ng-click="save()" class="btn btn-primary" />

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label"></label>

            <div class="col-lg-4">

                {{result}}

            </div>

        </div>

    </form>

</div>

<script type="text/javascript">

    angular.module("app", [])

        .controller("ctr", function ($scope, EmpService) {

            $scope.listc = null;

            $scope.lists = null;

            $scope.CID = null;

            $scope.SID = null;

            EmpService.GetCountry().then(function (d) {

                $scope.listc = d.data;

            });

            $scope.fillddl = function ()

            {

                EmpService.GetState($scope.CID).then(function (d) {

                    $scope.display = "Select";

                    $scope.lists = d.data;

                });

            }

            $scope.save = function ()

            {

               

                $scope.result = "Selected country Id is :" + $scope.CID +" Selected state id is :" + $scope.SID;

            }

        })

        .factory("EmpService", function ($http) {

            var fac = {};

            fac.GetCountry = function ()

            {

                return $http.get('http://localhost:53550/api/Values');

            };

            fac.GetState = function (CID) {

                return $http.get('http://localhost:53550/api/Values/Gets?CID=' + CID);

            }

            return fac;

    });

</script>

Multiple delete,date picker &CURD oration in NG GRIDE, MVC ,WEB API, & ANGULARJS

Web Api Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication32.Models;

namespace WebApplication32.Controllers
{
 
    public class ValuesController : ApiController
    {
        public List<string> Getc()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.COUNTRies.Select(m=>m.CNAME).ToList();
            }
        }
        public List<string> Gets(string CNAME)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                int cid = obj.COUNTRies.SingleOrDefault(m => m.CNAME == CNAME).CID;
                return obj.STATEs.Where(n=>n.CID==cid).Select(m => m.SNAME).ToList();
            }
        }
        public List<EMP> Gete(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        public EMP Get(int EID, int j)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.SingleOrDefault(m => m.EID == EID);
            }
        }
        [HttpPost]
        public string Post(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.Add(emp);
                obj.SaveChanges();
                return "Data Saved.";
            }
        }
        [HttpPut]
        public string Put(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(n => n.EID == emp.EID);
                emp1.NAME = emp.NAME;
                emp1.ADDRESS = emp.ADDRESS;
                emp1.DOB = emp.DOB;
                emp1.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                emp1.CNAME = emp.CNAME;
                emp1.SNAME = emp.SNAME;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpPatch]
        public string Del(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(n => n.EID == EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
        [HttpDelete]
        public string Mdelete([FromUri]List<int> lst)
        {
            using (Database1Entities obj = new Database1Entities())
            {
             
                obj.EMPs.RemoveRange(obj.EMPs.Where(n=>lst.Contains(n.EID)));
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
    }
}

Veiw Code :

@{

    ViewBag.Title = "Index";

}

<link href="~/Content/ng-grid.css" rel="stylesheet" />

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />

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

<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/bootstrap-datepicker.js"></script>

<script src="~/Scripts/ng-grid.js"></script>

<h2>Jay Jagannath...</h2><br /><br />

<div class="container" ng-app="app" ng-controller="ctr">

    <form class="form-horizontal">

        <div class="form-group">

            <label class="col-lg-4 control-label">EID</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.EID" id="tb" />

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">NAME</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.NAME" />

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">ADDRESS</label>

            <div class="col-lg-4">

                <textarea class="form-control" ng-model="EMP.ADDRESS"></textarea>

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">DOB</label>

            <div class="col-lg-4">

                <input type="text" class="form-control c" ng-model="EMP.DOB" />

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">GENDER</label>

            <div class="col-lg-4">

                <input type="radio" value="Male" ng-model="EMP.GENDER" />Male

                <input type="radio" value="Female" ng-model="EMP.GENDER" />Female

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">ARE YOU MARRIED ?</label>

            <div class="col-lg-4">

                <input type="checkbox" ng-model="EMP.ISMARRIED" />

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">COUNTRY</label>

            <div class="col-lg-4">

                <select ng-options="c for  c in listc" ng-change="fillddl()" class="form-control" ng-model="EMP.CNAME">

                   

                </select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">STATE</label>

            <div class="col-lg-4">

                <select ng-options="c for  c in  lists" class="form-control" ng-model="EMP.SNAME">

                    

                </select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label"></label>

            <div class="col-lg-4">

                <input type="button" class="btn btn-primary" value="Delete All" ng-click="delall()" style="width:80px" />

                <input type="button" class="btn btn-primary" value="Save" ng-click="save()" style="width:80px" />

                <input type="button" class="btn btn-primary" value="Update" ng-click="update()" style="width:80px" />

                <input type="button" class="btn btn-primary" value="Reset" ng-click="reset()" style="width:80px" />

            </div>

        </div>

        <div class="gridStyle" ng-grid="gridOptions">

        </div>

    </form>

</div>

<style type="text/css">

    .gridStyle {

        border: 1px solid rgb(212,212,212);

        width: 900px;

        height: 300px;

    }

</style>

<script type="text/javascript">

    var k;

    $('.c').datepicker({ format: 'yyyy-mm-dd' }).on("change", function () {

       k=$(this).val();

    });

    angular.module("app", ['ngGrid']).controller("ctr", function ($scope, $http) {

        var m;

        $scope.n = [];

        function clr() {

            $scope.EMP = new emp();

            $('#tb').focus();

        } clr();

        $scope.save = function () {

            $scope.EMP.DOB = k;

            alert($scope.EMP.DOB);

            m = $http({

                url: 'http://localhost:59600/api/Values/Post',

                method: 'Post',

                data: $scope.EMP,

            });

            m.then(function (d) {

                alert(d.data);

                clr();

                fill();

            });

        }

        function filldl() {

            m = $http({

                url: 'http://localhost:59600/api/Values/Getc',

                method: 'Get'

            });

            m.then(function (d) {

                $scope.listc = d.data;

            });

        } filldl();

        $scope.fillddl = function () {

            fd($scope.EMP.CNAME);

        }

        function fd(s) {

            m = $http({

                url: 'http://localhost:59600/api/Values/Gets?CNAME=' + s,

                method: 'Get'

            });

            m.then(function (d) {

                $scope.lists = d.data;

            });

        }

        function fill() {

            $scope.filterOptions = {

                filterText: "",

                useExternalFilter: false

            };

            $scope.totalServerItems = 0;

            $scope.pagingOptions = {

                pageSizes: ['5', '10', '20'],

                pageSize: '5',

                currentPage: 1

            };

            $scope.setPagingData = function (data, page, pageSize) {

                var pagedData = data.slice((page - 1) * pageSize, page * pageSize);

                $scope.DataSource = pagedData;

                $scope.totalServerItems = data.length;

                if (!$scope.$$phase) {

                    $scope.$apply();

                }

            };

            $scope.getPagedDataAsync = function (pageSize, page, searchText) {

                setTimeout(function () {

                    var data;

                    if (searchText) {

                        var ft = searchText.toLowerCase();

                        $http.get('http://localhost:59600/api/Values/Gete?i=' + 1).success(function (largeLoad) {

                            data = largeLoad.filter(function (item) {

                                return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;

                            });

                            $scope.setPagingData(data, page, pageSize);

                        });

                    } else {

                        $http.get('http://localhost:59600/api/Values/Gete?i=' + 2).success(function (largeLoad) {

                            $scope.setPagingData(largeLoad, page, pageSize);

                        });

                    }

                }, 100);

            };

            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

            $scope.$watch('pagingOptions', function (newVal, oldVal) {

                if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {

                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);

                }

            }, true);

            $scope.$watch('filterOptions', function (newVal, oldVal) {

                if (newVal !== oldVal) {

                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);

                }

            }, true);

            $scope.gridOptions = {

                data: 'DataSource',

                multiSelect: true,

                showSelectionCheckbox: true,

                enableCellEdit: false,

                enableRowSelection: true,

                enableColumnResize: false,

                enableCellSelection: true,

                enablePaging: true,

                showFooter: true,

                selectedItems: $scope.n,

                totalServerItems: 'totalServerItems',

                pagingOptions: $scope.pagingOptions,

                filterOptions: $scope.filterOptions,

                showFilter: true,

                columnDefs:

                 [

          { field: 'EID', displayName: 'Eid', width: '250px', resizable: true },

          { field: 'NAME', displayName: 'Name', width: '250px' },

           { field: "DOB", displayName: "DOB", width: "200px", cellTemplate: "<span>{{row.entity.DOB | date:'dd-MMM-yyyy'}}</span>" },

       {

           displayName: 'Actions', cellTemplate:

            '<div class="grid-action-cell">' +

            '<a ng-click="Edit(row.entity);" >Edit</a>' + ' | ' +

            '<a ng-click="Del(row.entity);" >Delete</a>' +

            '</div>'

       }

                 ],

            };

        } fill();

        $scope.Edit = function (s)

        {

            m = $http({

                url: 'http://localhost:59600/api/Values/Get?EID=' + s.EID+'&j='+1,

                method: 'Get'

            });

            m.then(function (d) {

                fd(d.data.CNAME);

                $scope.EMP = d.data;

                $scope.EMP.DOB = d.data.DOB.substring(0, 10);

            });

        }

        $scope.update = function () {

            if(k!=undefined)

            $scope.EMP.DOB = k;

            m = $http({

                url: 'http://localhost:59600/api/Values/Put',

                method: 'Put',

                data: $scope.EMP,

            });

            m.then(function (d) {

                alert(d.data);

                clr();

                fill();

            });

        }

        $scope.Del = function (s)

        {

           

            if (confirm('Do you want to delete it ?'))

            {

                m = $http({

                    url: 'http://localhost:59600/api/Values/Del?EID='+s.EID,

                    method: 'Patch',

                   

                  

                });

                m.then(function (d) {

                    alert(d.data);

                    fill();

                });

            }

        }

        $scope.reset = function ()

        {

            clr();

        }

        var p = '';

        $scope.delall = function ()

        {

            if (confirm('Do you want to delete it ?')) {

                angular.forEach($scope.n, function (i, j) {

                    p = p + 'lst=' + i.EID + '&';

                });

                p = p.substring(0, p.lastIndexOf('&'));

              

                m = $http({

                    url: 'http://localhost:59600/api/Values/Mdelete?' + p,

                    method: 'Delete'

                });

                m.then(function (d) {

                    alert(d.data);

                    fill();

                });

            }

        }

    });

   

    function emp() {

        return {

            EID: null,

            NAME: null,

            ADDRESS: null,

            DOB: null,

            GENDER: null,

            ISMARRIED: true,

            CNAME: null,

            SNAME: null

        }

    }

</script>

Multiple delete & CURD oration in NG GRIDE, MVC ,WEB API, & ANGULARJS

web api code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication31.Models;

namespace WebApplication31.Controllers
{
   
    public class ValuesController : ApiController
    {
        public List<string> Getc()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.COUNTRies.Select(m => m.CNAME).ToList();
            }
        }
        public List<string> Gets(string CNAME)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                int CID = obj.COUNTRies.SingleOrDefault(m => m.CNAME == CNAME).CID;
                return obj.STATEs.Where(m => m.CID == CID).Select(n => n.SNAME).ToList();
            }
        }
        public List<EMP> Gete(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        public EMP GetById(int EID,int j)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.SingleOrDefault(m => m.EID == EID);
            }
        }
        [HttpPost]
        public string Post(EMP emp)
        {
            using(Database1Entities obj=new Database1Entities())
            {
                 obj.EMPs.Add(emp);
                 obj.SaveChanges();
                 return "Data Saved.";
            }
        }
        [HttpPut]
        public string Put(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
                emp1.NAME = emp.NAME;
                emp1.ADDRESS = emp.ADDRESS;
                emp1.PASSWORD = emp.PASSWORD;
                emp1.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                emp1.CNAME = emp.CNAME;
                emp1.SNAME = emp.SNAME;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpPatch]
        public string Delete(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
        [HttpDelete]
        public string Mdelete([FromUri]List<int> lst)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.RemoveRange(obj.EMPs.Where(m => lst.Contains(m.EID)));
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
    }
}

View code :

@{

    ViewBag.Title = "Index";

}

<h2>Jay Jagannath...</h2>

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/ng-grid.css" rel="stylesheet" />

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

<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/ng-grid.js"></script>

<div class="container" ng-app="app" ng-controller="ctr">

    <form class="form-horizontal">

        <div class="form-group">

            <label class="control-label col-lg-4">EID</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.EID" id="tb" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">NAME</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.NAME" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">ADDRESS</label>

            <div class="col-lg-4">

                <textarea class="form-control" ng-model="EMP.ADDRESS" ></textarea>

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">PASSWORD</label>

            <div class="col-lg-4">

               <input type="password" class="form-control" ng-model="EMP.PASSWORD" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">GENDER</label>

            <div class="col-lg-4">

                <input type="radio" ng-model="EMP.GENDER" value="Male" />Male

                <input type="radio" ng-model="EMP.GENDER" value="Female" />Female

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">ARE YOU MARRIED ?</label>

            <div class="col-lg-4">

                <input type="checkbox" ng-model="EMP.ISMARRIED"  />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">COUNTRY</label>

            <div class="col-lg-4">

               <select class="form-control" ng-model="EMP.CNAME" ng-options="c for c in listc" ng-change="fillddl()"></select>

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">STATE</label>

            <div class="col-lg-4">

                <select class="form-control" ng-model="EMP.SNAME" ng-options="c for c in lists" ></select>

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4"></label>

            <div class="col-lg-4">

                <input type="button" class="btn btn-primary" value="Delete All" ng-click="delall()" style="width:80px" />

                <input type="button" class="btn btn-primary" value="Save" ng-click="save()" style="width:80px" />

                <input type="button" class="btn btn-primary" value="Update" ng-click="update()" style="width:80px" />

                <input type="button" class="btn btn-primary" value="Reset" ng-click="reset()" style="width:80px" />

            </div>

        </div>

        <div class="gridStyle" ng-grid="gridOptions">

        </div>

    </form>

</div>

<script type="text/javascript">

    angular.module("app", ['ngGrid']).controller("ctr", function ($scope, $http) {

        var m,k='';

        var lst = [];

        $scope.n = [];

        function clr() {

            $scope.EMP = new emp();

            $('#tb').focus();

        } clr();

        function fill() {

            $scope.filterOptions = {

                filterText: "",

                useExternalFilter: false

            };

            $scope.totalServerItems = 0;

            $scope.pagingOptions = {

                pageSizes: ['5', '10', '20'],

                pageSize: '5',

                currentPage: 1

            };

            $scope.setPagingData = function (data, page, pageSize) {

                var pagedData = data.slice((page - 1) * pageSize, page * pageSize);

                $scope.DataSource = pagedData;

                $scope.totalServerItems = data.length;

                if (!$scope.$$phase) {

                    $scope.$apply();

                }

            };

            $scope.getPagedDataAsync = function (pageSize, page, searchText) {

                setTimeout(function () {

                    var data;

                    if (searchText) {

                        var ft = searchText.toLowerCase();

                        $http.get('http://localhost:50311/api/Values/Gete?i='+1).success(function (largeLoad) {

                            data = largeLoad.filter(function (item) {

                                return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;

                            });

                            $scope.setPagingData(data, page, pageSize);

                        });

                    } else {

                        $http.get('http://localhost:50311/api/Values/Gete?i='+2).success(function (largeLoad) {

                            $scope.setPagingData(largeLoad, page, pageSize);

                        });

                    }

                }, 100);

            };

            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

            $scope.$watch('pagingOptions', function (newVal, oldVal) {

                if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {

                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);

                }

            }, true);

            $scope.$watch('filterOptions', function (newVal, oldVal) {

                if (newVal !== oldVal) {

                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);

                }

            }, true);

            $scope.gridOptions = {

                data: 'DataSource',

                multiSelect: true,

                showSelectionCheckbox: true,

                enableCellEdit: false,

                enableRowSelection: true,

                enableColumnResize: false,

                enableCellSelection: true,

                enablePaging: true,

                showFooter: true,

                selectedItems: $scope.n,

                totalServerItems: 'totalServerItems',

                pagingOptions: $scope.pagingOptions,

                filterOptions: $scope.filterOptions,

                showFilter: true,

                columnDefs:

                 [

          { field: 'EID', displayName: 'Eid', width: '250px', resizable: true },

          { field: 'NAME', displayName: 'Name', width: '250px' },

       {

           displayName: 'Actions', cellTemplate:

            '<div class="grid-action-cell">' +

            '<a ng-click="Edit(row.entity);" >Edit</a>' + ' | ' +

            '<a ng-click="Del(row.entity);" >Delete</a>' +

            '</div>'

       }

                 ],

            };

        } fill();

        m = $http({

            url: 'http://localhost:50311/api/Values',

            method:'Get'

        });

        m.then(function (d) {

            $scope.listc = d.data;

        });

        $scope.fillddl = function ()

        {

            fd($scope.EMP.CNAME);

        }

        function fd(s)

        {

            m = $http({

                url: 'http://localhost:50311/api/Values/Gets?CNAME='+s,

                method: 'Get'

            });

            m.then(function (d) {

                $scope.lists = d.data;

            });

        }

        $scope.save = function ()

        {

            m = $http({

                url: 'http://localhost:50311/api/Values/Post',

                method: 'Post',

                data:$scope.EMP

            });

            m.then(function (d) {

                alert(d.data);

                clr();

                fill();

            });

        }

        $scope.update = function () {

            m = $http({

                url: 'http://localhost:50311/api/Values/Put',

                method: 'Put',

                data: $scope.EMP

            });

            m.then(function (d) {

                alert(d.data);

                clr();

                fill();

            });

        }

        $scope.Edit = function (s)

        {

            m = $http({

                url: 'http://localhost:50311/api/Values/GetById?EID='+s.EID+'&j='+2,

                method: 'Get',

               

            });

            m.then(function (d) {

                fd(d.data.CNAME);

                $scope.EMP=d.data;

            });

        }

        $scope.reset = function ()

        {

            clr();

        }

        $scope.delall = function ()

        {

            if (confirm('Do you want to delete it ?'))

            {

                angular.forEach($scope.n, function (i, j) {

                    k = k + 'lst=' + i.EID + '&';

                });

                k = k.substring(0, k.lastIndexOf('&'));

                m = $http({

                    url: 'http://localhost:50311/api/Values/Mdelete?' + k,

                    method: 'Delete'

                });

                m.then(function (d) {

                    alert(d.data);

                    fill();

                });

            }

        }

        $scope.Del = function (s)

        {

            if (confirm('Do you want to delete it ?')) {

                m = $http({

                    url: 'http://localhost:50311/api/Values/Delete',

                    method: 'Patch',

                    data: s

                });

                m.then(function (d) {

                    alert(d.data);

                    fill();

                });

            }

        }

        

    });

    function emp()

    {

        return {

            EID: null,

            NAME: null,

            ADDRESS: null,

            PASSWORD: null,

            GENDER: null,

            ISMARRIED:true,

            CNAME: null,

            SNAME:null

        }

    }

</script>

<style type="text/css">

    .gridStyle {

        border: 1px solid rgb(212,212,212);

        width: 900px;

        height: 300px;

    }

</style>

Multiselect dropdown with checkbox in angularjs

Controller Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication29.Models;


namespace WebApplication29.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Get()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);
            }
        }
        [HttpPost]
        public JsonResult Post(int[] lst)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.Where(m=>lst.Contains(m.EID)).ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }
}


View Code :


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Script/jquery-1.10.2.js"></script>
<script src="~/Script/angular.js"></script>
<script src="~/Script/angularjs-dropdown-multiselect.js"></script>
<script src="~/Script/lodash.js"></script>
<div class="container" ng-app="app" ng-controller="ctrl">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-4">Select Employees</label>
            <div ng-dropdown-multiselect="" extra-settings="extra" options="lst" selected-model="slst" checkboxes="true">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
                <input type="button" value="Press Me" ng-click="save()" />
            </div>
         
        </div>
     
    </form>
</div>



<script type="text/javascript">
    angular.module("app", ['angularjs-dropdown-multiselect']).controller("ctrl", function ($scope, $http) {
        var m;
        $scope.lst = [];
        $scope.slst = [];
        $scope.extra = {
            scrollableHeight: '200px',
            scrollable: true,
        };
        m = $http({
            url: "/Home/Get",
            method:'Get'
        });
        m.then(function (d) {
            for (var i = 0; i < d.data.length; i++)
            {
                $scope.lst.push({ id: d.data[i].EID, label: d.data[i].NAME });
            }
        });
        $scope.save = function ()
        {
            var lst=[]
            angular.forEach($scope.slst, function (i, j) {
                lst.push(i.id);
            });
            var data =
                {
                    lst:lst
                }
            m = $http({
                url: "/Home/Post",
                method: 'Post',
                data:JSON.stringify(data)
            });
            m.then(function (d) {
                for (var i = 0; i < d.data.length; i++)
                {
                    alert(d.data[i].EID + ' ' + d.data[i].NAME);
                }
            });
         
        }
     
     
    });
</script>


Press Me
Press Me1

Multiselect dropdown with checkbox in angularjs

Controller Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication29.Models;


namespace WebApplication29.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Get()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);
            }
        }
        [HttpPost]
        public JsonResult Post(int[] lst)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.Where(m=>lst.Contains(m.EID)).ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }
}


View Code :


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Script/jquery-1.10.2.js"></script>
<script src="~/Script/angular.js"></script>
<script src="~/Script/angularjs-dropdown-multiselect.js"></script>
<script src="~/Script/lodash.js"></script>
<div class="container" ng-app="app" ng-controller="ctrl">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-4">Select Employees</label>
            <div ng-dropdown-multiselect="" extra-settings="extra" options="lst" selected-model="slst" checkboxes="true">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
                <input type="button" value="Press Me" ng-click="save()" />
            </div>
         
        </div>
     
    </form>
</div>



<script type="text/javascript">
    angular.module("app", ['angularjs-dropdown-multiselect']).controller("ctrl", function ($scope, $http) {
        var m;
        $scope.lst = [];
        $scope.slst = [];
        $scope.extra = {
            scrollableHeight: '200px',
            scrollable: true,
        };
        m = $http({
            url: "/Home/Get",
            method:'Get'
        });
        m.then(function (d) {
            for (var i = 0; i < d.data.length; i++)
            {
                $scope.lst.push({ id: d.data[i].EID, label: d.data[i].NAME });
            }
        });
        $scope.save = function ()
        {
            var lst=[]
            angular.forEach($scope.slst, function (i, j) {
                lst.push(i.id);
            });
            var data =
                {
                    lst:lst
                }
            m = $http({
                url: "/Home/Post",
                method: 'Post',
                data:JSON.stringify(data)
            });
            m.then(function (d) {
                for (var i = 0; i < d.data.length; i++)
                {
                    alert(d.data[i].EID + ' ' + d.data[i].NAME);
                }
            });
         
        }
     
     
    });
</script>


Press Me
Press Me1

Multiple delete & CURD oration in MVC ,WEB API, & ANGULARJS

Web api Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication26.Models;

namespace WebApplication26.Controllers
{
 
    public class ValuesController : ApiController
    {
        [HttpGet]
        public List<string> Get()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.COUNTRies.Select(m => m.CNAME).ToList();
            }
        }
        [HttpGet]
        public List<string> Gets(string CNAME)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                int CID = obj.COUNTRies.SingleOrDefault(m => m.CNAME == CNAME).CID;
                return obj.STATEs.Where(m=>m.CID==CID).Select(m => m.SNAME).ToList();
            }
        }
        [HttpGet]
        public List<EMP> Gete(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        [HttpGet]
        public EMP GetById(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.SingleOrDefault(m => m.EID == EID);
            }
        }
        [HttpPost]
        public string Post(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.Add(emp);
                obj.SaveChanges();
                return "Data Saved.";
            }
        }
        [HttpPut]
        public string Put(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
                emp1.NAME = emp.NAME;
                emp1.ADDRESS = emp.ADDRESS;
                emp1.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                emp1.PASSWORD = emp.PASSWORD;
                emp1.CNAME = emp.CNAME;
                emp1.SNAME = emp.SNAME;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpPatch]
        public string Delete(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID ==emp.EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
        [HttpDelete]
        public string MDelete([FromUri]int[] lst)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.RemoveRange(obj.EMPs.Where(m => lst.Contains(m.EID)));
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }

    }
}

View code :

@{

    ViewBag.Title = "Index";

}

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/ng-grid.css" rel="stylesheet" />

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

<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/ng-grid.js"></script>

<h2>Jay Jagannath.</h2>

<div class="container" ng-app="app" ng-controller="ctr">

    <form class="form-horizontal">

        <div class="form-group">

            <label class="control-label col-lg-4">EID</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.EID" id="tb" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">NAME</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.NAME" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">ADDRESS</label>

            <div class="col-lg-4">

                <textarea class="form-control" ng-model="EMP.ADDRESS"></textarea>

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">PASSWORD</label>

            <div class="col-lg-4">

                <input type="password" class="form-control" ng-model="EMP.PASSWORD" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">GENDER</label>

            <div class="col-lg-4">

                <input type="radio" value="Male" ng-model="EMP.GENDER" />Male

                <input type="radio" value="Female" ng-model="EMP.GENDER" />Female

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">ARE YOU MARRIED</label>

            <div class="col-lg-4">

                <input type="checkbox" ng-model="EMP.ISMARRIED" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">COUNTRY</label>

            <div class="col-lg-4">

                <select id="ddl" ng-options="c for c in listc" ng-change="fillddl()" class="form-control" ng-model="EMP.CNAME"></select>

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">STATE</label>

            <div class="col-lg-4">

                <select id="ddl1" ng-options="c for c in lists" ng-model="EMP.SNAME" class="form-control"></select>

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4"></label>

            <div class="col-lg-4">

                <input type="button" value="Save" ng-click="save()" class="btn btn-primary" style="width:80px" />

                <input type="button" value="Update" ng-click="update()" class="btn btn-primary" style="width:80px" />

                <input type="button" value="Reset" ng-click="reset()" class="btn btn-primary" style="width:80px" />

                <input type="button" value="DeleteAll" ng-click="da()" class="btn btn-primary" style="width:80px" />

            </div>

        </div>

        <div class="row">

            <table class="table table-bordered table-condensed table-hover table-responsive table-striped">

                <thead class="bg-primary">

                    <tr>

                        <th><input type="checkbox" id="hcb" /></th>

                        <th>EID</th>

                        <th>NAME</th>

                        <th>ACTION</th>

                    </tr>

                </thead>

                <tbody>

                    <tr ng-repeat="c in list">

                        <td><input type="checkbox" value="{{c.EID}}" class="cb" /></td>

                        <td>{{c.EID}}</td>

                        <td>{{c.NAME}}</td>

                        <td>

                            <a ng-click="Edit(c)">Edit</a> |

                            <a ng-click="Del(c)">Delete</a>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </form>

</div>

<script type="text/javascript">

    angular.module("app", []).controller("ctr", function ($scope, $http) {

        var m;

        function clr() {

            $scope.EMP = new emp();

            $('#tb').focus();

        } clr();

        $('#hcb').click(function () {

            if ($(this).is(':checked'))

                $('.cb').prop("checked", true);

            else

                $('.cb').prop("checked", false);

        });

        $scope.reset = function ()

        {

            clr();

        }

        $('body').on("click", '.cb', function () {

            if ($('.cb:checked').length == $('.cb').length)

                $('#hcb').prop("checked", true);

            else

                $('#hcb').prop("checked", false);

        });

        $scope.da = function () {

            var n='';

            if ($('.cb:checked').length == 0) {

                alert('Please select a item from the list.');

                return false;

            }

            else {

                $('.cb:checked').each(function (i, j) {

                    n = n + 'lst=' + $(j).val() + '&';

                });

                n = n.substring(0, n.lastIndexOf('&'));

                if (confirm('Do you want to delete it ?')) {

                    m = $http({

                        url: "http://localhost:51787/api/Values/MDelete?" + n,

                        method: "Delete",

                    });

                    m.then(function (d) {

                        alert(d.data);

                        fill();

                    });

                   

                }

            }

        }

        function fd() {

            m = $http({

                url: 'http://localhost:51787/api/Values',

                method: 'Get'

            });

            m.then(function (d) {

                $scope.listc = d.data;

            });

        } fd();

        $scope.fillddl = function () {

            fd1($('#ddl :selected').text());

        }

        function fd1(s) {

            m = $http({

                url: 'http://localhost:51787/api/Values/Gets?CNAME=' + s,

                method: 'Get'

            });

            m.then(function (d) {

                $scope.lists = d.data;

            });

        }

        $scope.save = function () {

            m = $http({

                url: 'http://localhost:51787/api/Values/Post',

                method: 'Post',

                data: $scope.EMP

            });

            m.then(function (d) {

                alert(d.data);

                clr();

                fill();

            });

        }

        $scope.update = function () {

            m = $http({

                url: 'http://localhost:51787/api/Values/Put',

                method: 'Put',

                data: $scope.EMP

            });

            m.then(function (d) {

                alert(d.data);

                clr();

                fill();

            });

        }

        function fill() {

            m = $http({

                url: 'http://localhost:51787/api/Values/Gete?i=' + 1,

                method: 'Get',

            });

            m.then(function (d) {

                $scope.list = d.data;

            });

        } fill();

        $scope.Edit = function (s) {

            m = $http({

                url: 'http://localhost:51787/api/Values/GetById?EID=' + s.EID,

                method: 'Get',

            });

            m.then(function (d) {

                fd1(d.data.CNAME);

                $scope.EMP = d.data;

            });

        }

        $scope.Del = function (s) {

            if (confirm('Do you want to delete it ?')) {

                m = $http({

                    url: 'http://localhost:51787/api/Values/Delete',

                    method: 'Patch',

                    data:s

                });

                m.then(function (d) {

                    alert(d.data);

                    fill();

                });

            }

        };

    });

    function emp() {

        return {

            EID: null,

            NAME: null,

            ADDRESS: null,

            PASSWORD: null,

            GENDER: null,

            ISMARRIED: true,

            CNAME: null,

            SNAME: null

        }

    }

</script>