Saturday, 23 July 2016

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

No comments:

Post a Comment