In this article I will explain with an example, how to use MVC6 Grid in .Net Core.
 
 
Installing MVC6 Grid Library in the .Net Core 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
 
Using MVC6 Grid in .Net Core
 
3. Then, copy the css folder and paste it inside the wwwroot folder of Solution Explorer as shown below.
Using MVC6 Grid in .Net Core
 
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 Views folder (directory).
Using MVC6 Grid in .Net Core
 
5. Then, copy the Shared folder and paste it in the Views folder inside Solution Explorer as shown below.
Using MVC6 Grid in .Net Core
 
 
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: 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_MVC_Core
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
           
        }
       
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 
Controller
The Controller consists of following Action method.
Action method for handling GET operation
Inside this Action method, the Top 10 records are fetched from the Customers table using Entity Framework and returned to the View.
public class HomeController : Controller
{
    private DBCtx Context { get; }
 
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public IActionResult Index()
    {
        return View(this.Context.Customers.Take(10).ToList());
    }
}
 
 
View
Inside the View, in the very first line the Customer Model is declared as IEnumerable which specifies that it will be available as a Collection.
Then, NonFactors.Mvc.Grid namespace is inherited inside the View.
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 View.
@model IEnumerable<WebGrid_MVC_Core.Models.Customer>
@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).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
Using MVC6 Grid in .Net Core
 
 
Downloads
Download Code