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> </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
