WebGrid with filtering, paging and sorting

WebGrid with filtering, paging and sorting

by Jose M. Aguilar on April 24, 2012 in Web Development

A few days ago I received some questions on the use of the Webgrid helper in the comments section of my personal blog, specifically on how to implement custom filters on the data displayed. Since it’s not easy to answer through the comments section, I have forced myself to write an article on it. Here it is.

The main obstacle here is that WebGrid doesn’t include any kind of tool to perform this frequent task. It simply displays the data we provide, and if we want to filter we have to do it manually. In theory, it would be enough to just to supply the Controller the filters we want to apply. Then the Controller queries the info from the Model following the criteria set.

However, something that may seem relatively simple gets harder if we want to also keep the sort order and paging capabilities untouched because we have to arrange for state maintenance between requests as well. Well, this is something we can solve in a few minutes ;-)

Starting out from the project developed in this post of the series on Webgrid, let’s see how we can add a couple of search criteria to the grid, so it can appear to be this way:

The text field enables us to look for substrings in the names and surnames of the people stored in the database, and the other two fields allow to filter by range (min-max) the children they have. As usual, we’ll combine these conditions with a logic AND.

1. The View

First, we enter the form we are going to use to request the user the search criteria in the view, right before generating the grid:

The code is as follows:

@using(Html.BeginForm(null, null, FormMethod.Get))
{
    <fieldset>
        <legend>Search criteria</legend>
        @Html.Label("search", "Text:")
        @Html.TextBox("search") 
        @Html.Label("minChildren", "Children min:")
        @Html.TextBox("minChildren", null, new { @class="num" }) 
        @Html.Label("maxChildren", "Children max:")
        @Html.TextBox("maxChildren", null, new { @class="num"} )
        <input type="submit" value="Apply" />
    </fieldset>
}

Notice the simplicity of the form. We don’t even have to use the lambda syntax in the edit helpers. We generate the controllers starting out from the fields whose values will be in the query string (and not from the Model, which is the usual thing to do). For this reason, notice that the form is set to be sent using the HTTP GET method.

This way we can propagate easily the values of the controls (textbox) between calls:

• if the user enters criteria and clicks the send button, the URL the request is performed on will be, for instance, /friends/index?search=aguilar&minChildren=1&maxChildren=4.
• if the user uses the grid’s navigation buttons (next/previous page, go to page, or reorder), these parameters will be added to the previous ones, and therefore they preserve their values between the different calls. This is because Webgrid generates the links to these actions preserving the current query string parameters. In other words, if we are filtering and we go to page 4, we access an address that includes both the search criteria info as well as the paging, something like: /friends/index?search=aguilar&minChildren=1&maxChildren=4&page=4.

And by doing so, we the view layer is finished.

2. The controller

The action method in charge of getting the grid data and sending the view with the data to the user receives three parameters: current page, sort order field and its direction (ascending/descending).

Since now we have to get the sort order criteria, we have to extend its definition adding parameters for these values:

public ActionResult Index(int page = 1, string sort = "surname", 
                          string sortDir = "ASC", string search = null, 
                          int? minChildren = null, int? maxChildren = null)

See how all the parameters are optional, and we set them to null to easily detect when they come filled.

And at which point do we need to use these new parameters? Only in two:

• in the call we make to the Model to count the total amount of grid rows. We have to inform the grid on the filtering criteria so the counting is performed properly.
• in the call we make to the Model to get the rows to be displayed in the current page, where we obviously have to take into account the filters.

The action is results somewhat like this:

public ActionResult Index(int page = 1, string sort = "surname", 
                          string sortDir = "ASC", string search = null,
                          int? minChildren = null, 
                          int? maxChildren = null)
{
  var friendsCount = _services.GetFriendsCount(search, minChildren, maxChildren);
  var friends = _services.GetFriendsPage(page, FRIENDS_PER_PAGE, sort, sortDir,
                                               search, minChildren, maxChildren);

  var data = new FriendsPageViewModel()
                 {
                     NumberOfFriends = friendsCount,
                     FriendsPerPage = FRIENDS_PER_PAGE,
                     Friends = friends
                 };

  return View(data);
}

And this is all in the comtroller.

3. The Model

And at last, now in the Model, we have to make the methods used from the controller (GetFriendsCount and GetFriendsPage) take into account the parameters in which we indicate the search conditions.

In the first one, we simply return the number of people which follow the criteria returned as parameters:

public int GetFriendsCount(string searchText = null, int? minChildren = null, 
                           int? maxChildren = null)
{
    IQueryable<Friend> query = _data.People;
    query = filterPeople(searchText, minChildren, maxChildren, query);
    return query.Count();
}

The helper method filterPeople() we use is only in charge of adding the where clauses to the query that we need to take into account the specified conditions:

private static IQueryable<Friend> filterPeople(
                    string searchText, int? minChildren, 
                    int? maxChildren, IQueryable<Friend> query)
{
    if (!string.IsNullOrWhiteSpace(searchText))
        query = query.Where(p => p.Name.Contains(searchText) 
                                 || p.Surname.Contains(searchText));
    if (maxChildren != null)
        query = query.Where(p => p.Children <= maxChildren);
    if (minChildren != null)
        query = query.Where(p => p.Children >= minChildren);
    return query;
}

At last, we implement the method that obtains the data to display on the current page:

public IEnumerable<Friend> GetFriendsPage(int currentPage, int friendsPerPage, 
                                          string sortColumn, string sortDir, 
                                          string searchText, int? minChildren, 
                                          int? maxChildren)
{
    // Validate input data
    sortDir = sortDir.Equals("desc", StringComparison.CurrentCultureIgnoreCase) ? 
                      sortDir : "asc";

    var validColumns = new[] { "surname", "birthdate", "email", "children" };
    if (!validColumns.Contains(sortColumn.ToLower()))
        sortColumn = "surname";

    if (currentPage < 1) currentPage = 1;
    if (friendsPerPage < 1) friendsPerPage = 10;

    // Create the query
    var query = (IQueryable<Friend>)_data.People
                .OrderBy("it." + sortColumn + " " + sortDir);

    query = filterPeople(searchText, minChildren, maxChildren, query);

    return query
            .Skip((currentPage - 1) * friendsPerPage)
            .Take(friendsPerPage)
            .ToList();
}

There is not much to say about this code. In first place, a basic check of the entry parameters is performed, and then generate the query to be performed on the database. As you can see, the Como podéis observar, the queryPeopleFiltered() method is performed to apply the query criteria.

Summarizing…

As we have seen, implementing search criteria in Webgrid doesn’t differ much from what we have described earlier on in my other posts about WebGrid. We just have take into account the following points:

• firstly, include a form in the View where the query criteria is collected in order to send it to the controller.
• secondly, prepare the Controller so it can receive this criteria and make it reach the Model.
• thirdly, in the Model, simply apply this criteria when countimg the total amount of rows, and when obtaining the data to be displayed in the grid page.

Here you can download the example code for this post.