CRUD Operations Using MVCContrib Grid with ASP.NET MVC 5 and Entity Framework 6

In my previous article I discussed about create CRUD operation using Scaffolding with ASP.NET MVC 5 and database first approach using ASP.NET MVC 5 and Entity Framework 6 and model first approach using ASP.NET MVC 5 and Entity Framework 6

In this article I am going to discuss how to bind data from database to MVCContrib Grid. The MVCContrib Grid component provides a strongly-typed way to build an HTML table using a fluent interface and lambda expressions. The MVCContrib Grid belongs to MvcContrib.UI.Grid namespace and can be accessed by calling the Html.Grid extension method. Basically MVCContrib Grid is used to display data on a web page using HTML table elements. It renders data in tabular format and also supports custom formatting of columns, paging and sorting. Grid is very useful and powerful tool to present data in tabular manner with look and feel.

ASP.NET MVC does not have any built in data binding controls like GridView, DetailsView etc. MVCContrib Grid provides good alternative for GridView control that provides strongly-typed way to build an HTML table. MVCContrib Grid has similar functionality like other data binding controls provides like sorting, paging, column formatting etc. MVCContrib Grid makes developers life easy and saves there time rather he has to write code to display data in tabular manner.

In order to start our sample application we will need database table, entity and DBContext classes to fetch the data from database. In this article I am not covering steps those are already covered in my previous article. If you did not read, please refer database first approach using ASP.NET MVC 5 and Entity Framework 6 and follow Step 1 to Step 16 it will help you to understand this article.

Step 1: Before going to start, we will need to add "MVCContrib" packages that will help us to display data in Grid format. All right, right click on project or go to "Tool" menu and select "Library Package Manager" and then select "Manage NuGet Package for Solution..." option.

Step 2: Now, search for "MVCContrib" and select "MVCContrib" from list and clicks on "Install" button. See below screen shot:

Step 3: Select MVC 5 empty controller, rename controller name as "EmployeeController". Click on "Add" button.

Step 4: Now add below code to controller class. The below code will send list of "Employee" object to view.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCContribGrid.Models;

namespace MVCContribGrid.Controllers
{
    public class MVCContribController : Controller
    {
		MVCContribModel db = new MVCContribModel();
        public ActionResult Index()
        {
            return View(db.Employees.ToList());
        }
	}
}

Step 5: Now right click on "Index" action method, select "Add View" and select "Empty" template from dropdown. To build view we will need to specify model class as "Employee" and data context class as "EmployeeDBContext" as below screen shot illustrate. Click "Add" button. This will add IEnumerable Employee object in view page as below.

Also you will need to add "MvcContrib.UI.Grid", "MvcContrib.UI.Pager" and "MvcContrib.Pagination" namespaces as below code snippet:

@model IEnumerable<MVCContribGrid.Models.Employee>
@using MvcContrib.UI.Grid;
@using MvcContrib.UI.Pager;
@using MvcContrib.Pagination;

Step 6: MvcContrib Grid - Automatically Generated Columns
The "AutoGenerateColumns" method of MvcContrib Grid automatically create columns for you, without specifying column names. If you have dedicated viewmodel with your view, then the AutoGenerateColumns method can be used to automatically generate columns for each public property on your viewmodel rather than having to explicitly specify each column. See below code snippet:

@Html.Grid(Model).AutoGenerateColumns()

Step 7: MvcContrib Grid - Add Additional Column
You can add additional column after automatically generated columns by calling the "AutoGenerateColumns" method. Also you can re-arrange the additional column by calling "InsertAt(index)" method. See below code snippet:

@Html.Grid(Model).AutoGenerateColumns().Columns(extraCols => {
	extraCols.For(x => Html.ActionLink("View Details", "Show", new { id = cust.Id })
	.InsertAt(0);
})

Step 8: MvcContrib Grid - Sorting
To enable sorting, you need to add GridSortOptions object as parameter in your controller "Index" action also add below code in "Index" action method:

@Html.Grid(Model).AutoGenerateColumns().Sort((GridSortOptions)ViewData["sort"])

public ActionResult Index(GridSortOptions sort)
{
	IEnumerable emp;
	if (sort.Column == null) sort.Column = "Name";
	if(sort.Direction.ToString().ToLower() == "descending")
		emp = db.Employees.AsEnumerable()
		.OrderByDescending(i => i.GetType().GetProperty(sort.Column)
		.GetValue(i, null));
	else
		emp = db.Employees.AsEnumerable().OrderBy(i => i.GetType()
		.GetProperty(sort.Column)
		.GetValue(i, null));

	ViewData["sort"] = sort;
	return View(emp);
} 

Step 9: MvcContrib Grid - Paging
In order to render paging links on the page, you can make use of the Html.Pager extension method which is in the MvcContrib.UI.Pager namespace. See below code snippet:

@model IPagination
@using MvcContrib.UI.Grid;
@using MvcContrib.Pagination;
@using MvcContrib.UI.Pager;
@using MvcContrib.Sorting;

<div id="pager">
    @Html.Pager((IPagination)Model) 
</div>
<p>
    @Html.ActionLink("Create New", "Create")
    @Html.Grid(Model).AutoGenerateColumns().Sort((GridSortOptions)ViewData["sort"])
   
</p>

The MvcContrib Grid does not perform any paging internally but it you can be used to render pre-paged data. To enable this, you'll need to take an additional argument for your controller action called "page":

public ActionResult Index(GridSortOptions sort, int? page)
{
	IPagination emp = null;
  
	if (sort.Column == null) sort.Column = "Name";
	if (sort.Direction.ToString().ToLower() == "descending")
		emp = db.Employees.AsEnumerable()
		.OrderByDescending(i => i.GetType().GetProperty(sort.Column).GetValue(i, null))
		.AsPagination(page ?? 1, 2);
	else
		emp = db.Employees.AsEnumerable()
		.OrderBy(i => i.GetType().GetProperty(sort.Column).GetValue(i, null))
		.AsPagination(page ?? 1, 2);

	ViewData["sort"] = sort;
	return View(emp);
}

Step 10: MvcContrib Grid Applying Style to Rows and Columns
In order to apply custom theme or CSS style to MvcContrib Grid you need to create css classes first and set respective properties of the MvcContrib Grid. See below code snippet and screen shot:

<style type="text/css">
     .grid {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 14px;
        font-weight: normal;
        width: 650px;
        display: table;
        border-collapse: collapse;
        border: solid 1px #C5C5C5;
        background-color: white;
    }

        .grid td, th {
            border: 1px solid #C5C5C5;
            padding: 3px 7px 2px;
        }

        .grid thead, .header a {
            background-color: #0094ff;
            color: #ffffff;
            text-align: left;
            text-decoration: none;
        }

    .grid-row-style {
        padding: 3px 7px 2px;
    }

    .grid-alternating-row {
        background-color: azure;
        padding: 3px 7px 2px;
    }

    .col1Width {
        width: 55px;
    }

    .col2Width {
        width: 220px;
    }
</style>

Step 11: All right, our sample ASP.NET MVC 5 MvcContrib Grid application is ready to fly. Run the application. It will show as below screen shot:

Appreciate your valuable feedback:

I hope this article is useful for you. I look forward for your comments and feedback. So please provide your valuable feedback so that I can make this blog better. You can also share this article by hitting below button.
Happy learning...