In this article I will explain a step by step tutorial with an example, how to use WebGrid in ASP.Net Core Razor Pages.
The WebGrid will be implemented using the MVC6 Grid library in ASP.Net Core Razor Pages.
This article will explain how to implement MVC6 Grid with Entity Framework and also display specific columns in MVC6 Grid in ASP.Net Core Razor Pages.
 
 
Installing MVC6 Grid Library in the ASP.Net Core Razor Pages project
1. First, install the MVC6 Grid library from Nuget Package Manager Console using the following command.
Install-Package NonFactors.Grid.Mvc6 -Version 6.2.4
 
2. After successful installation, navigate to the following folder (directory).
%UserProfile%\.nuget\packages\nonfactors.grid.mvc6\{version}\content
 
WebGrid Step By Step Tutorial with example in ASP.Net Core Razor Pages
 
3. Then, copy the css folder and paste it inside the wwwroot folder of Solution Explorer as shown below.
WebGrid Step By Step Tutorial with example in ASP.Net Core Razor Pages
 
Note: In order to enable static files in ASP.Net Core, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
4. Now, navigate to the Shared folder (directory).
WebGrid Step By Step Tutorial with example in ASP.Net Core Razor Pages
 
5. Then, copy the MvcGrid folder and paste it in the Pages folder inside Solution Explorer as shown below.
WebGrid Step By Step Tutorial with example in ASP.Net Core Razor Pages
 
 
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 the following four properties.
public class Customer
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}
 
 
Database Context
Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core and Entity Framework, please refer my article ASP.Net Core Razor Pages: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core.
 
using Microsoft.EntityFrameworkCore;
 
namespace WebGrid_Razor_Core
{
    public classDBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
           
        }
       
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 
Razor PageModel (Code-Behind)
The PageModel consists of following Handler method.
Handler method for handling GET operation
Inside this Handler method, the Top 10 records are fetched from the Customers table using Entity Framework and assigned to the public property Customers and returned to the Razor Page.
public class IndexModel : PageModel
{
    private DBCtx Context { get; }
 
    public IndexModel(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public List<Customer> Customers { get; set; }
 
    public void OnGet()
    {
        this.Customers = this.Context.Customers.Take(10).ToList();
    }
}
 
 
Razor Page (HTML)
Inside the Razor Page, the NonFactors.Mvc.Grid namespace is inherited.
The IEnumerable collection of Customer Model class object is passed to the Grid function of the MVC6 Grid HTML Helper class.
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 Razor Page.
@page
@model WebGrid_Razor_Core.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@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>
    @(Html.Grid(Model.Customers).Build(columns =>
        {
            columns.Add(model => model.CustomerID).Titled("Customer ID");
            columns.Add(model => model.ContactName).Titled("Customer Name");
            columns.Add(model => model.City).Titled("City");
            columns.Add(model => model.Country).Titled("Country");
        })
    )
</body>
</html>
 
 
Screenshot
WebGrid Step By Step Tutorial with example in ASP.Net Core Razor Pages
 
 
Downloads
Download Code