In this article I will explain with an example, how to use MVC6 Grid in ASP.Net Core MVC.
Installing MVC6 Grid Library in the ASP.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
3. Then, copy the css folder and paste it inside the wwwroot folder of Solution Explorer as shown below.
4. Now, navigate to the Views folder (directory).
5. Then, copy the Shared folder and paste it in the Views folder inside Solution Explorer as shown below.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
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.
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
Downloads