Add new Row using Footer to HTML Table on Button Click using AngularJS in ASP.Net MVC

Last Reply 4 months ago By dharmendr

Posted 4 months ago

Hi,

In dynamically added rows after clicking of add button product value is not displaying

@{
    Layout = null;
}
<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: '/autocomplete/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: '/autocomplete/GetProducts/',
                        params: { CategoryID: catId }
                    }).success(function (data, status, headers, config) {
                        debugger;
                        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.GetProducts1 = function () {
                var stateId = $scope.Category.CategoryID;
                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.Add = function () {
                debugger;
                var customer = {};
                $scope.Details.push({
                    Name: $scope.Name,
                    Category: $scope.Category.CategortName,
                    CategoryID: $scope.Category.CategoryID,
                    Product: $scope.Product.ProductName,
                    ProductID: $scope.Product.ProductID,
                    Product: $scope.Product,
                    Category: $scope.Category,
                });

                $scope.Name = "";
                $scope.Category = "";
                $scope.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(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="detail.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>
        <tfoot>
            <tr>
                <td>
                    <input type="text" ng-model="CName" class="input-sm form-control" />
                </td>
                <td>
                    <select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts1()" 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="!products"
                            class="input-sm form-control" ng-options="s as s.ProductName for s in products">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
                <td>
                    <input type="button" class="btn btn-primary" ng-click="Add()" value="Add" />
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

 

Posted 4 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 ActionResult GetAllProducts()
    {
        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 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();
            GetAllProducts();
            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 GetAllProducts() {
                $http({
                    method: 'Get',
                    url: '/Home/GetAllProducts/'
                }).success(function (data, status, headers, config) {
                    $scope.products = 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.GetProducts1 = function () {
                var stateId = $scope.Category.CategoryID;
                if (stateId) {
                    $http({
                        method: 'POST',
                        url: '/Home/GetProducts/',
                        params: { CategoryID: stateId }
                    }).success(function (data, status, headers, config) {
                        $scope.FooterProducts = data;
                    }).error(function (data, status, headers, config) {
                        $scope.message = 'Unexpected Error';
                    });
                }
                else {
                    $scope.products = null;
                }
            }
            $scope.Add = function () {
                var customer = {};
                $scope.Details.push({
                    CName: $scope.CName,
                    CategortName: $scope.Category == undefined ? "" : $scope.Category.CategortName,
                    CategoryID: $scope.Category == undefined ? "" : $scope.Category.CategoryID,
                    Category: $scope.Category,
                    ProductName: $scope.Product == undefined ? "" : $scope.Product.ProductName,
                    ProductID: $scope.Product == undefined ? "" : $scope.Product.ProductID,
                    Product: $scope.Product == undefined ? "" : $scope.Product
                });

                $scope.CName = "";
                $scope.Category = "";
                $scope.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(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="detail.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>
        <tfoot>
            <tr>
                <td><input type="text" ng-model="CName" class="input-sm form-control" /></td>
                <td>
                    <select class="input-sm form-control" select2="" name="CategortName" ng-model="Category"
                        containercssclass="all" ng-change="GetProducts1()" 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="!products" class="input-sm form-control"
                        ng-options="s as s.ProductName for s in FooterProducts">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
                <td><input type="button" class="btn btn-primary" ng-click="Add()" value="Add" /></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Screenshot