Set Cascading DropDownList value on Table Row Button Click using AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted 2 months ago

Hi,

I have one grid view with relevant fields

after clicking of edit button category and name fields values are displaying properly in form but product value is not displaying

How to set Dropdownlist after clicking of edit button

could you please help me

<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 = '';
                }
            }
        });

        $scope.edit = function (employee) {
            
            $.post("/timesheet/getTimesheetByNo/", { id: employee.Id }, function (r) {
                debugger;
                $scope.Details = [];
                for (var i = 0; i < r.Employees.length; i++) {
                    var time = {};
                    time.TimeSheetID = r.Employees[i].ID;
                    time.Name = r.Employees[i].Name;
                    time.Category = r.Employees[i].Category;
                    time.Product = r.Employees[i].Product;
                    $scope.Details.push(time);
                }
                $scope.$apply();


            });

            $scope.Action = "Update";

        }

        
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>name</th>
            <th>Category</th>
            <th>Product</th>
        </tr>
        <tbody ng-repeat="detail in Details">
            <tr>
                <td>{{detail.Name}}</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>
<hr />
    <div id="dvContainer">
        <div>
            <div class="table-responsive ">
                <table id="dvData" class="table table-bordered ">
                    <tr class="success">
                        <th>OrderName</th>
                        <th>CId</th>
                        <th><b>Actions</b></th>
                    </tr>
                    <tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">

                        <td>
                            <input type="hidden" ng-model="employee.Id " />
                            {{employee.Category}}
                        </td>

                        <td>
                            {{employee.Product}}
                        </td>
                        <td>
                            <a ng-click="edit(employee)" href="">Edit</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

 

 

Posted one month ago

Hi mahesh213,

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

Controller

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

    public JsonResult getAll()
    {
        List<Employee> employeeList = GetAll();
        var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);

        return JsonResult;
    }

    public ActionResult GetCategories()
    {
        List<Category> categories = Categories();
        return Json(categories, JsonRequestBehavior.AllowGet);
    }

    public ActionResult GetProducts(int? CategoryID)
    {
        List<Product> products = Products();
        products = products.Where(x => x.CategoryID == CategoryID).ToList();
        return Json(products, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult getTimesheetByNo(int id)
    {
        List<Employee> reportList = null;
        if (id > 0)
        {
            reportList = GetAll().Where(x => x.Id == id).ToList();
        }
        else
        {
            reportList = GetAll();
        }
        List<Employee> employeesList = new List<Employee>();
        foreach (Employee employee in reportList)
        {
            employee.Categories = Categories();
            employee.Products = Products().Where(x => x.CategoryID == employee.CategoryID).ToList();
            employeesList.Add(employee);
        }

        EmplpoyeeDetail details = new EmplpoyeeDetail();
        details.Employees = employeesList;
        var JsonResult = Json(details, JsonRequestBehavior.AllowGet);
        return JsonResult;
    }

    private static List<Employee> GetAll()
    {
        List<Employee> employeeList = new List<Employee>();
        employeeList.Add(new Employee { Id = 1, Name = "mahesh", CategoryID = 1, ProductID = 1 });
        employeeList.Add(new Employee { Id = 2, Name = "rahul", CategoryID = 2, ProductID = 1 });
        return employeeList;
    }

    private static List<Category> Categories()
    {
        List<Category> categories = new List<Category>();
        categories.Add(new Category { CategoryID = 1, CategortName = "Category 1", IsEmployee = true });
        categories.Add(new Category { CategoryID = 2, CategortName = "Category 2", IsEmployee = false });
        categories.Add(new Category { CategoryID = 3, CategortName = "Category 3", IsEmployee = true });
        return categories;
    }

    private static List<Product> Products()
    {
        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" });
        return products;
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int CategoryID { get; set; }
        public int ProductID { get; set; }
        public List<Category> Categories { get; set; }
        public List<Product> Products { get; set; }
    }

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

    public class Product
    {
        public int ProductID { get; set; }
        public int CategoryID { get; set; }
        public string ProductName { get; set; }
    }

    public class EmplpoyeeDetail
    {
        public List<Employee> Employees { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <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://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.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://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ CName: "Item1" }, { CName: "Item2"}];
            GetCategory();
            GetEmployees();
            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 GetEmployees() {
                $scope.employees = [];
                $http({
                    method: 'Get',
                    url: '/Home/getAll'
                }).then(function (response) {
                    $scope.employees = response.data;
                }), function (error) {
                    $scope.message = 'Unexpected Error';
                };
            }
            $scope.GetProducts = function (Category, index) {
                if (Category != null) {
                    $http({
                        method: 'Get',
                        url: '/Home/GetProducts/',
                        params: { CategoryID: Category }
                    }).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 = '';
                }
            }
            $scope.edit = function (employee) {
                $.post("/Home/getTimesheetByNo/", { id: employee.Id }, function (r) {
                    $scope.Details = [];
                    for (var i = 0; i < r.Employees.length; i++) {
                        var time = {};
                        time.CName = r.Employees[i].Name;
                        time.Category = r.Employees[i].CategoryID;
                        time.Categores = r.Employees[i].Categories;
                        time.Product = r.Employees[i].ProductID;
                        time.products = r.Employees[i].Products
                        $scope.Details.push(time);
                    }
                    $scope.$apply();
                });
            }
        }); 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" 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="GetProducts(detail.Category,$index)" 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="detail.Product" ng-disabled="!detail.products" class="input-sm form-control"
                        ng-options="s.ProductID as s.ProductName for s in detail.products">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <hr />
    <div id="dvContainer">
        <div>
            <div class="table-responsive ">
                <table id="dvData" class="table table-bordered ">
                    <tr class="success">
                        <th>OrderName</th>
                        <th>CId</th>
                        <th>Actions</th>
                    </tr>
                    <tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                        <td>
                            <input type="hidden" ng-model="employee.Id " />
                            {{employee.CategoryID}}
                        </td>
                        <td>{{employee.ProductID}}</td>
                        <td><a ng-click="edit(employee)" href="">Edit</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot