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.Filter HTML Table based on DropDownList on Button Click using AngularJS in ASP.Net MVC<p>Hi <a class="username" rel="mahesh213"> mahesh213</a>,</p> <p>Check this example. Now please take its reference and correct your 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 GetReport() { List&lt;Item&gt; items = new List&lt;Item&gt;(); items.Add(new Item { Id = 1, Name = &#34;aaa&#34; }); items.Add(new Item { Id = 2, Name = &#34;bbb&#34; }); items.Add(new Item { Id = 3, Name = &#34;ccc&#34; });); var JsonResult = Json(items, JsonRequestBehavior.AllowGet); return JsonResult; } [HttpPost] public JsonResult getAll(int Id) { List&lt;Report&gt; reportList = null; if (Id &gt; 0) { reportList = GetAllReports().Where(x =&gt; x.Id == Id).ToList(); } else { reportList = GetAllReports(); } var JsonResult = Json(reportList, JsonRequestBehavior.AllowGet); return JsonResult; } public List&lt;Report&gt; GetAllReports() { List&lt;Report&gt; reports = new List&lt;Report&gt;(); reports.Add(new Report { RId = 1, Id = 1, Item = &#34;Item1&#34; }); reports.Add(new Report { RId = 2, Id = 1, Item = &#34;Item2&#34; }); reports.Add(new Report { RId = 3, Id = 2, Item = &#34;Item3&#34; }); return reports; } public class Item { public int Id { get; set; } public string Name { get; set; } } public class Report { public int RId { get; set; } public int Id { get; set; } public string Item { get; set; } } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /&gt; &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var app = angular.module('MyApp', []); app.controller('MyController', ['$scope', '$http', function ($scope, $http, $window) { GetItems(); function GetItems() { $scope.Items = []; $http({ method: 'Get', url: '/Home/GetReport/' }).success(function (data, status, headers, config) { $scope.Items = data; // Adding All option. $scope.Items.splice(0, 0, { Id: 0, Name: 'All' }); }).error(function (data, status, headers, config) { $scope.message = 'Unexpected Error'; }); } $scope.IsVisible = false; $scope.GetAllItems = function () { if ($scope.Item != undefined) { var Id1 = $scope.Item; $http({ method: 'POST', url: '/Home/getAll/', params: { Id: Id1 } }).success(function (data, status, headers, config) { if (data.length &gt; 0) { $scope.items = data; $scope.IsVisible = true; } else { $scope.items = []; $scope.IsVisible = false; } }).error(function (data, status, headers, config) { $scope.items = 'Unexpected Error'; }); } else { $scope.items = []; $scope.IsVisible = false; } } } ]); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app="MyApp" ng-controller="MyController"&gt; &lt;div class="form-horizontal"&gt; &lt;div class="form-group"&gt; &lt;label for="ID" class="control-label col-xs-2"&gt; Item&lt;/label&gt; &lt;div class="col-md-2"&gt; &lt;select style="display: inline" data-ng-model="Item" class="form-control" data-ng-options="p.Id as p.Name for p in Items"&gt; &lt;option value=""&gt;-- Select Item --&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()"&gt; &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;Submit &lt;/button&gt; &lt;/div&gt; &lt;div class="container" ng-show="IsVisible" id="printarea"&gt; &lt;table class="table table-bordered"&gt; &lt;tr class="success"&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Item&lt;/th&gt; &lt;/tr&gt; &lt;tr ng-repeat="item in items"&gt; &lt;td&gt;{{item.Id}}&lt;/td&gt; &lt;td&gt;{{item.Item}}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/A86Cb09.gif" alt="" width="243" height="274" /></p>https://www.aspforums.net:443/Threads/630642/Filter-HTML-Table-based-on-DropDownList-on-Button-Click-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/630642/Filter-HTML-Table-based-on-DropDownList-on-Button-Click-using-AngularJS-in-ASPNet-MVC/Tue, 13 Aug 2019 07:16:55 GMT