Implement cascading DropDownList in HTML Table Row using AngularJS in ASP.Net MVC

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Hi,

I have 2 rows in that i have fields CName, Category and Product

based upon Category i am going to display Product value

If i change the categoy it won't effect the 2nd row

currently my requirement is that here product value is not displaying 

@{ 
    Layout = null;
}
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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://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" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Customers = [];
            GetCategory();
            function GetCategory() {
                $scope.categories = [];
                $http({
                    method: 'Get',
                    url: '/autocomplete/GetCategories/',
                }).success(function (data, status, headers, config) {
                    $scope.categories = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.GetProducts = function () {
                debugger;
                var stateId = $scope.Category;
                if (stateId) {
                    $http({
                        method: 'POST',
                        url: '/autocomplete/GetProducts/',
                        data: JSON.stringify({ CategoryID: stateId })
                    }).success(function (data, status, headers, config) {
                        $scope.products = data;
                    }).error(function (data, status, headers, config) {
                        $scope.message = 'Unexpected Error';
                    });
                }
                else {
                    $scope.products = null;
                }
            }
            $scope.Details = [{ CName: "Item1", Category: '', Product: '' },{ CName: "Item2", Category: '', Product: '' }];
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Cname</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="GetProducts()" ng-options="c.CategoryID as c.CategortName for c in categories" ng-disabled="disabled">
                        <option value="">Select Category</option>
                    </select>
                </td>
                <td>
                    <select select2="" ng-model="Product" ng-disabled="!products" class="input-sm form-control" ng-options="s.ProductID as s.ProductName for s in products">
                     <option value="">-- Select Product --</option>
                  </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

Posted 2 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 ActionResult GetCategories()
    {
        List<Category> categories = new List<Category>();
        categories.Add(new Category { CategoryID = 1, CategortName = "Category 1" });
        categories.Add(new Category { CategoryID = 2, CategortName = "Category 2" });
        categories.Add(new Category { CategoryID = 3, CategortName = "Category 3" });
        return Json(categories, JsonRequestBehavior.AllowGet);
    }

    public ActionResult GetProducts(int? CategoryID)
    {
        List<Product> products = new List<Product>();
        products.Add(new Product { ProductID = 1, CategoryID = 1, ProductName = "Product 1" });
        products.Add(new Product { ProductID = 2, CategoryID = 1, ProductName = "Product 2" });
        products.Add(new Product { ProductID = 3, CategoryID = 3, ProductName = "Product 3" });
        products = products.Where(x => x.CategoryID == CategoryID).ToList();
        return Json(products, JsonRequestBehavior.AllowGet);
    }

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

    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public int CategoryID { 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.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, $window) {
            $scope.Details = [{ CName: "Item1" }, { CName: "Item2"}];
            GetCategory();
            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';
                });
            }

            $scope.GetProducts = function (detail, index) {
                if (detail.Category != null) {
                    var catId = detail.Category.CategoryID;
                    $http({
                        method: 'Get',
                        url: '/Home/GetProducts/',
                        params: { CategoryID: catId }
                    }).success(function (data, status, headers, config) {
                        if (data.length > 0) {
                            $scope.Details[index].products = data;
                        } else {
                            $scope.Details[index].products = '';
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.message = 'Unexpected Error';
                    });
                } else {
                    $scope.Details[index].products = '';
                }
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Cname</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="GetProducts(detail,$index)" ng-options="c as c.CategortName for c in categories"
                        ng-disabled="disabled">
                        <option value="">Select Category</option>
                    </select>
                </td>
                <td>
                    <select select2="" ng-model="Product" ng-disabled="!detail.products" class="input-sm form-control"
                        ng-options="s as s.ProductName for s in detail.products">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Screenshot