Step by Step how to create a WebGrid with Grouping functionality

In this tutorial we'll learn how to create a WebGrid with Grouping support and JQuery UI Accordion enhancement. The Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer Grouping functionality in the shape of a JQueryUI Accordion.

We'll want to create a webgrid with Grouping functionality , showing as follows:

Let's say you have two related tables, connected by a ONE-TO-MANY relationship as follows:

For the sake of Grouping, we'll create an "Intersection Entity" that represents an INNER JOIN between the tables:

As you see, the new Entity just joins the records of the 2 tables. After you built that class in the Model's folder, create a new Controller:

Inside the Controller, code an Action method which JOINS the two tables in an anonymous class:

Then, for each record you fetch, create an Intersection Entity record as well:

public ActionResult Index()
        {
            List<PostComments> comments = new List<PostComments>();
            using (BlogEntities ctx = new BlogEntities())
            {
                var list = (from p in ctx.Blogs
                            join c in ctx.Comments
                            on p.BlogID equals c.BlogID
                            select new
                            {
                                p.BlogID,
                                PostTitle = p.Title,
                                p.MainPicture,
                                c.CommentID,
                                CommentTitle = c.Title,
                                c.Text
                            }
                        ).ToList();
                foreach (var item in list)
                {
                    comments.Add(new PostComments(item.BlogID, item.PostTitle,
                        item.MainPicture, item.CommentID, item.CommentTitle, item.Text));
                }
            }
            return View(comments);
        }

Next, add a View to display the List<>:

Inside the View, add a <div> and an FOREACH clause which runs over a GROUP BY some relevant DISTINCT field, such as the Title :

As you can see, for EACH different Post, we create a <TABLE> with the Title and the Picture of it. And then, we add ANOTHER bucle which appends a new row to the table, for each Comment the Post has:

The whole Grid markup should appears as follows:

<div id="divPosts">
    @{
        foreach (var post in Model.GroupBy(p => p.PostTitle).Select(p => p))
        {
        <h1>@post.Key </h1>
        <div>
            <table>
                <tr>
                    <th>Title </th>
                    <th>Comment </th>
                    <th><img src="Images/@post.First().Image" /></th>
                   
                </tr>
                @foreach (var comment in @post)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentTitle)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentText)
                        </td>                      
                        <td>
                            @Html.ActionLink("Edit", "Edit" )
                            @Html.ActionLink("Details", "Details" )
                            @Html.ActionLink("Delete", "Delete" )
                        </td>
                    </tr>
                }
            </table>
        </div>
        }
    }
</div>

Now, as you can see, we put each GROUP inside a new <div> nested inside an outer <div>. This is for using the Accordion: add the following <script>:

<style>
    th {
        text-align: center;
    }
    td img, th img {
        width:100px;height:100px;
    }
</style>
<script>
    $(function () {
        $("#divPosts").accordion({
            heightStyle: "content"
        });
    });
</script>

Also, we'll need some CSS to properly display the data. We added an JQuery UI Theme to the bundles in the App_Start BundleConfig.cs file:

Of course, we load those CSS files and JQUERY scripts in our _Layout file:

Build and launch the web app, to see the following display:

The user can see the different Posts with its respective Comments, clicking the Accordion titles:

That's all!! 

In this tutorial we've learn how to create a WebGrid with Grouping functionality and JQuery UI Accordion enhancements.  

Happy programming.....
        By Carmel Schvartzman

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