Install grid package from nuget.
> Install-Package NonFactors.Grid.Mvc6
Include grid partial views to your shared views folder, they can be found at:
Windows: %UserProfile%\.nuget\packages\NonFactors.Grid.Mvc6\{version}\content\Views\
Linux/Mac: ~/.nuget/packages/NonFactors.Grid.Mvc6/{version}/content/Views/
MVC views application
<Project name> Views Shared + MvcGrid + _Grid.cshtml + _Pager.cshtml
Razor pages application
<Project name> Pages + MvcGrid + _Grid.cshtml + _Pager.cshtml
Add grid extensions to known namespaces in _ViewImports.cshtml
+@using NonFactors.Mvc.Grid;
@using System;
Include grid styling sheet to your project and your page, it can be found at:
Windows: %UserProfile%\.nuget\packages\NonFactors.Grid.Mvc6\{version}\content\css\mvc-grid\
Linux/Mac: ~/.nuget/packages/NonFactors.Grid.Mvc6/{version}/content/css/mvc-grid/
<html>
<head>
+ <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet">
</head>
<body>
@RenderBody()
</body>
</html>
Include grid scripts to your project and your page, it can be found at.
Windows: %UserProfile%\.nuget\packages\NonFactors.Grid.Mvc6\{version}\content\js\mvc-grid\
Linux/Mac: ~/.nuget/packages/NonFactors.Grid.Mvc6/{version}/content/js/mvc-grid/
<html>
<head>
<link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet">
</head>
<body>
@RenderBody()
+ <script src="~/js/mvc-grid/mvc-grid.js"></script>
</body>
</html>
Initialize grid instances after rendering grid html
<html>
<head>
<link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet">
</head>
<body>
@RenderBody()
<script src="~/js/mvc-grid/mvc-grid.js"></script>
<script>
+ document.querySelectorAll(".mvc-grid").forEach(element => new MvcGrid(element));
</script>
</body>
</html>