Assign checked (selected) CheckBox value to TextBox using AngularJS in ASP.Net MVC

Last Reply 12 days ago By dharmendr

Posted 12 days ago

Hi,

If i have checked any element need to display that Id on textbox like that i am doing for n no of rows

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

could you please help me

Posted 12 days ago

Hi mahesh213,

Check the below 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, $filter) {
            GetTaxes();
            GetEmployees();
            $scope.employee = {};
            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 (id) {
                $scope.employee = $filter('filter')($scope.employees, { EId: id })[0];
                $.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;
                        }
                    }
                }
            }

            $scope.GetChecked = function () {
                $scope.UpdatedCheckBox = "";
                for (var i = 0; i < $scope.taxes.length; i++) {
                    if ($scope.taxes[i].Selected) {
                        $scope.UpdatedCheckBox += $scope.taxes[i].Id + ",";
                    }
                }
                $scope.Customers[0].CId = $scope.UpdatedCheckBox.slice(0, -1);
            }
        });
    </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" ng-model="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-model="o.Selected" ng-change="GetChecked()" />{{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