In this article I will explain with an example, how to format Decimal Number in Column using WebGrid in ASP.Net Core (.Net Core 8) MVC.
Note: For beginners in ASP.Net Core (.Net Core 8) MVC, please refer my article ASP.Net Core 8: 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; }
}
 
 

Controller

The Controller consists of the following Action method.

Action method for handling GET operation

Inside this Action 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.
 
Finally, the Generic List collection of Product class objects is returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public IActionResult Index()
    {
        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";
        string constr = @"Data Source= .\SQL2019;Initial Catalog= Northwind;uid=sa;pwd=pass@123;Trust Server certificate=True";
        List<Product> products = new List<Product>();
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(sql))
            {
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        products.Add(new Product
                        {
                            OrderID = Convert.ToInt32(sdr["OrderID"]),
                            ProductName = sdr["ProductName"].ToString(),
                            Price = Convert.ToDecimal(sdr["Price"])
                        });
                    }
                }
                con.Close();
                return View(products);
            }
        }
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the Product class is declared as Model for the View.
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.
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.
@using Calculate_Total_WebGrid_Core_MVC.Models;
@using NonFactors.Mvc.Grid
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model List<Product>
@{
    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: 349px">
        @(Html.Grid(Model).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:250px" align="right">Total</td>
                    <td>@Model.Sum(p => p.Price).ToString("N2")</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
 
 

Screenshot

ASP.Net Core: WebGrid Format Decimal Number in Column
 
 

Downloads

Download Code