This post walks you through creating a UI for paging, sorting and filtering a list of data items. It makes use of the excellent MVCContrib Grid and Pager Html UI helpers. A sample project is attached at the bottom. Our UI will eventually look like this. The application will make use of the Northwind database. The top portion of the page has a filter area region. The filter region is enclosed in a form tag. The select lists are wired up with jQuery to auto post back the form. The page has a pager region at the top and bottom of the product list. The product list has a link to display more details about a given product. The column headings are clickable for sorting and an icon shows the sort direction. Strongly Typed
View Models The views are written to expect strongly typed objects. We suffix these strongly typed objects with ViewModel since they are designed specifically for passing data down to the
view. The following listing shows the ProductViewModel. This class will be used to hold information about a Product. We use attributes to specify if the property should be hidden and what its heading in the table should be. This metadata will be used by the MvcContrib Grid to render the table. Some of the properties are hidden from the UI ([ScaffoldColumn(false)) but are needed because we will be using those for filtering when writing our LINQ query. public ActionResult Index(
string productName,
int? supplierID,
int? categoryID,
GridSortOptions gridSortOptions,
int? page)
{
var productList = productRepository.GetProductsProjected();
// Set default sort column
if (string.IsNullOrWhiteSpace(gridSortOptions.Column))
{
gridSortOptions.Column = "ProductID";
}
// Filter on SupplierID
if (supplierID.HasValue)
{
productList = productList.Where(a => a.SupplierID == supplierID);
}
// Filter on CategoryID
if (categoryID.HasValue)
{
productList = productList.Where(a => a.CategoryID == categoryID);
}
// Filter on ProductName
if (!string.IsNullOrWhiteSpace(productName))
{
productList = productList.Where(a => a.ProductName.Contains(productName));
}
// Create all filter data and set current values if any
// These values will be used to set the state of the select list and textbox
// by sending it back to the
view.
var productFilterViewModel = new ProductFilterViewModel();
productFilterViewModel.SelectedCategoryID = categoryID ?? -1;
productFilterViewModel.SelectedSupplierID = supplierID ?? -1;
productFilterViewModel.Fill();
// Order and page the product list
var productPagedList = productList
.OrderBy(gridSortOptions.Column, gridSortOptions.Direction)
.AsPagination(page ?? 1, 10);
var productListContainer = new ProductListContainerViewModel
{
ProductPagedList = productPagedList,
ProductFilterViewModel = productFilterViewModel,
GridSortOptions = gridSortOptions
};
return View(productListContainer);
}
The following diagram shows the rest of the key ViewModels in our design.
We have a container class called ProductListContainerViewModel which has nested classes.
The ProductPagedList is of type IPagination<ProductViewModel>. The MvcContrib expects the IPagination<T> interface to determine the page number and page size of the collection we are working with. You convert any IEnumerable<T> into an IPagination<T> by calling the AsPagination extension method in the MvcContrib library. It also creates a paged set of type ProductViewModel.
The ProductFilterViewModel class will hold information about the different select lists and the ProductName being searched on. It will also hold state of any previously selected item in the lists and the previous search criteria (you will recall that this type of state information was stored in Viewstate when working with WebForms). With MVC there is no state storage and so all state has to be fetched and passed back to the
view.
The GridSortOptions is a type defined in the MvcContrib library and is used by the Grid to determine the current column being sorted on and the current sort direction.
The following shows the
view and partial views used to render our UI. The Index
view expects a type ProductListContainerViewModel which we described earlier.
<%Html.RenderPartial("SearchFilters",
Model.ProductFilterViewModel); %>
<% Html.RenderPartial("Pager",
Model.ProductPagedList); %>
<% Html.RenderPartial("SearchResults", Model); %>
<% Html.RenderPartial("Pager",
Model.ProductPagedList); %>
The
View contains a partial
view “SearchFilters” and passes it the ProductViewFilterContainer. The SearchFilter uses this
Model to render all the search lists and textbox.
The partial
view “Pager” uses the ProductPageList which implements the interface IPagination. The “Pager”
view contains the MvcContrib Pager helper used to render the paging information. This
view is repeated twice since we want the pager UI to be available at the top and bottom of the product list. The Pager partial
view is located in the Shared directory so that it can be reused across Views.
The partial
view “SearchResults” uses the ProductListContainer
model. This partial
view contains the MvcContrib Grid which needs both the ProdctPagedList and GridSortOptions to render itself.
The Controller Action
An example of a request like this: /Products?productName=test&supplierId=29&categoryId=4. The application receives this GET request and maps it to the Index method of the ProductController.
Within the action we create an IQueryable<ProductViewModel> by calling the GetProductsProjected() method.
/// <summary>
/// This method takes in a filter list, paging/sort options and applies
/// them to an IQueryable of type ProductViewModel
/// </summary>
/// <returns>
/// The return object is a container that holds the sorted/paged list,
/// state for the fiters and state about the current sorted column
/// </returns>
public ActionResult Index(
string productName,
int? supplierID,
int? categoryID,
GridSortOptions gridSortOptions,
int? page)
{
var productList = productRepository.GetProductsProjected();
// Set default sort column
if (string.IsNullOrWhiteSpace(gridSortOptions.Column))
{
gridSortOptions.Column = "ProductID";
}
// Filter on SupplierID
if (supplierID.HasValue)
{
productList.Where(a => a.SupplierID == supplierID);
}
// Filter on CategoryID
if (categoryID.HasValue)
{
productList = productList.Where(a => a.CategoryID == categoryID);
}
// Filter on ProductName
if (!string.IsNullOrWhiteSpace(productName))
{
productList = productList.Where(a => a.ProductName.Contains(productName));
}
// Create all filter data and set current values if any
// These values will be used to set the state of the select list and textbox
// by sending it back to the
view.
var productFilterViewModel = new ProductFilterViewModel();
productFilterViewModel.SelectedCategoryID = categoryID ?? -1;
productFilterViewModel.SelectedSupplierID = supplierID ?? -1;
productFilterViewModel.Fill();
// Order and page the product list
var productPagedList = productList
.OrderBy(gridSortOptions.Column, gridSortOptions.Direction)
.AsPagination(page ?? 1, 10);
var productListContainer = new ProductListContainerViewModel
{
ProductPagedList = productPagedList,
ProductFilterViewModel = productFilterViewModel,
GridSortOptions = gridSortOptions
};
return View(productListContainer);
}
The supplier, category and productname filters are applied to this IQueryable if any are present in the request. The ProductPagedList class is created by applying a sort order and calling the AsPagination method. Finally the ProductListContainerViewModel class is created and returned to the
view.
You have seen how to use strongly typed views with the MvcContrib Grid and Pager to render a clean lightweight UI with strongly typed views. You also saw how to use partial views to get data from the strongly typed
model passed to it from the parent
view. The code also shows you how to use jQuery to auto post back.
The sample is attached below. Don’t forget to change your connection string to point to the server containing the Northwind database.
NorthwindSales_MvcContrib.zip
My name is Kobayashi. I work for Keyser Soze.
