ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Populate Table on another Table Edit Button Click using AngularJS in ASP.Net MVC<blockquote><cite>mahesh213 says:</cite> <pre>if (r.Items[i].PTI_Name.toLowerCase() == "allowance") {</pre> </blockquote> <p>There is no need to check the if condition as already checking the condition in the html to show hide the rows.</p> <p>Don't assign same scope value with&nbsp;multiple fields.</p> <blockquote><cite>mahesh213 says:</cite> <div class="line number14 index13 alt1"><code class="html spaces">&nbsp;</code><code class="html plain">$scope.EMI_Name = r.Orders.EMI_Name;</code></div> <div class="line number15 index14 alt2"><code class="html spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="html plain">$scope.EMI_Name = r.Orders.EMI_Id;</code></div> </blockquote> <p>Check this small example and modify as per your required fields.</p> <p>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.</p> <p>Also i have used hardcode value in controller. So change it with your database code.</p> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: /Home/ public ActionResult Index() { return View(); } public JsonResult getPayTypes() { List&lt;PayType&gt; types = new List&lt;PayType&gt;(); types.Add(new PayType { PDI_Id = 5, PDI_ptiId = 1, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;DA&#34; }); types.Add(new PayType { PDI_Id = 6, PDI_ptiId = 1, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;SA&#34; }); types.Add(new PayType { PDI_Id = 7, PDI_ptiId = 1, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;PA&#34; }); types.Add(new PayType { PDI_Id = 8, PDI_ptiId = 1, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;HRA&#34; }); types.Add(new PayType { PDI_Id = 9, PDI_ptiId = 2, PTI_Name = &#34;Deduction&#34;, PDI_Name = &#34;PF&#34; }); types.Add(new PayType { PDI_Id = 10, PDI_ptiId = 2, PTI_Name = &#34;Deduction&#34;, PDI_Name = &#34;ESIC&#34; }); return Json(types, JsonRequestBehavior.AllowGet); } public JsonResult getEmployeepays() { List&lt;employeepay&gt; types = new List&lt;employeepay&gt;(); types.Add(new employeepay { EPI_Id = 1, EPI_EmiId = 5, EMI_Name = &#34;Emp 1&#34;, PTI_Name = &#34;DA&#34;, PDI_Name = &#34;&#34; }); types.Add(new employeepay { EPI_Id = 2, EPI_EmiId = 6, EMI_Name = &#34;Emp 2&#34;, PTI_Name = &#34;SA&#34;, PDI_Name = &#34;&#34; }); types.Add(new employeepay { EPI_Id = 3, EPI_EmiId = 7, EMI_Name = &#34;Emp 3&#34;, PTI_Name = &#34;PA&#34;, PDI_Name = &#34;&#34; }); types.Add(new employeepay { EPI_Id = 4, EPI_EmiId = 8, EMI_Name = &#34;Emp 4&#34;, PTI_Name = &#34;HRA&#34;, PDI_Name = &#34;&#34; }); types.Add(new employeepay { EPI_Id = 5, EPI_EmiId = 9, EMI_Name = &#34;Emp 5&#34;, PTI_Name = &#34;PF&#34;, PDI_Name = &#34;&#34; }); types.Add(new employeepay { EPI_Id = 6, EPI_EmiId = 10, EMI_Name = &#34;Emp 6&#34;, PTI_Name = &#34;ESIC&#34;, PDI_Name = &#34;&#34; }); return Json(types, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult Edit(int? rID) { List&lt;PDV_EPI&gt; listItem = new List&lt;PDV_EPI&gt;(); listItem.Add(new PDV_EPI { EPI_Id = 25, EPI_EmiId = 10030, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;DA&#34;, EPI_PtiId = 5, EPI_PdiId = 1 }); listItem.Add(new PDV_EPI { EPI_Id = 26, EPI_EmiId = 10030, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;SA&#34;, EPI_PtiId = 6, EPI_PdiId = 1 }); listItem.Add(new PDV_EPI { EPI_Id = 27, EPI_EmiId = 10030, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;PA&#34;, EPI_PtiId = 7, EPI_PdiId = 1 }); listItem.Add(new PDV_EPI { EPI_Id = 28, EPI_EmiId = 10030, PTI_Name = &#34;Allowence&#34;, PDI_Name = &#34;HRA&#34;, EPI_PtiId = 8, EPI_PdiId = 1 }); listItem.Add(new PDV_EPI { EPI_Id = 29, EPI_EmiId = 10030, PTI_Name = &#34;Deduction&#34;, PDI_Name = &#34;PF&#34;, EPI_PtiId = 9, EPI_PdiId = 2 }); listItem.Add(new PDV_EPI { EPI_Id = 30, EPI_EmiId = 10030, PTI_Name = &#34;Deduction&#34;, PDI_Name = &#34;ESIC&#34;, EPI_PtiId = 10, EPI_PdiId = 2 }); EmployeeSalaryDetails details = new EmployeeSalaryDetails(); details.Orders = new pdv_emi { EMI_Id = 10030, EMI_Name = &#34;232&#34; }; 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&lt;PDV_EPI&gt; 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; } } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;invoice&#39;, [&#39;angularUtils.directives.dirPagination&#39;]); app.controller(&#39;InvoiceController&#39;, [&#39;$scope&#39;, &#39;$http&#39;, &#39;$window&#39;, &#39;$filter&#39;, &#39;RegistrationService&#39;, function ($scope, $http, $window, $filter, RegistrationService) { loadPaytypes(); loadEmployeepays(); function loadPaytypes() { var EmployeeRecords = RegistrationService.gettaxes(); EmployeeRecords.then(function (d) { $scope.paytypes = d.data; }, function () { alert(&#34;Error occured while fetching employee list...&#34;); }); } function loadEmployeepays() { var Employeepays = RegistrationService.getEmployeepays(); Employeepays.then(function (d) { $scope.employeepays = d.data; }, function () { alert(&#34;Error occured while fetching employee list...&#34;); }); } $scope.Edit = function (EPI_EmiId) { var id = EPI_EmiId; $http({ method: &#39;POST&#39;, url: &#39;/Home/Edit/&#39;, params: { rID: id } }).success(function (r) { $scope.EMI_Name = r.Orders.EMI_Name; $scope.paytypes = []; for (var i = 0; i &lt; 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(&#34;RegistrationService&#34;, function ($http) { this.gettaxes = function () { return $http.get(&#34;/Home/getPayTypes&#34;); }; this.getEmployeepays = function () { return $http.get(&#34;/Home/getEmployeepays&#34;); }; }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;invoice&#34; ng-controller=&#34;InvoiceController&#34;&gt; &lt;div class=&#34;container&#34;&gt; &lt;div id=&#34;table&#34; class=&#34;well&#34;&gt; &lt;h3&gt;Alowence&lt;/h3&gt; &lt;div class=&#34;table-responsive &#34; scroll-bookmark=&#34;bookmark2&#34;&gt; &lt;table id=&#34;tblOrders&#34; cellpadding=&#34;12&#34; class=&#34;table table-bordered table-hover table-striped&#34; style=&#34;margin-left: 20px; margin-right: 20px;&#34;&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th&gt;PayType&lt;/th&gt; &lt;th&gt;Is %&lt;/th&gt; &lt;/tr&gt; &lt;tbody ng-repeat=&#34;detail in paytypes&#34;&gt; &lt;tr ng-if=&#34;detail.PTI_Name==&#39;Allowence&#39;&#34;&gt; &lt;td&gt; &lt;input type=&#34;hidden&#34; ng-model=&#34;detail.PDI_Id&#34; /&gt; &lt;input type=&#34;hidden&#34; ng-model=&#34;detail.PDI_ptiId&#34; /&gt; &lt;input type=&#34;text&#34; ng-model=&#34;detail.PDI_Name&#34; /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type=&#34;checkbox&#34; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;table&#34; class=&#34;well&#34;&gt; &lt;h3&gt;Deduction&lt;/h3&gt; &lt;div class=&#34;table-responsive &#34; scroll-bookmark=&#34;bookmark2&#34;&gt; &lt;table id=&#34;tblOrders&#34; cellpadding=&#34;12&#34; class=&#34;table table-bordered table-hover table-striped&#34; style=&#34;margin-left: 20px; margin-right: 20px;&#34;&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th&gt;PayType&lt;/th&gt; &lt;th&gt;Is %&lt;/th&gt; &lt;/tr&gt; &lt;tbody ng-repeat=&#34;detail in paytypes&#34;&gt; &lt;tr ng-if=&#34;detail.PTI_Name==&#39;Deduction&#39;&#34;&gt; &lt;td&gt; &lt;input type=&#34;hidden&#34; ng-model=&#34;detail.PDI_Id&#34; /&gt; &lt;input type=&#34;hidden&#34; ng-model=&#34;detail.PDI_ptiId&#34; /&gt; &lt;input type=&#34;text&#34; ng-model=&#34;detail.PDI_Name&#34; /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type=&#34;text&#34; class=&#34;form-control&#34; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;dvContainer&#34;&gt; &lt;div&gt; &lt;div class=&#34;table-responsive &#34; style=&#34;overflow-x: auto;&#34;&gt; &lt;table id=&#34;dvData&#34; cellpadding=&#34;12&#34; class=&#34;table table-bordered table-hover table-striped&#34; style=&#34;margin-left: 20px; margin-right: 20px;&#34;&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th style=&#34;cursor: pointer;&#34; ng-click=&#34;sort(&#39;EMI_Name&#39;)&#34;&gt; &lt;b&gt;Employee Name&lt;/b&gt; &lt;span class=&#34;glyphicon sort-icon&#34; ng-show=&#34;sortKey==&#39;EMI_Name&#39;&#34; ng-class=&#34;{&#39;glyphicon-chevron-up&#39;:reverse,&#39;glyphicon-chevron-down&#39;:!reverse}&#34;&gt; &lt;/span&gt; &lt;/th&gt; &lt;th style=&#34;cursor: pointer;&#34; ng-click=&#34;sort(&#39;PTI_Name&#39;)&#34;&gt; &lt;b&gt;Party Type&lt;/b&gt; &lt;span class=&#34;glyphicon sort-icon&#34; ng-show=&#34;sortKey==&#39;PTI_Name&#39;&#34; ng-class=&#34;{&#39;glyphicon-chevron-up&#39;:reverse,&#39;glyphicon-chevron-down&#39;:!reverse}&#34;&gt; &lt;/span&gt; &lt;/th&gt; &lt;th style=&#34;cursor: pointer;&#34; ng-click=&#34;sort(&#39;PDI_Name&#39;)&#34;&gt; &lt;b&gt;Allow Deduction&lt;/b&gt; &lt;span class=&#34;glyphicon sort-icon&#34; ng-show=&#34;sortKey==&#39;PDI_Name&#39;&#34; ng-class=&#34;{&#39;glyphicon-chevron-up&#39;:reverse,&#39;glyphicon-chevron-down&#39;:!reverse}&#34;&gt; &lt;/span&gt; &lt;/th&gt; &lt;th&gt;&lt;b&gt;Actions&lt;/b&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr dir-paginate=&#34;employeepay in employeepays|orderBy:sortKey:reverse|filter:search|itemsPerPage:10&#34; ng-model=&#34;search&#34;&gt; &lt;td&gt; &lt;input type=&#34;hidden&#34; ng-model=&#34;employeepay.EPI_Id&#34; /&gt; &lt;input type=&#34;hidden&#34; ng-model=&#34;employeepay.EPI_EmiId&#34; /&gt; {{employeepay.EMI_Name}} &lt;/td&gt; &lt;td&gt;{{employeepay.PTI_Name }}&lt;/td&gt; &lt;td&gt;{{employeepay.PDI_Name }}&lt;/td&gt; &lt;td&gt;&lt;a scroll-to-bookmark=&#34;bookmark&#34; ng-click=&#34;Edit(employeepay.EPI_EmiId)&#34; href=&#34;&#34;&gt;Edit&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/yogrSrE.gif" alt="" width="416" height="381" /></span></strong></p>https://www.aspforums.net:443/Threads/180786/Populate-Table-on-another-Table-Edit-Button-Click-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/180786/Populate-Table-on-another-Table-Edit-Button-Click-using-AngularJS-in-ASPNet-MVC/Fri, 05 Jul 2019 04:00:43 GMT