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

Last Reply 12 days ago By dharmendr

Posted 13 days 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 12 days 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