This post looks at how to control paging, sorting and filtering when displaying a list of data by specifying attributes in your Model using the ASP.NET MVC framework and the excellent MVCContrib library.
Please see this post for a way of rendering the UI without using custom Sorting and Filtering attributes.
It also shows how to hide/show columns and control the formatting of data using attributes.
This uses the Northwind database. A sample project is attached at the end of this post.
Let’s start by looking at a class called ProductViewModel. The properties in the class are decorated with attributes.
- The OrderBy attribute tells the system that the Model can be sorted using that property.
- The SearchFilter attribute tells the system that filtering is allowed on that property. Filtering type is set by the FilterType enum which currently supports Equals and Contains.
- The ScaffoldColumn property specifies if a column is hidden or not
- The DisplayFormat specifies how the data is formatted.
public class ProductViewModel
{
[OrderBy(IsDefault = true)]
[ScaffoldColumn(false)]
public int? ProductID { get; set; }
[SearchFilter(FilterType.Contains)]
[OrderBy]
[DisplayName("Product Name")]
public string ProductName { get; set; }
[OrderBy]
[DisplayName("Unit Price")]
[DisplayFormat(DataFormatString = "{0:c}")]
public System.Nullable<decimal> UnitPrice { get; set; }
[DisplayName("Category Name")]
public string CategoryName { get; set; }
[SearchFilter]
[ScaffoldColumn(false)]
public int? CategoryID { get; set; }
[SearchFilter]
[ScaffoldColumn(false)]
public int? SupplierID { get; set; }
[OrderBy]
public bool Discontinued { get; set; }
}
Before we explore the code further, lets look at the UI.
The UI has a section for filtering the data. The column headers with links are sortable. Paging is also supported with the help of a pager row. The pager is rendered using the MVCContrib Pager component. The data is displayed using a customized version of the MVCContrib Grid component. The customization was done in order for the Grid to be aware of the attributes mentioned above.
Now, let’s look at what happens when we perform actions on this page. The diagram below shows the process:
The form on the page has its method set to “GET” therefore we see all the parameters in the query string. The query string is shown in blue above. This query gets routed to an action called Index with parameters of type ProductViewModel and PageSortOptions.
The parameters in the query string get mapped to the input parameters using model binding. The ProductView object created has the information needed to filter data while the PageAndSorting object is used for paging and sorting the data.
The last block in the figure above shows how the filtered and paged list is created.
We receive a product list from our product repository (which is of type IQueryable) and first filter it by calliing the AsFiltered extension method passing in the productFilters object and then call the AsPagination extension method passing in the pageSort object.
The AsFiltered extension method looks at the type of the filter instance passed in. It skips properties in the instance that do not have the SearchFilter attribute. For properties that have the SearchFilter attribute, it adds filter expression trees to filter against the IQueryable data.
The AsPagination extension method looks at the type of the IQueryable and ensures that the column being sorted on has the OrderBy attribute. If it does not find one, it looks for the default sort field [OrderBy(IsDefault = true)]. It is required that at least one attribute in your model has the [OrderBy(IsDefault = true)]. This because a person could be performing paging without specifying an order by column. As you may recall the LINQ Skip method now requires that you call an OrderBy method before it. Therefore we need a default order by column to perform paging. The extension method adds a order expressoin tree to the IQueryable and calls the MVCContrib AsPagination extension method to page the data.
Implementation Notes
Auto Postback
The search filter region auto performs a get request anytime the dropdown selection is changed. This is implemented using the following jQuery snippet
$(document).ready(function () {
$("#productSearch").change(function () {
this.submit();
});
});
Strongly Typed View
The code used in the Action method is shown below:
public ActionResult Index(ProductViewModel productFilters, PageSortOptions pageSortOptions)
{
var productPagedList = productRepository.GetProductsProjected().AsFiltered(productFilters).AsPagination(pageSortOptions);
var productViewFilterContainer = new ProductViewFilterContainer();
productViewFilterContainer.Fill(productFilters.CategoryID, productFilters.SupplierID, productFilters.ProductName);
var gridSortOptions = new GridSortOptions { Column = pageSortOptions.Column, Direction = pageSortOptions.Direction };
var productListContainer = new ProductListContainerModel
{
ProductPagedList = productPagedList,
ProductViewFilterContainer = productViewFilterContainer,
GridSortOptions = gridSortOptions
};
return View(productListContainer);
}
As you see above, the object that is returned to the view is of type ProductListContainerModel. This contains all the information need for the view to render the Search filter section (including dropdowns), the Html.Pager (MVCContrib) and the Html.Grid (from MVCContrib). It also stores the state of the search filters so that they can recreate themselves when the page reloads (Viewstate, I miss you! :0)
The class diagram for the container class is shown below.
Custom MVCContrib Grid
The MVCContrib grid default behavior was overridden so that it would auto generate the columns and format the columns based on the metadata and also make it aware of our custom attributes (see MetaDataGridModel in the sample code).
- The Grid ensures that the ShowForDisplay on the column is set to true
- Column headers are set using the DisplayName attribute
- Column sorting is set using the OrderBy attribute.
- The data is formatted using the DisplayFormat attribute.
Generic Extension methods for Sorting and Filtering
The extension method AsFiltered takes in an IQueryable<T> and uses expression trees to query against the IQueryable data. The query is constructed using the Model metadata and the properties of the T filter (productFilters in our case). Properties in the Model that do not have the SearchFilter attribute are skipped when creating the filter expression tree. It returns an IQueryable<T>.
The extension method AsPagination takes in an IQuerable<T> and first ensures that the column being sorted on has the OrderBy attribute. If not, we look for the default OrderBy column ([OrderBy(IsDefault = true)]). We then build an expression tree to sort on this column. We finally hand off the call to the MVCContrib AsPagination which returns an IPagination<T>.
This type as you can see in the class diagram above is passed to the view and used by the MVCContrib Grid and Pager components.
Custom Provider
To get the system to recognize our custom attributes, we create our MetadataProvider as mentioned in this article (http://bradwilson.typepad.com/blog/2010/01/why-you-dont-need-modelmetadataattributes.html)
protected override ModelMetadata CreateMetadata(IEnumerable<Attribute> attributes, Type containerType, Func<object> modelAccessor, Type modelType, string propertyName)
{
ModelMetadata metadata = base.CreateMetadata(attributes, containerType, modelAccessor, modelType, propertyName);
SearchFilterAttribute searchFilterAttribute = attributes.OfType<SearchFilterAttribute>().FirstOrDefault();
if (searchFilterAttribute != null)
{
metadata.AdditionalValues.Add(Globals.SearchFilterAttributeKey, searchFilterAttribute);
}
OrderByAttribute orderByAttribute = attributes.OfType<OrderByAttribute>().FirstOrDefault();
if (orderByAttribute != null)
{
metadata.AdditionalValues.Add(Globals.OrderByAttributeKey, orderByAttribute);
}
return metadata;
}
We register our MetadataProvider in Global.asax.cs.
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RegisterRoutes(RouteTable.Routes);
ModelMetadataProviders.Current = new MvcFlan.QueryModelMetaDataProvider();
}
Bugs, Comments and Suggestions are welcome!
You can download the sample code below.
This code is purely experimental. Use at your own risk. Please see this post for a way of rendering the UI without using custom Sorting and Filtering attributes.
Download Sample Code (VS 2010 RTM)