Calculate Running Total in HTML Table using AngularJS in ASP.Net

Hi skp,

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

I have used web method to populate the record. You have to use Web API for this.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope, $http) {
        $scope.Products = [];
        $http.post("Default.aspx/GetProducts", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.Products = JSON.parse(response.data.d);
        });
        $scope.Calculate = function (index) {
            $scope.Products[index].Total = parseFloat($scope.Products[index].Price) * parseFloat($scope.Products[index].Quantity);
            $scope.$apply();
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in Products">
                <td>{{ product.Id }}</td>
                <td>{{ product.Name }}</td>
                <td>{{ product.Price }}</td>
                <td><input type="number" min="0" ng-model="product.Quantity" ng-init="product.Quantity=0" ng-change="Calculate($index)" /></td>
                <td><input type="number" ng-model="product.Total" ng-init="product.Total=0" /></td>
            </tr>
        </tbody>
    </table>
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

Code

C#

[WebMethod]
public static string GetProducts()
{
    List<object> products = new List<object>();
    string sql = "SELECT TOP 5 ProductID,ProductName,UnitPrice FROM products";
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
        {
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    products.Add(new
                    {
                        Id = sdr["ProductID"],
                        Name = sdr["ProductName"],
                        Price = sdr["UnitPrice"]
                    });
                }
            }
            conn.Close();
        }
        return (new JavaScriptSerializer().Serialize(products));
    }
}

VB.Net

<WebMethod()>
Public Shared Function GetProducts() As String
    Dim products As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT TOP 5 ProductID,ProductName,UnitPrice FROM products"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    products.Add(New With {
                    .Id = sdr("ProductID"),
                    .Name = sdr("ProductName"),
                    .Price = sdr("UnitPrice")
                })
                End While
            End Using
            conn.Close()
        End Using

        Return (New JavaScriptSerializer().Serialize(products))
    End Using
End Function

Screenshot