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

Last Reply 2 months ago By dharmendr

Posted 2 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

You are viewing reply posted by: dharmendr 2 months ago.
Posted 2 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