Search Filter HTML Table based on multi select DropDownList using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Sep 24, 2019 01:47 AM
Forum: ASP.Net MVC
Answer: 1
Views: 10631
Sample Code: Download

Hi,

I have one dropdown with relevant values

Currently my requirement is that i am going to select multiple values in single dropdown (Ex:aaa, cccc)

after clicking of Go button i need to get only those records 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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
     app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                link: function (scope, element, attrs) {
                    console.log(attrs);
                    $timeout(function () {
                        element.select2();
                        element.select2Initialized = true;
                    });
  
                    var refreshSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.trigger('change');
                        });
                    };
  
                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            element.select2();
                        });
                    };
  
                    scope.$watch(attrs.ngModel, refreshSelect);
  
                    if (attrs.ngOptions) {
                        var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
                        // watch for option list change
                        scope.$watch(list, recreateSelect);
                    }
  
                    if (attrs.ngDisabled) {
                        scope.$watch(attrs.ngDisabled, refreshSelect);
                    }
                }
            };
        });
        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" select2="" class="form-control" data-ng-options="p.Id as p.Name for p in Items" multiple>
                    <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>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Sep 24, 2019 08:37 AM
Report

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

    [HttpPost]
    public JsonResult getAll(int[] Id)
    {
        using (ReportEntities dataContext = new ReportEntities())
        {
            var employeeList = new List<Report>();
            List<Report> reports = new List<Report>();
            if (Id[0] == 0)
            {
                reports = dataContext.Reports.ToList();
            }
            else
            {
                for (int i = 0; i < Id.Length; i++)
                {
                    int id = Id[i];
                    foreach (Report report in dataContext.Reports.Where(x => x.Id == id).ToList())
                    {
                        reports.Add(report);
                    }
                }
            }

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

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" type="text/javascript">
        var app = angular.module('MyApp', []);
        app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                link: function (scope, element, attrs) {
                    console.log(attrs);
                    $timeout(function () {
                        element.select2();
                        element.select2Initialized = true;
                    });

                    var refreshSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.trigger('change');
                        });
                    };

                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            element.select2();
                        });
                    };

                    scope.$watch(attrs.ngModel, refreshSelect);

                    if (attrs.ngOptions) {
                        var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
                        // watch for option list change
                        scope.$watch(list, recreateSelect);
                    }

                    if (attrs.ngDisabled) {
                        scope.$watch(attrs.ngDisabled, refreshSelect);
                    }
                }
            };
        });
        app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
            GetItems();
            function GetItems() {
                $scope.Items = [{ Id: 0, Name: 'All' },
                                { Id: 1, Name: 'aaa' },
                                { Id: 2, Name: 'bbb' },
                                { Id: 3, Name: 'ccc'}];
            }

            $scope.IsVisible = false;
            $scope.Item = [];
            $scope.GetAllItems = function () {
                if ($scope.Item.length > 0) {
                    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" select2="" class="form-control"
                    data-ng-options="p.Id as p.Name for p in Items" multiple>
                </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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Search Filter HTML Table based on multi select DropDownList using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us