Filter DropDownList item based on condition Controller in AngularJS in ASP.Net MVC

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi,

Can you please filter records in anjularjs code only

Since your filtering at controller level as per as my existing code in current project

Here i have to do it on script level only

Filter DropDownList item based on condition in Controller in ASP.Net MVC

Posted 3 months ago Modified on 3 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 GetCategories()
    {
        List<Category> categories = new List<Category>();
        categories.Add(new Category { CategoryID = 1, CategoryName = "a" });
        categories.Add(new Category { CategoryID = 2, CategoryName = "b" });
        categories.Add(new Category { CategoryID = 3, CategoryName = "c" });
        categories.Add(new Category { CategoryID = 4, CategoryName = "d" });
        return Json(categories, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetProducts(int? catID)
    {
        List<Product> products = new List<Product>();
        products.Add(new Product { PId = 1, PName = "e" });
        products.Add(new Product { PId = 2, PName = "f" });
        products.Add(new Product { PId = 3, PName = "g" });
        products.Add(new Product { PId = 4, PName = "h" });
        return Json(products, JsonRequestBehavior.AllowGet);
    }

    public class Category
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
    }

    public class Product
    {
        public int PId { get; set; }
        public string PName { get; set; }
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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', function ($scope, $http) {
            $scope.Details = [{ CName: "Item1" }, { CName: "Item2" }];
            GetCategory();
            GetProducts();

            function GetCategory() {
                $scope.categories = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetCategories/'
                }).success(function (data, status, headers, config) {
                    $scope.categories = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            function GetProducts() {
                $scope.products = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetProducts/'
                }).success(function (data, status, headers, config) {
                    $scope.products = data;
                    for (var i = 0; i < $scope.Details.length; i++) {
                        $scope.Details[i].products = $scope.products;
                        $scope.Details[i].Product = "";
                    }
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.GetProductsByCat = function (category, name) {
                $scope.ProductDetails = [];
                if (category == 1) {
                    $scope.ProductDetails.push($scope.products[0]);
                    $scope.ProductDetails.push($scope.products[1]);
                    $scope.ProductDetails.push($scope.products[2]);
                } else if (category == 2) {
                    $scope.ProductDetails.push($scope.products[1]);
                    $scope.ProductDetails.push($scope.products[3]);
                } else {
                    $scope.ProductDetails = $scope.products;
                }

                for (var i = 0; i < $scope.Details.length; i++) {
                    if ($scope.Details[i].CName == name) {
                        if (category == undefined) {
                            $scope.Details[i].products = $scope.products;
                        } else {
                            $scope.Details[i].products = $scope.ProductDetails;
                            $scope.Details[i].Product = "";
                        }
                        break;
                    }
                }
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container">
        <table class="table table-responsive">
            <tr>
                <th>Name</th>
                <th>Category</th>
                <th>Product</th>
            </tr>
            <tbody ng-repeat="detail in Details">
                <tr>
                    <td>{{detail.CName}}</td>
                    <td>
                        <select class="input-sm form-control" select2="" name="CategortName" ng-model="detail.Category"
                                containercssclass="all" ng-change="GetProductsByCat(detail.Category,detail.CName)"
                                ng-options="c.CategoryID as c.CategoryName for c in categories" ng-disabled="disabled">
                            <option value="">Select Category</option>
                        </select>
                    </td>
                    <td>
                        <select class="input-sm form-control" select2="" ng-model="detail.Product"
                                containercssclass="all" ng-options="c.PID as c.PName for c in detail.products">
                            <option value="">Select Product</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Screenshot