Grouping Gridview in MVC 4

Introduction

In this post, I explain how to Group data in Gridview using MVC. Sometimes we need to show group data in our MVC Application like show List of State group by Country. Here I have done this using MVC 4. Steps are given below:-

For ASP.Net Developer visit: Grouping Gridview in C#.Net.

Prerequisite

I used followings:

.Net framework 4.0
Entity Framework
SQL Server 2008

Steps :

Just follow the steps and get result easily.

Step - 1 : Create New Project

Go to File > New > Project > Select asp.net mvc4 web application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create two tables and insert data for show grouped data in Gridview

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have created two table 1. CountryMaster 2. StateMaster.
Create the table and insert data for Show in grouped gridview.

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Creare a ModelView

Here in this example, I need a ViewModel for getting data as a single entity.
Add a Folder(ViewModel) into your project root directory. > Right Click on the folder > Add > Class > Enter Class name > Add.
Write the following code to your class.

public class CountryState
{
    public int CountryID { get; set; }
    public string CountryName { get; set; }
    public int StateID { get; set; }
    public string StateName { get; set; }
}

STEP-6: Add Action For Populate Data.

Go To Controller > Add your action > write the following the code and Rebuild your application.

public ActionResult Gridview()
{
    List<CountryState> StateList = new List<CountryState>();
    using (CountryStateEntities dc = new CountryStateEntities())
    {
        var v = (from a in dc.CountryMasters
                    join b in dc.StateMasters on a.CountryID equals b.CountryID
                    select new
                    {
                        a.CountryID,
                        a.CountryName,
                        b.StateID,
                        b.StateName
                    });
        foreach (var i in v)
        {
            StateList.Add(new CountryState
            {
                CountryID = i.CountryID,
                CountryName = i.CountryName,
                StateID = i.StateID,
                StateName = i.StateName
            });
        }
    }
    return View(StateList);
}

Step-7: Add View for show data on a page.

Right Click on your Action > Add View > Enter View name > Check Create a strongly-type view > Select your model class > Select Scaffold templete > Select list > Add.

Modify Your View as follow

@model IEnumerable<MVCGridviewGrouping.ViewModel.CountryState>
@{
    ViewBag.Title = "Gridview";
}
<h2>Gridview Grouping</h2>
<div id="accordion">
    @{
        foreach (var item in Model.Select(a => a.CountryName).Distinct())
        {
            <h3>Country : @item</h3>
            <div>
                 <table cellspacing="10">
                        <tr>                           
                            <th>
                               State ID
                            </th>
                            <th>
                                State Name
                            </th>
                            <th></th>
                        </tr>
                @foreach (var i in Model.Where(a=>a.CountryName.Equals(@item)))
                {
                       <tr>                            
                            <td>
                                @Html.DisplayFor(modelItem => i.StateID)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => i.StateName)
                            </td>
                            <td>
                                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                            </td>
                        </tr>
                }
                </table>
            </div>
        }
    }
</div>
      
<script language="javascript">
    $(function () {
        $("#accordion").accordion({
            heightStyle: "content"
        });
    });
</script>

Step-8: Modify your _Layout.cshtml view

Add some 2 js and 1 CSS file to _Layout.cshtml view

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/javascript" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

Remove Line

@Scripts.Render("~/bundles/jquery")

Complete Code Here _Layout.cshtml view

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/javascript" />
        <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            <li>@Html.ActionLink("Gridview Grouping","GridView","Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>      
        @RenderSection("scripts", required: false)
    </body>
 
</html>

Step-9: Run Application

Look Result show in your browser.