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

Last Reply 11 days ago By dharmendr

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

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