POS-22: Invoice Adding input fields & adding rows Dynamically using Javascript | ASP.NET MVC | AngularJs

Part-1: Point of Sale(POS) Inventory Super Shop Management System using ASP.NET MVC Part-2: Point of Sale(POS) Setup template to your project | Super Shop Management System|ASP.NET MVC Part-3: Point of Sale(POS) Database & table analysis | Super Shop Management System|ASP.NET MVC Part-4: Point of Sale(POS) Database Create in SQL Server | Super Shop Management System|ASP.NET MVC Part-5: Point of Sale(POS) Login using AJAX ASP.NET MVC | JQUERY Part-6: Point of Sale(POS) Login and Authorization with Session variables in ASP.NET | JQUERY | AJAX Part-7: Point of Sale(POS) Convert Password to MD5 Hash string in ASP.NET | Encrypt password in ASP.NET MVC C# Part-8: Point of Sale(POS) Role based authentication and authorization in ASP.NET MVC|Redirect to not found page if not authorized|C# Part-9: Point of Sale(POS) Create user & Account management UI UX in ASP.NET MVC Part-10: Point of Sale(POS) User Creation & user registration using ASP.NET MVC | Jquery | Ajax Part-11: Point of Sale(POS) Get user list using ASP.NET MVC | Jquery | Ajax Part-12: Point of Sale(POS) Update user using ASP.NET MVC | Jquery | Ajax Part-13: Inventory and POS Login logout session using ASP.NET | Supershop management system Part-14: Inventory Category CRUD Create,Retrieve,Update,View | POS Category CRUD using ASP.NET JQuery AJAX Part-15: Inventory and POS batch tracking and control table create in SQL Server 2012 Part-16: Inventory Product CRUD List | Point of sale Products Crud using MVC Part-17: Inventory and POS Batch CRUD using MVC JQUERY AJAX | CSharp Part-18: Inventory management and stock control using mvc | Jquery AngularJs Part-19: Inventory & POS Stock edit and validation using AngularJS POS 20: Inventory & POS AngularJS error fix POS-21: Inventory & POS Invoice template setup using Bootstrap POS-22: Invoice Adding input fields & adding rows Dynamically using Javascript | ASP.NET MVC | AngularJs POS-23: Inventory Onclick get selected data & Calculate line total using Javascript ASP.NET MVC JQUERY POS-24: Inventory Invoice Configuration and Calculation using JavaScript AngularJS ASP.NET MVC POS-25: Inventory sale from invoice using ASP.NET MVC | Jquery AngularJS POS-26: Get data using ASP.NET MVC AngularJS JQUERY POS-27: Invoice sales page edit using ASP.NET MVC JQUERY AngularJS POS-28: Invoice vat calculation discount calculation using Javascript ASP.NET MVC | Invoice crud POS-29: Invoice calculate subtotal add row remove row using AngularJS ASP.NET MVC

7/3/2021 2:55:52 PM

Download Project

Post your any code related problem to

Follow the previous video and articles to complete the POS tutorials


  • I will add a button to add new rows
<a href="#" ng-click="AddNewRow()"><i class="fa fa-plus"></i></a>
  • We will add a new method in HomeController.cs to load product in a dropdown in Invoice page
        public JsonResult GetAllProduct()
            POS_TutorialEntities db = new POS_TutorialEntities();
            var dataList = (from prd in db.Products.Include("Category").ToList()
                            join stk in db.ProductStocks on prd.ProductId equals stk.ProductId
                            where stk.Quantity > 0
                            select new
                                ProductId = prd.ProductId,
                                CategoryId = prd.CategoryId,
                                Name = prd.Name,
                                Status = prd.Status,
                                CategoryName = prd.Category.Name,
                                PurchasePrice = stk.PurchasePrice,
                                SalesPrice = stk.SalesPrice
            return Json(dataList, JsonRequestBehavior.AllowGet);
  • We will add a method to HomeInvoiceController.js to load products
        function GetProducts() {
                .then(function (response) {
                    var data =;
                    $scope.ProductList = data;
  • Add a global scope variable in HomeInvoiceController.js
 $scope.InvoiceCart = [];
  • Add a method will be added inside HomeInvoiceController.js and will trigger this method when row add button will be click.
  $scope.AddNewRow = function () {
            $scope.InvoiceCart.push({ ProductId: null, CategoryName: '', UnitPrice: 0, Quantity: 1, LineTotal: 0 });
  • Use this code to show the rows when we will click on row adding button
<table class="table table-striped">
                            <th class="center">#</th>

                            <th class="right">Unit Cost</th>
                            <th class="center">Qty</th>
                            <th class="right">Total</th>
                        <tr ng-repeat="cart in InvoiceCart">
                            <td class="center">{{$index+1}}</td>
                            <td class="left strong">
                                <select ng-model="cart.ProductId" ng-click="SetValueOfProduct(cart.ProductId);SubTotalCalculation();">
                                    <option ng-repeat="product in ProductList" value="{{product.ProductId}}">{{product.Name}}</option>
                            <td class="left">{{cart.CategoryName}}</td>

                            <td class="right"><input ng-model="cart.UnitPrice" value="{{cart.UnitPrice}}" /></td>
                            <td class="center"><input class="BorderLess" ng-model="cart.Quantity" ng-change="OnChangeLineTotalSet(cart.ProductId);SubTotalCalculation();" value="1" type="number" placeholder="Quantity" /></td>
                            <td class="right"><input value={{cart.Quantity*cart.UnitPrice}} ng-model="cart.LineTotal" /></td>
                            <td><a href="#" ng-click="RowDelete($index)"><i class="fa fa-times"></i></a></td>
                                <a href="#" ng-click="AddNewRow()"><i class="fa fa-plus"></i></a>


Run this project and see the output

About Teacher