Populate Table on another Table Edit Button Click using AngularJS in ASP.Net MVC

Last Reply 4 months ago By dharmendr

Posted 4 months ago

Hi,

I have 4 tables on database

MA_EMI

EMI_Id EMI_Name

1 mahesh 

MA_PTI

PTI_Id PTI_Name

1 Allowence

2 Deduction

MA_PDI

PDI_Id   PDI_ptiId         PDI_Name  

5               1                   DA

6                1                   SA

7                1                    PA

8               1                   HRA

9                  2                   PF

10               2                     ESIC

MA_EPI

EPI_Id   EPI_PdiId     EPI_PtiId   EPI_EmiId    

 1             5                 1             1

2               6                 1             1

3               7                  1              1

4               8                  1               1

5                9                  2                  1  

6                  10             2                  1

 

after clicking of edit button in grid view i need to display records on form based upon EPI_EmiId in MA_EPI table

my requirement is that after clicking of edit button based upon  EPI_EmiId display relevant records on 2 grid views(based upon allownce/deduction)

I am not getting any values on after clciking of edit button

You are viewing reply posted by: dharmendr 4 months ago.
Posted 4 months ago
mahesh213 says:
if (r.Items[i].PTI_Name.toLowerCase() == "allowance") {

There is no need to check the if condition as already checking the condition in the html to show hide the rows.

Don't assign same scope value with multiple fields.

mahesh213 says:
 $scope.EMI_Name = r.Orders.EMI_Name;
        $scope.EMI_Name = r.Orders.EMI_Id;

Check this small example and modify as per your required fields.

For this example i have taken only required no of properties for displaying. You need to add more as per your requirement and assign values to it.

Also i have used hardcode value in controller. So change it with your database code.

Controller

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

    public JsonResult getPayTypes()
    {
        List<PayType> types = new List<PayType>();
        types.Add(new PayType { PDI_Id = 5, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "DA" });
        types.Add(new PayType { PDI_Id = 6, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "SA" });
        types.Add(new PayType { PDI_Id = 7, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "PA" });
        types.Add(new PayType { PDI_Id = 8, PDI_ptiId = 1, PTI_Name = "Allowence", PDI_Name = "HRA" });
        types.Add(new PayType { PDI_Id = 9, PDI_ptiId = 2, PTI_Name = "Deduction", PDI_Name = "PF" });
        types.Add(new PayType { PDI_Id = 10, PDI_ptiId = 2, PTI_Name = "Deduction", PDI_Name = "ESIC" });
        return Json(types, JsonRequestBehavior.AllowGet);
    }

    public JsonResult getEmployeepays()
    {
        List<employeepay> types = new List<employeepay>();
        types.Add(new employeepay { EPI_Id = 1, EPI_EmiId = 5, EMI_Name = "Emp 1", PTI_Name = "DA", PDI_Name = "" });
        types.Add(new employeepay { EPI_Id = 2, EPI_EmiId = 6, EMI_Name = "Emp 2", PTI_Name = "SA", PDI_Name = "" });
        types.Add(new employeepay { EPI_Id = 3, EPI_EmiId = 7, EMI_Name = "Emp 3", PTI_Name = "PA", PDI_Name = "" });
        types.Add(new employeepay { EPI_Id = 4, EPI_EmiId = 8, EMI_Name = "Emp 4", PTI_Name = "HRA", PDI_Name = "" });
        types.Add(new employeepay { EPI_Id = 5, EPI_EmiId = 9, EMI_Name = "Emp 5", PTI_Name = "PF", PDI_Name = "" });
        types.Add(new employeepay { EPI_Id = 6, EPI_EmiId = 10, EMI_Name = "Emp 6", PTI_Name = "ESIC", PDI_Name = "" });

        return Json(types, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Edit(int? rID)
    {
        List<PDV_EPI> listItem = new List<PDV_EPI>();
        listItem.Add(new PDV_EPI { EPI_Id = 25, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "DA", EPI_PtiId = 5, EPI_PdiId = 1 });
        listItem.Add(new PDV_EPI { EPI_Id = 26, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "SA", EPI_PtiId = 6, EPI_PdiId = 1 });
        listItem.Add(new PDV_EPI { EPI_Id = 27, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "PA", EPI_PtiId = 7, EPI_PdiId = 1 });
        listItem.Add(new PDV_EPI { EPI_Id = 28, EPI_EmiId = 10030, PTI_Name = "Allowence", PDI_Name = "HRA", EPI_PtiId = 8, EPI_PdiId = 1 });
        listItem.Add(new PDV_EPI { EPI_Id = 29, EPI_EmiId = 10030, PTI_Name = "Deduction", PDI_Name = "PF", EPI_PtiId = 9, EPI_PdiId = 2 });
        listItem.Add(new PDV_EPI { EPI_Id = 30, EPI_EmiId = 10030, PTI_Name = "Deduction", PDI_Name = "ESIC", EPI_PtiId = 10, EPI_PdiId = 2 });

        EmployeeSalaryDetails details = new EmployeeSalaryDetails();
        details.Orders = new pdv_emi { EMI_Id = 10030, EMI_Name = "232" };
        details.Items = listItem;
        return Json(details, JsonRequestBehavior.AllowGet);
    }

    public class PayType
    {
        public int PDI_Id { get; set; }
        public int PDI_ptiId { get; set; }
        public string PDI_Name { get; set; }
        public string PTI_Name { get; set; }
    }
    public class employeepay
    {
        public int EPI_Id { get; set; }
        public int EPI_EmiId { get; set; }
        public string EMI_Name { get; set; }
        public string PTI_Name { get; set; }
        public string PDI_Name { get; set; }
    }
    public class EmployeeSalaryDetails
    {
        public pdv_emi Orders { get; set; }
        public List<PDV_EPI> Items { get; set; }
    }
    public class pdv_emi
    {
        public int EMI_Id { get; set; }
        public string EMI_Name { get; set; }
    }
    public class PDV_EPI
    {
        public int EPI_Id { get; set; }
        public int EPI_EmiId { get; set; }
        public string PTI_Name { get; set; }
        public string PDI_Name { get; set; }
        public int EPI_PtiId { get; set; }
        public int EPI_PdiId { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <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://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('invoice', ['angularUtils.directives.dirPagination']);
        app.controller('InvoiceController', ['$scope', '$http', '$window', '$filter', 'RegistrationService',
        function ($scope, $http, $window, $filter, RegistrationService) {
            loadPaytypes();
            loadEmployeepays();
            function loadPaytypes() {
                var EmployeeRecords = RegistrationService.gettaxes();
                EmployeeRecords.then(function (d) {
                    $scope.paytypes = d.data;
                }, function () {
                    alert("Error occured while fetching employee list...");
                });
            }

            function loadEmployeepays() {
                var Employeepays = RegistrationService.getEmployeepays();
                Employeepays.then(function (d) {
                    $scope.employeepays = d.data;
                }, function () {
                    alert("Error occured while fetching employee list...");
                });
            }

            $scope.Edit = function (EPI_EmiId) {
                var id = EPI_EmiId;
                $http({
                    method: 'POST',
                    url: '/Home/Edit/',
                    params: { rID: id }
                }).success(function (r) {
                    $scope.EMI_Name = r.Orders.EMI_Name;
                    $scope.paytypes = [];
                    for (var i = 0; i < r.Items.length; i++) {
                        var customer = {};
                        var itemId = r.Items[i].EPI_EmiId;
                        customer.PDI_Id = r.Items[i].EPI_PdiId;
                        customer.PDI_ptiId = r.Items[i].EPI_PtiId;
                        customer.PDI_Name = r.Items[i].PDI_Name;
                        customer.PTI_Name = r.Items[i].PTI_Name;
                        $scope.paytypes.push(customer);
                    }
                });
            }
        } ]);

        app.service("RegistrationService", function ($http) {
            this.gettaxes = function () {
                return $http.get("/Home/getPayTypes");
            };
            this.getEmployeepays = function () {
                return $http.get("/Home/getEmployeepays");
            };
        });
    </script>
</head>
<body ng-app="invoice" ng-controller="InvoiceController">
    <div class="container">
        <div id="table" class="well">
            <h3>Alowence</h3>
            <div class="table-responsive " scroll-bookmark="bookmark2">
                <table id="tblOrders" cellpadding="12" class="table table-bordered table-hover table-striped"
                    style="margin-left: 20px; margin-right: 20px;">
                    <tr class="success">
                        <th>PayType</th>
                        <th>Is %</th>
                    </tr>
                    <tbody ng-repeat="detail in paytypes">
                        <tr ng-if="detail.PTI_Name=='Allowence'">
                            <td>
                                <input type="hidden" ng-model="detail.PDI_Id" />
                                <input type="hidden" ng-model="detail.PDI_ptiId" />
                                <input type="text" ng-model="detail.PDI_Name" />
                            </td>
                            <td><input type="checkbox" /></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="table" class="well">
            <h3>Deduction</h3>
            <div class="table-responsive " scroll-bookmark="bookmark2">
                <table id="tblOrders" cellpadding="12" class="table table-bordered table-hover table-striped"
                    style="margin-left: 20px; margin-right: 20px;">
                    <tr class="success">
                        <th>PayType</th>
                        <th>Is %</th>
                    </tr>
                    <tbody ng-repeat="detail in paytypes">
                        <tr ng-if="detail.PTI_Name=='Deduction'">
                            <td>
                                <input type="hidden" ng-model="detail.PDI_Id" />
                                <input type="hidden" ng-model="detail.PDI_ptiId" />
                                <input type="text" ng-model="detail.PDI_Name" />
                            </td>
                            <td><input type="text" class="form-control" /></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="dvContainer">
            <div>
                <div class="table-responsive " style="overflow-x: auto;">
                    <table id="dvData" cellpadding="12" class="table table-bordered table-hover table-striped"
                        style="margin-left: 20px; margin-right: 20px;">
                        <tr class="success">
                            <th style="cursor: pointer;" ng-click="sort('EMI_Name')">
                                <b>Employee Name</b> <span class="glyphicon sort-icon" ng-show="sortKey=='EMI_Name'"
                                    ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                                </span>
                            </th>
                            <th style="cursor: pointer;" ng-click="sort('PTI_Name')">
                                <b>Party Type</b> <span class="glyphicon sort-icon" ng-show="sortKey=='PTI_Name'"
                                    ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                                </span>
                            </th>
                            <th style="cursor: pointer;" ng-click="sort('PDI_Name')">
                                <b>Allow Deduction</b> <span class="glyphicon sort-icon" ng-show="sortKey=='PDI_Name'"
                                    ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                                </span>
                            </th>
                            <th><b>Actions</b></th>
                        </tr>
                        <tr dir-paginate="employeepay in employeepays|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
                            ng-model="search">
                            <td>
                                <input type="hidden" ng-model="employeepay.EPI_Id" />
                                <input type="hidden" ng-model="employeepay.EPI_EmiId" />
                                {{employeepay.EMI_Name}}
                            </td>
                            <td>{{employeepay.PTI_Name }}</td>
                            <td>{{employeepay.PDI_Name }}</td>
                            <td><a scroll-to-bookmark="bookmark" ng-click="Edit(employeepay.EPI_EmiId)" href="">Edit</a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot