In this article I will explain with an example, how to use MVC6 Grid in ASP.Net Core (.Net Core 2) 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
 
ASP.Net Core 2 Razor Pages WebGrid Step By Step Tutorial with example
 
3. Then, copy the css folder and paste it inside the wwwroot folder of Solution Explorer as shown below.
ASP.Net Core 2 Razor Pages WebGrid Step By Step Tutorial with example
 
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).
ASP.Net Core 2 Razor Pages WebGrid Step By Step Tutorial with example
 
5. Then, copy the MvcGrid folder and paste it in the Pages folder inside Solution Explorer as shown below.
ASP.Net Core 2 Razor Pages WebGrid Step By Step Tutorial with 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 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 (.Net Core 2) Razor Pages and Entity Framework, please refer my article .Net Core 2: Entity Framework Tutorial in ASP.Net Core Razor Pages. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core (.Net Core 2) Razor Pages.
 
using Microsoft.EntityFrameworkCore;
using WebGrid_Razor_Core.Models;
 
namespace WebGrid_Razor_Core
{
    public class DBCtx : 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)

HTML Markup

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>
    <div id="Grid" style="width:500px">
        @(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");
            })
        )
</div>
</body>
</html>
 
 

Screenshot

ASP.Net Core 2 Razor Pages WebGrid Step By Step Tutorial with example
 
 

Downloads

Download Code