Displaying data in a tabular format is one of the most developed feature in any applications we develop. Asp.Net MVC gave a greater flexibility to control the output HTML rendering which help developers to customize the page HTML easily. Developers can now build their own UI without using the inbuilt Asp.Net controls with less HTML markups. For repetitive display tasks, we can use Partial Views, HTML helpers that can help to build re-usable view components. Though, it is very easy to create Grid display component ourselves there are some free and easy to use Grid components available with great features that could save our development time. In this article, let’s use a free Grid control called Grid.Mvc which will help us to add sort, filter and paging very easily. Sample screenshots below,
Grid with Sortable columns, Paging and Filters:
Filtering a column:
First, let’s create a new project in Visual Studio and add the required Nuget packages. I have used an Asp.Net MVC 5.0 Empty project template in this article. We require the following Nuget packages to build this Grid in our project,
-
Grid.Mvc
-
Bootstrap – Used by the Grid.Mvc package.
To add this packages, right click you project in solution explorer and click “Manage Nuget Packages..”. In the search textbox enter “Grid.Mvc”. Click Install button once you get the results. Repeat this step to add Bootstrap package.
The Gird.Mvc would have added the below things in your project.
- Views/Shared/_Grid.cshtml, Views/Shared/_GridPager.cshtml - views for grid
- Content/Gridmvc.css - default stylesheet for the grid
- Scripts/gridmvc.js, Scripts/gridmvc.min.js - Grid.Mvc scripts
- Reference GridMvc.dll
Note – We will use an EF code first for data access. I have created simple Employee-Department model with some sample data in this article. We need EntityFramework Nuget package for this. You can download the attached project and see the relevant objects and code used for data access.
Let’s add the required stylesheets, scripts into our Layout page. The bootstrap stylesheet, script and jQuery reference can be added in the Layout page. We also can register a script and css section using @RenderSection HTML helper. This will help us to render the page specific scripts and css files from the content views.
Layout page below,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="~/Content/bootstrap.css" />
@RenderSection("css", required: false)
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
Using Grid.Mvc Auto Generate Columns
Let’s use Grid.Mvc component to generate the columns automatically from the Model in this section. We will also enable Sorting, paging and filters on the column.
Controller:
public ActionResult GetAllEmployeeData()
{
return View(db.Employees.OrderBy(e => e.EmployeeId));
}
View:
@model IEnumerable<GridDemo.Models.Employee>
@using GridMvc.Html
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css {
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
}
<h2>MVC Grid</h2>
<div>
@Html.ActionLink("Index", "Index")
</div>
<div>
@Html.Grid(Model).AutoGenerateColumns().Sortable().Filterable().WithPaging(3)
</div>
@section Scripts {
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
}
Apart from the scrips and stylesheets, we also need to include GridMvc.Html namespace for the Grid. This will generate the grid with all the columns in the model.
Using Grid.Mvc with Custom Columns
Let’s use Grid.Mvc component to generate columns manually. The first column will be a hidden column to include primary keys in the row which are generally not required to display. The second column will display the full name and the third will generate a link to view the full employee data in a detail view.
Controller
public ActionResult GetAllEmployeeWithDetails()
{
return View(db.Employees.OrderBy(e => e.EmployeeId));
}
View
@model IEnumerable<GridDemo.Models.Employee>
@using GridMvc.Html
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css {
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
}
<h2>MVC Grid</h2>
<div>
@Html.ActionLink("Index","Index")
</div>
<div class="col-md-3">
@Html.Grid(Model).Columns(columns =>
{
columns.Add(col => col.EmployeeId, true);
columns.Add(col => col.FirstName).Titled("Name").RenderValueAs(col => String.Format("{0} {1}", col.FirstName, col.LastName)).Sortable(true).Filterable(true);
columns.Add().Encoded(false).Sanitized(false)
.RenderValueAs(col =>
@<b>
@Html.ActionLink("View", "EmployeeDetail", new { Id = col.EmployeeId }, null)
</b>);
}
)
</div>
@section Scripts {
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
}
When executed, this will generate a table like this,
Download the source and see it in action!