In this article I will explain with an example, how to display Grand Total using WebGrid in Footer in ASP.Net Core (.Net Core 8) Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages, please refer my article ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 

Model

The Model class consists of following properties.
public class Product
{
    public int OrderID { get; set; }
    public string ProductName { get; set; }
    public decimal Price { get; set; }
}
 
 

Namespaces

You will need to import the following namespaces.
using System.Data.SqlClient;
 
 

Page Model (Code-Behind)

Inside the PageModel class, a property of type Generic List collection is defined.
The PageModel consists of following Handler method.

Handler method for handling GET operation

Inside this Handler method, the records are fetched from the Orders and Product Tables using SqlDataReader and then using WHILE Loop, the records are copied into the Generic List collection of Product class objects.
Note: For more information about using SqlDataReader, please refer my article Using SqlDataReader in ASP.Net Core Razor Pages.
 
public class IndexModel : PageModel
{
    public List<Product> Products { get; set; }
 
    public void OnGet()
    {
        string constr = @"Data Source=.\SQL2019;Initial Catalog=Northwind;uid=sa;pwd=pass@123";
        using (SqlConnection con = new SqlConnection(constr))
        {
            string sql = "SELECT TOP 10 OrderID,";
            sql += "(SELECT ProductName FROM Products WHERE ProductID = details.ProductId) ProductName,";
            sql += "(Quantity * UnitPrice) Price";
            sql += " FROM [Order Details] details";
            sql += " ORDER BY OrderID";
            using (SqlCommand cmd = new SqlCommand(sql, con))
            {
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    this.Products = new List<Product>();
                    while (sdr.Read())
                    {
                        Products.Add(new Product
                        {
                            OrderID = Convert.ToInt32(sdr["OrderID"]),
                            ProductName = sdr["ProductName"].ToString(),
                            Price = Convert.ToDecimal(sdr["Price"])
                        });
                    }
                }
                con.Close();
            }
        }
    }
}
 
 

View

HTML Markup

Inside the Razor Page, an HTML Table is used for displaying Grand Total in Footer.
Then, the NonFactors.Mvc.Grid namespace is inherited inside the View.
The columns have been added for displaying using the Build method of the MVC6 Grid HTML Helper class. Inside the Build method the column collection is added and each column is assigned to the Model property using the Add method.
Note: For more details on using WebGrid in ASP.Net Core (.Net Core 8) Razor Pages, please refer Using MVC6 Grid in ASP.Net Core Razor Pages.
 
The Header Text of the column is set using the Titled function.
Finally, the mvc-grid.css file is inherited inside the View.
The last column of Grid will display the Price hence it is formatted into two Decimal places using the ToString(“N2”) function.
Below the Grid, an HTML Table has been added which will act as Footer for the Grid. Inside the HTML Table, the Grand Total i.e. the Sum of the Price of all the Products is calculated using Lambda Expression and displayed.
@page
@model Calculate_Total_Table_WebGrid_Core_Razor.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@using Calculate_Total_Table_WebGrid_Core_Razor.Models;
@using NonFactors.Mvc.Grid
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet" />
</head>
<body>
    <div style="width: 550px">
        @(Html.Grid(Model.Products).Build(columns =>
            {
                columns.Add(model => model.OrderID).Titled("Order ID");
                columns.Add(model => model.ProductName).Titled("Product Name");
                columns.Add(model => model.Price).Titled("Price")
                .RenderedAs(model => $"{model.Price:N2}");
            })
            )
        <table class="Grid" style="border-collapse:collapse; width:100%">
            <tfoot>
                <tr>
                    <td style="width:432px" align="right">Total</td>
                    <td>@Model.Products.Sum(p => p.Price).ToString("N2")</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages Display Grand Total in WebGrid in Footer
 
 

Downloads

Download Code