Step by Step how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View

        By Carmel Shvartzman

In this tutorial we'll learn how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View  . The parental Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer CRUD (Create Retrieve Update Delete) functionality. Also, the Grid will send Ajax requests for paging, sorting and displaying related data in a Details <TABLE>  grid.

The Details WebGrid will fetch the Comments for the selected Posts, and will be served by a Child Action, where we could insert some Application logic and filter the data.
The webgrid will also redirect the user to another web page exposing all comments for a selected Post, web page which will use the same Partial View we're Ajax rendering in the Index web page as a Details table.
We'll want to create a Master-Details webgrid with CRUD functionality , showing as follows:

The style you see comes from a free CSS Template, that can be easely added to your application, as we already explained in this tutorial.

This tutorial will use data fetched from the Entity Framework, exposing the following classes:

For each Blog Post selected in the Master webgrid, we'll display all the related Comments in a subsidiary Details grid.

To create the Master WebGrid 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 creating 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 inside the _Layout .cshtml file Menu, in order to browse to the Blog web page from the Home page:

We also add the Scripts.Render calls at the <header> of the _Layout file, in order to load the necessary jquery and CSS files:

Delete the @Scripts.Render("~/bundles/jquery") from the <footer> of the file:

If you want to perform more Ajax calls using @Ajax.ActionLink() , add also a reference to the "jqueryval" bundle: @Scripts.Render("~/bundles/jqueryval") :

Next, we'll need two new Actions in the Blog Controller:
1) a Comments Action method: for rendering the _PostComments template as a View
      at the url "/Blog/Comments/{ID}". You don't need to create a View for this Action method:

2) a DetailsGridComments Child Action method: for rendering the _PostComments  template as a Partial View while performing an Ajax call:

To create the Partial View, open the View's dialog and type the following:

Keep in mind we will use this Partial View as such, inside the Index View, and also as a regular View as the "Comments" View .
Inside the Partial View we got, there are two code areas automatically created, but which we don't need: the "Create" link and the "Edit" buttons, so delete it:

Also, customize the <table> as follows :

We want a WebGrid with paging-sorting capabilities,  instead of a table. So we'll replace the <TABLE> ta g at the Index file 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 extension method with the following parameters:

Back to the Index View,  create a <DIV> enclosure for the WebGrid to be Ajax replaced, and type the final code for the WebGrid  setting as its arguments the data included in the Model, the number of rows to display in each page (2) , and the container to be updated by the Ajax requests :

@{
    ViewBag.Title = "Index";
    WebGrid grid = new WebGrid(Model, rowsPerPage: 2, ajaxUpdateContainerId: "gridDIV");
}

Now we display the markup of the WebGrid using the GetHtml() WebGrid method,  and formatting the   picture field. Also we set the "BlogID" column as the one acting as the SELECTOR that will be clicked by the user in order to Ajax-load all related Comments:

Also, we set the other three columns as hyperlinks to take the user to a "Comments" web page exposing all the comments for a selected Post. We do that using the "format:" parameter, in two ways:
1) we render directly the markup with the <a> tag
2) we return an MvcHtmlString object representing the hyperlink, and enclosing the picture: clicking the    picture will take the user to the "Comments" web page:

We automatically got the paging and sorting WebGrid functionalities. We also got all CRUD functionality that was there before: deleting, editing , and so, by copying the CRUD block that you commented before(inside the <table> tag):

Now return to the Index View, to add the code that will display the Partial View. What we do is to check that some row has been selected in the WebGrid, and then we fetch the selected row, in order to get the ID of the chosen Post.
If the row is not null, we send that ID to a Child Action using the RenderAction() function and that way we got all related comments for that post:

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

<div id="gridDIV">
@{
     
    @grid.GetHtml(columns: new[] {

        grid.Column("ID",format:(item) =>  item.GetSelectLink(item.BlogID.ToString()) ) ,
        grid.Column("Title",format:@<a href='/Blog/Comments/@item.BlogID'><b>@item.Title</b></a>),
        grid.Column("Text",format:@<a href='/Blog/Comments/@item.BlogID'><i>@item.Text</i></a>),
        grid.Column("Picture",format:(item) =>
        { return new MvcHtmlString("<a href='/Blog/Comments/" + item.BlogID +
            "'><img src='/Images/"+item.MainPicture+"' style='width:100px;height:100px;'></img></a>");
        }),
 
        grid.Column(format:@<td>
            @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })
            @Html.ActionLink("Details", "Details", new { id=item.BlogID })
            @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })
        </td>)
    })
    if (grid.HasSelection )
    {
        MvcApplication1.Models.Blog post = grid.Rows[grid.SelectedIndex].Value;
        Html.RenderAction("DetailsGridComments", new { id = post.BlogID });
    }
     
}
</div>

Notice that we get the VALUE of the selected row as a "Blog" object and NOT as a WebGridRow. Save the project and refresh the browser:

Notice that you got all Paging-Sorting functionalities in an Ajax enabled mode. Now , if you click the ID field you get all the Comments as Ajax request:

We got all the Comments for that post. Now let's try the other Hyperlinks we added, clicking for example the Title or the Picture of some Post:

We are then redirected to the Comments web page, to see all Comments for the selected Post:

In this tutorial we've learned how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View .  
That's all!! 
Happy programming.....

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