Step By Step How to create a Nested WebGrid in MVC 4 in 10 minutes

In this tutorial we'll learn how to create a WebGrid nested inside another Webgrid with paging capabilities in MVC 4 in 10 minutes. The parent WebGrid will expose data dynamically loaded from database and will contain another WebGrid exposing another list of data represented by a one to many relationship.

The parent grid will display a list of Blog posts, while the nested webgrid will display the comments attached to each post.

We'll want to create a parent-child relationship between two webgrids , showing as follows:

This tutorial will use data fetched from the Entity Framework, exposing the following classes related by a one-to-many relationship:

To create the WebGrids we must create our own View, and it will not be difficult if we take advantage of the Scaffolding capacities of the MVC environment. So first let's create a new Controller called "BlogController", automatically scaffolding the necessary Views to cope with the CRUD functionality requirements. So right click over the Controllers folder, and add a new Controller:

Name it "BlogController", and select the template "MVC Controller with read/write actions and views, using Entity Framework":

The Context to use will be of course the one you named while creating your Entity Framework Data Model, and the Model will be the Blog class, because we'll be creating, updating and deleting Blog objects.
After you create the Controller, open it and take a look at the Action Methods created for you: there are action methods for displaying the list of Blog posts (Index method), to create new ones , to update them, and to delete:

Open the Views folder and see the Views that were created for you:

First of all, let's add a link to the _Layout .cshtml file Menu, in order to browse to the Blog web page from the Home page:

As you see, we got all CRUD functionality. But now we want a WebGrid with paging-sorting capabilities,  instead of a table. So we'll replace the <TABLE> with an WebGrid Html Helper: open the Index View:

And comment the whole  <table> tag:

Next, we'll instantiate a WebGrid, using an overload of the constructor method, and we'll set as its arguments the data included in the Model (an IEnumerable<Blog>), and the <div> tag to be updated when ajax calls in case you need to include links or buttons in your webgrids:

Now we display the markup of the WebGrid using the GetHtml() WebGrid method:

Notice we formatted all the fields we need, in order to properly display the dates and pictures. We also add the style to the grid (the CSS stylesheet will be added afterwards).
Now is time to add the nested gridview, in an appended column which we call "Comments":

In this details child gridview, we displayed the comments for each post, and also we formatted it with some CSS style.
The two grids, parent and child, are inside a <div> tag for ajax purposes, and will finally look as follows:

Add a new .css stylesheet file to the "Contents" folder:

Name the .css as GridStyle:

In the stylesheet we include all the style for the WebGrid, footer, header, hyperlinks, even the style for displaying adecuately the pictures:

The code (to copy-paste) is the following:

        .webgrid-table
        {
            font:italic 11px Verdana;
            width: 100%;
            display:grid;
            border-collapse: separate;
            border: solid 1px #98BF21;
            background-color: #f0c9a0;
            padding: 5px 5px 5px 5px;
        } 
        .webgrid-header
        {
            background-color: #c67f1c !important;
            color: #FFFFFF !important;
            font: 900 14px Verdana !important;
            padding:5px 5px 5px 5px;            
            text-align: center;
            
        }
        .details-div
        {
            background-color: #c67f1c !important;
            color: #FFFFFF !important;
            font: 900 14px Verdana !important;
            padding:5px 5px 5px 5px;
            text-align: center;
            
        }
        .SecondaryGrid
        {
            background-color: #c67f1c !important;
            color: #000 !important;
            font: 600 11px Verdana !important;
            padding:5px 5px 5px 5px;
            text-align: center;
            width:180px;
        }
        .webgrid-footer, .webgrid-footer a
        {
            background-color: #c67f1c;
            color: #FFF;
            font: 900 14px Verdana;
            padding:3px 3px 3px 3px;
        }
        .webgrid-alternating-row
        {
            background-color: #e5d773;
            padding:5px 5px 5px 5px;
        }
        .title-column
        {
            font:900 13px Verdana;
            text-align:center;
        }
        .webgrid-img
        {
            width: 150px;
            height: 150px;
        }

Finally we add a <link> tag in the _Layout file, to include the .css in the Index View:

Buid (F6) and run your app (CTL-F5) , to get this presentation UI:

Notice that you can do paging:

In this tutorial we've learned how to create a WebGrid nested inside another Webgrid with paging capabilities in MVC 4 in 10 minutes, exposing data dynamically loaded from database and sent by the Action method from the web server.  
That's all!! 
Happy programming.....
        By Carmel Schvartzman

כתב: כרמל שוורצמן