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 (Search) Data with DropDownList 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;">Database</span></strong></p> <p>For this example I have used of Northwind database that you can download using the link given below.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx" target="_blank">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">Model</span></strong></p> <pre class="brush: csharp">public class CustomerModel { public List&lt;Customer&gt; Customers { get; set; } public int TotalRecords { get; set; } }</pre> <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 GetCountries() { NorthwindEntities entities = new NorthwindEntities(); List&lt;SelectListItem&gt; countries = entities.Customers.Where(x =&gt; x.Country != null) .Select(x =&gt; new SelectListItem { Text = x.Country, Value = x.Country }).Distinct().ToList(); return Json(countries, JsonRequestBehavior.AllowGet); } public JsonResult GetCustomers(int PageNo, int PageSize, string searchTerm, string sortDirection, string sortColumn) { NorthwindEntities entities = new NorthwindEntities(); List&lt;Customer&gt; customers = new List&lt;Customer&gt;(); if (!string.IsNullOrEmpty(searchTerm)) { customers = entities.Customers.Where(x =&gt; x.Country.Equals(searchTerm)).ToList(); } else { customers = entities.Customers.ToList(); } switch (sortColumn) { case &#34;CustomerID&#34;: if (sortDirection == &#34;ASC&#34;) { customers = customers.OrderBy(x =&gt; x.CustomerID).ToList(); } else { customers = customers.OrderByDescending(x =&gt; x.CustomerID).ToList(); } break; case &#34;ContactName&#34;: if (sortDirection == &#34;ASC&#34;) { customers = customers.OrderBy(x =&gt; x.ContactName).ToList(); } else { customers = customers.OrderByDescending(x =&gt; x.ContactName).ToList(); } break; case &#34;City&#34;: if (sortDirection == &#34;ASC&#34;) { customers = customers.OrderBy(x =&gt; x.City).ToList(); } else { customers = customers.OrderByDescending(x =&gt; x.City).ToList(); } break; case &#34;Country&#34;: if (sortDirection == &#34;ASC&#34;) { customers = customers.OrderBy(x =&gt; x.Country).ToList(); } else { customers = customers.OrderByDescending(x =&gt; x.Country).ToList(); } break; } CustomerModel model = new CustomerModel(); model.Customers = customers.Skip((PageNo - 1) * PageSize).Take(PageSize).ToList(); model.TotalRecords = customers.Count(); ; return Json(model, JsonRequestBehavior.AllowGet); } }</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&gt; &lt;title&gt;Index&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; /*Displays UP arrow*/ .arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid black; display: inline-block; } /*Displays DOWN arrow*/ .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid black; display: inline-block; } &lt;/style&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.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;MyApp&#39;, [&#39;angularUtils.directives.dirPagination&#39;]); app.controller(&#39;MyController&#39;, [&#39;$scope&#39;, &#39;$http&#39;, &#39;$window&#39;, function ($scope, $http, $window) { $http({ method: &#39;Get&#39;, url: &#39;/Home/GetCountries/&#39; }) .success(function (response) { $scope.Countries = response; }); $scope.Customers = []; $scope.PageIndex = 1; $scope.RecordCount = 0; $scope.PageSize = 5; $scope.SearchTerm = &#34;&#34;; $scope.SortColumn = &#34;CustomerID&#34;; $scope.ReverseSort = false; $scope.SortDirection = &#34;ASC&#34;; $scope.GetCustomers = function (index) { PopulateCustomer(index); } function PopulateCustomer(index) { $scope.PageIndex = index; $scope.Customers = []; $http.get(&#34;/Home/GetCustomers/&#34;, { params: { PageNo: $scope.PageIndex, PageSize: $scope.PageSize, searchTerm: $scope.searchTerm, sortDirection: $scope.SortDirection, sortColumn: $scope.SortColumn } }).then(function (response) { $scope.Customers = response.data.Customers; $scope.RecordCount = response.data.TotalRecords; }).then(function (response) { }); } $scope.GetCustomers($scope.PageIndex); $scope.SortData = function (column) { $scope.ReverseSort = ($scope.SortColumn == column) ? !$scope.ReverseSort : false; $scope.SortDirection = $scope.ReverseSort ? &#34;DESC&#34; : &#34;ASC&#34;; $scope.SortColumn = column; $scope.GetCustomers($scope.PageIndex); } $scope.GetSortClass = function (column) { if ($scope.SortColumn == column) { return $scope.ReverseSort ? &#39;arrow-down&#39; : &#39;arrow-up&#39;; } return &#39;&#39;; } $scope.Search = function () { $scope.GetCustomers($scope.PageIndex); } } ]); &lt;/script&gt; &lt;/head&gt; &lt;body ng-controller=&#34;MyController&#34; ng-app=&#34;MyApp&#34;&gt; &lt;select ng-model=&#34;searchTerm&#34; class=&#34;form-control&#34; ng-options=&#34;c.Value as c.Text for c in Countries&#34;&gt; &lt;option value=&#34;&#34;&gt;-- Select Country --&lt;/option&gt; &lt;/select&gt; &lt;input type=&#34;button&#34; ng-click=&#34;Search()&#34; value=&#34;Search&#34; class=&#34;btn btn-primary btn-sm&#34; /&gt; &lt;br /&gt; &lt;table class=&#34;table table-bordered table-hover table-striped&#34;&gt; &lt;thead&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th ng-click=&#34;SortData(&#39;CustomerID&#39;)&#34;&gt; Id&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;CustomerID&#39;)&#34;&gt;&lt;/div&gt; &lt;/th&gt; &lt;th ng-click=&#34;SortData(&#39;ContactName&#39;)&#34;&gt; Name&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;ContactName&#39;)&#34;&gt;&lt;/div&gt; &lt;/th&gt; &lt;th ng-click=&#34;SortData(&#39;City&#39;)&#34;&gt; City&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;City&#39;)&#34;&gt;&lt;/div&gt; &lt;/th&gt; &lt;th ng-click=&#34;SortData(&#39;Country&#39;)&#34;&gt; Country&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;Country&#39;)&#34;&gt;&lt;/div&gt; &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr dir-paginate=&#34;customer in Customers|itemsPerPage:PageSize&#34; total-items=&#34;RecordCount&#34;&gt; &lt;td&gt;{{customer.CustomerID}}&lt;/td&gt; &lt;td&gt;{{customer.ContactName}}&lt;/td&gt; &lt;td&gt;{{customer.City}}&lt;/td&gt; &lt;td&gt;{{customer.Country}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;dir-pagination-controls max-size=&#34;PageSize&#34; direction-links=&#34;true&#34; boundary-links=&#34;true&#34; on-page-change=&#34;GetCustomers(newPageNumber)&#34;&gt; &lt;/dir-pagination-controls&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/S8XJgQQ.gif" alt="" /></p>https://www.aspforums.net:443/Threads/137388/Filter-Search-Data-with-DropDownList-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/137388/Filter-Search-Data-with-DropDownList-using-AngularJS-in-ASPNet-MVC/Thu, 19 Sep 2019 02:05:24 GMT