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

Last Reply 11 months ago By dharmendr

Posted 11 months 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 11 months ago.
Posted 11 months ago Modified on 11 months 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