Filter HTML Table based on DropDownList on Button Click using AngularJS in ASP.Net MVC

Last Reply 8 days ago By dharmendr

Posted 9 days ago

Hi,

I have one dropdown with relevant values

currently my requirement is that i need to add static value in Item dropdown

All and need to assign to Like '%'

if i can select all need to filter all Items names on grid view

or else display only relevant item name values on grid view

Item

Id Name

1 aaa

2 bbb

3 ccc

Report

RId        Id          Item

1           1          Item1

2           1          Item2

3           2          Item3

    <script>
        var app = angular.module('myModule', ['angularUtils.directives.dirPagination', 'ngAnimate', 'ui.bootstrap']);
        app.controller('myController', ['$scope', '$http', function ($scope, $http, $window) {
            GetItems();
            function GetItems() {
                debugger;
                $scope.Items = [];
                $http({
                    method: 'Get',
                    url: '/report/GetReport/',
                }).success(function (data, status, headers, config) {
                    $scope.Items = data;
                    //$scope.IsVisible = true;

                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }       

            $scope.IsVisible = false;

            //department
            $scope.GetAllItems = function () {
                debugger;
                var Id1 = $scope.Item;               
                        $http({
                            method: 'POST',
                            url: '/report/getAll/',
                            data: JSON.stringify({ Id: Id1 })
                        }).success(function (data, status, headers, config) {
                            $scope.items = data;
                            $scope.IsVisible = true;

                        }).error(function (data, status, headers, config) {
                            $scope.items = 'Unexpected Error';
                        });
                    }
                   
        }]);

    </script>

 

        [HttpPost]
        public JsonResult getAll(int Id)
        {
            using (ReportEntities dataContext = new ReportEntities())
            {
                var employeeList = (from E in dataContext.Reports                                   
                                     where E.Id == Id
                                    orderby E.Id
                                    select new
                                    {
                                        E.RId,
                                        E.Item,    
                                        E.Id                                                                              
                                    }).ToList();
                var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
                JsonResult.MaxJsonLength = int.MaxValue;
                return JsonResult;
            }
        }

 

 

<body ng-app="myModule" ng-controller="myController">
    <div class="form-horizontal">
        <div class="form-group">
            <label for="ID" class="control-label col-xs-2">
                Item</label>
            <div class="col-md-2">
                <select style="display: inline" select2="" data-ng-model="Item" class="form-control"
                    data-ng-options="p.Id as p.Item for p in Items">
                    <option value="">-- Select Item --</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()">
            <span class="glyphicon glyphicon-ok"></span>Submit
        </button>
    </div>
    <div class="container" ng-show="IsVisible" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th style="cursor: pointer;" ng-click="sort('Id')">
                    <b>ID</b> <span class="glyphicon sort-icon" ng-show="sortKey=='Id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                    </span>
                </th>
                <th style="cursor: pointer;" ng-click="sort('Item')">
                    <b>Item</b> <span class="glyphicon sort-icon" ng-show="sortKey=='Item'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                    </span>
                </th>
                <th style="cursor: pointer;" ng-click="sort('ItemCode')">
                    <b>Item Code</b> <span class="glyphicon sort-icon" ng-show="sortKey=='ItemCode'"
                        ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                    </span>
                </th>
                <th style="cursor: pointer;" ng-click="sort('Price')">
                    <b>Price</b> <span class="glyphicon sort-icon" ng-show="sortKey=='Price'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                    </span>
                </th>
                <th style="cursor: pointer; width: 100px;" ng-click="sort('Date1')">
                    <b>Date1</b> <span class="glyphicon sort-icon" ng-show="sortKey=='Date1'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                    </span>
                </th>
                <th style="cursor: pointer; width: 100px;" ng-click="sort('Date2')">
                    <b>Date2</b> <span class="glyphicon sort-icon" ng-show="sortKey=='Date2'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                    </span>
                </th>
            </tr>
            <tr dir-paginate="item in items|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
                ng-model="search">
                <td>
                    {{item.Id}}
                </td>
                <td>
                    {{item.Item}}
                </td>
            </tr>
        </table>
    </div>
</body>

 

You are viewing reply posted by: dharmendr 8 days ago.
Posted 8 days ago Modified on 7 days ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

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

    public JsonResult GetReport()
    {
        List<Item> items = new List<Item>();
        items.Add(new Item { Id = 1, Name = "aaa" });
        items.Add(new Item { Id = 2, Name = "bbb" });
        items.Add(new Item { Id = 3, Name = "ccc" }););

        var JsonResult = Json(items, JsonRequestBehavior.AllowGet);
        return JsonResult;
    }

    [HttpPost]
    public JsonResult getAll(int Id)
    {
        List<Report> reportList = null;
        if (Id > 0)
        {
            reportList = GetAllReports().Where(x => x.Id == Id).ToList();
        }
        else
        {
            reportList = GetAllReports();
        }
        var JsonResult = Json(reportList, JsonRequestBehavior.AllowGet);
        return JsonResult;
    }

    public List<Report> GetAllReports()
    {
        List<Report> reports = new List<Report>();
        reports.Add(new Report { RId = 1, Id = 1, Item = "Item1" });
        reports.Add(new Report { RId = 2, Id = 1, Item = "Item2" });
        reports.Add(new Report { RId = 3, Id = 2, Item = "Item3" });

        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; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <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', ['$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 > 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;
                }
            }
        } ]); 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="form-horizontal">
        <div class="form-group">
            <label for="ID" class="control-label col-xs-2">
                Item</label>
            <div class="col-md-2">
                <select style="display: inline" data-ng-model="Item" class="form-control" data-ng-options="p.Id as p.Name for p in Items">
                    <option value="">-- Select Item --</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()">
            <span class="glyphicon glyphicon-ok"></span>Submit
        </button>
    </div>
    <div class="container" ng-show="IsVisible" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th>Id</th>
                <th>Item</th>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Item}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

Screenshot