Set CheckBox checked (selected) based on column value on Button Click using AngularJS in ASP.Net MVC

Last Reply 3 months ago By dharmendr

Posted 3 months ago

 Hi,

I have 2 tables with relevant data

Tax

Id    Name

1       CGST

2       SGST

3       IGST

Employee

EId       CId     Name

1         1,3       aaaa

2        2.3        bbbb

currently my requirement is that after clikcing of edit button display all taxes values on taxes popup by default and check relevant taxes values based upon CId 

@{
    Layout = null;
}

<html>
<head>
    <title></title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope,$http, $window) {
            $scope.Customers = [];
            GetTaxes();
            GetEmployees();
            function GetTaxes() {
                $scope.taxes = [];
                $http({
                    method: 'Get',
                    url: '/employee/taxes',
                }).success(function (data, status, headers, config) {
                    $scope.taxes = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
            function GetEmployees() {
                $scope.employees = [];
                $http({
                    method: 'Get',
                    url: '/employee/GetAll',
                }).success(function (data, status, headers, config) {
                    $scope.employees = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
            //Edit code for Slab Details
            $scope.Edit = function (EId) {
                  var id = EId;
                $.post("/employee/Edit/", { eId: id }, function (r) {
                       $scope.myData = [];
                    for (var i = 0; i < r.SlabDetails.length; i++) {
                        var slab = {};
                        slab.EId = r.SlabDetails[i].EId;
                        slab.CId = r.SlabDetails[i].CId;                       
                        $scope.myData.push(slab);
                    }

                    $scope.$apply();
                });
            }

        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>CId</th>
                <th>Orders</th>
                <th>&nbsp;</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><input type="text" value="{{m.CId}}" /></td>
                    <td value="{{m.taxes}}">
                        <button type="button" ng-init="clicked=false" ng-click="clicked=!clicked">
                            View
                        </button>
                        <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" ng-click="clicked=false">
                                            ×
                                        </button>
                                        <h4 style="margin-left: 15px; text-align:center;">Tax Details</h4>
                                    </div>
                                    <div class="modal-body">
                                        <fieldset>
                                            <!-- Form Name -->
                                            <label style="margin-left: 25px;" ng-repeat="o in m.taxes" class="checkbox">
                                                <input type="hidden" ng-model="o.Id" />
                                                <input type="checkbox" name="subject" ng-checked="{{o.Selected}}" ng-model="o.Selected" />{{o.Name}}
                                            </label>
                                        </fieldset>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" ng-click="clicked=false;GetChecked1();">
                                            Ok
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>          
        </table>
        <div>
            <table class="table table-bordered table-hover table-striped" >
                <tr>
                    <th>CId</th>
                    <th>EId</th>
                    <th>&nbsp;</th>
                </tr>
                <tbody ng-repeat="e in employees">
                    <tr>
                        <td>{{e.EId}}</td>
                        <td>{{e.CId}}</td>
                        <td><a  ng-click="Edit(e.EId)" href="">Edit</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

 

        [HttpPost]
        public JsonResult Edit(int? eId)
        {
        
            List<Employee> employee = new List<Employee>();
            var emps = (from i in db.Employee
                         where i.EId == eId
                         select new
                         {
                             EId = i.EId,
                             CId = i.CId,
                         }).ToList();
            foreach (var emp in emps)
            {
                employee.Add(new Employee { EId = emp.EId, CId = emp.CId });
            }

            slabs details = new slabs();          
            details.SlabDetails = employee;
            return Json(details, JsonRequestBehavior.AllowGet);
        }

I have not bind taxes values need to display all taxes on popup and check taxes values based upon CId and remanin should be unchecked

could you please help me

Posted 3 months ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetAll()
    {
        List<Employee> emps = EmployeesList();
        return Json(emps, JsonRequestBehavior.AllowGet);
    }

    public JsonResult taxes()
    {
        List<Tax> taxs = TaxList();
        return Json(taxs, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Edit(int? eId)
    {
        List<Employee> employee = new List<Employee>();
        foreach (var emp in EmployeesList().Where(x => x.EId == eId))
        {
            employee.Add(new Employee { EId = emp.EId, CId = emp.CId });
        }

        slabs details = new slabs();
        details.SlabDetails = employee;
        return Json(details, JsonRequestBehavior.AllowGet);
    }

    private List<Employee> EmployeesList()
    {
        List<Employee> emps = new List<Employee>();
        emps.Add(new Employee { EId = 1, CId = "1,2", Name = "aaaa" });
        emps.Add(new Employee { EId = 2, CId = "2,3", Name = "bbbb" });
        return emps;
    }

    private List<Tax> TaxList()
    {
        List<Tax> taxs = new List<Tax>();
        taxs.Add(new Tax { Id = 1, Name = "CGST", Selected = false });
        taxs.Add(new Tax { Id = 2, Name = "SGST", Selected = false });
        taxs.Add(new Tax { Id = 3, Name = "IGST", Selected = true });
        return taxs;
    }

    public class slabs
    {
        public List<Employee> SlabDetails { get; set; }
    }

    public class Employee
    {
        public int EId { get; set; }
        public string CId { get; set; }
        public string Name { get; set; }
    }

    public class Tax
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool Selected { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            GetTaxes();
            GetEmployees();
            function GetTaxes() {
                $scope.taxes = [];
                $http({
                    method: 'Get',
                    url: '/Home/taxes'
                }).success(function (data, status, headers, config) {
                    $scope.taxes = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
            function GetEmployees() {
                $scope.employees = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetAll'
                }).success(function (data, status, headers, config) {
                    $scope.employees = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
            //Edit code for Slab Details
            $scope.Edit = function (EId) {
                var id = EId;
                $.post("/Home/Edit/", { eId: id }, function (r) {
                    $scope.Customers = [];
                    for (var i = 0; i < r.SlabDetails.length; i++) {
                        var slab = {};
                        slab.EId = r.SlabDetails[i].EId;
                        slab.CId = r.SlabDetails[i].CId;
                        $scope.Customers.push(slab);
                    }
                    $scope.$apply();
                });
            }

            $scope.SetChecked = function (cid) {
                for (var i = 0; i < $scope.taxes.length; i++) {
                    $scope.taxes[i].Selected = false;
                    for (var j = 0; j < cid.split(',').length; j++) {
                        if (cid.split(',')[j] == $scope.taxes[i].Id) {
                            $scope.taxes[i].Selected = true;
                        }
                    }
                }
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-bordered table-hover table-striped" ng-show="Customers">
            <tr>
                <th>CId</th>
                <th>Orders</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><input type="text" value="{{m.CId}}" /></td>
                    <td>
                        <button type="button" ng-init="clicked=false" ng-click="clicked=!clicked;SetChecked(m.CId)">View</button>
                        <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" ng-click="clicked=false">×</button>
                                        <h4 style="margin-left: 15px; text-align: center;">Tax Details</h4>
                                    </div>
                                    <div class="modal-body">
                                        <fieldset>
                                            <!-- Form Name -->
                                            <label style="margin-left: 25px;" ng-repeat="o in taxes" class="checkbox">
                                                <input type="hidden" ng-model="o.Id" />
                                                <input type="checkbox" name="subject" ng-checked="{{o.Selected}}" ng-model="o.Selected" />{{o.Name}}
                                            </label>
                                        </fieldset>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" ng-click="clicked=false;">Ok</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <table class="table table-bordered table-hover table-striped">
                <tr>
                    <th>CId</th>
                    <th>EId</th>
                    <th>&nbsp;</th>
                </tr>
                <tbody ng-repeat="e in employees">
                    <tr>
                        <td>{{e.EId}}</td>
                        <td>{{e.CId}}</td>
                        <td><a ng-click="Edit(e.EId)" href="">Edit</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Screenshot