Thursday, March 6, 2014

ASP.Net Web API + OData + $inlinecount

So, I had a nice single page application querying data from a Web API backend. As I wanted to allow searching and paging, I used the OData extensions and all was well. Until I needed to know the total number of items in the dataset after having it filtered using $filter, $top and $skip. At the time, I didn't find any easy way to do it, so I implemented a second query to the API to return the total number of items. Problem is, this second query returned the total number of items and didn't take into account any filtering I had applied in the OData query (using $filter). I let that dormant for a while...

Then came the need to have a nice navigation footer, and I used this component: http://botmonster.com/jquery-bootpag/

This component just needs to know the number of pages and at which page it currently is. But then again, we need to know the number of items to know the number of pages to display. Back at square one ;-)

I looked for ways to implement this once again and found more info this time (technology matured or better search query in Google?). Some articles suggested to force the verbose mode of OData (by using "&$format=verbosejson" or adding an accept header with a value of "application/json;odata=verbose"), to no avail. I would always receive an array with the X items I requested using the $top parameter and nothing else.

Until I came across these 2 posts on SO:
http://stackoverflow.com/questions/18428763/web-api-odata-inlinecount-not-mapped
and http://stackoverflow.com/questions/18197041/reconstructing-an-odataqueryoptions-object-and-getinlinecount-returning-null

In short, here is what I had to change:

[Queryable(AllowedQueryOptions = AllowedQueryOptions.All)]
public IQueryable Get()
{
return m_oItems.AsQueryable();
}

changed to:

public PageResult Get(ODataQueryOptions options)
{
IQueryable results = options.ApplyTo(m_oItems.AsQueryable());
return new PageResult(results as IEnumerable, Request.GetNextPageLink(), Request.GetInlineCount());
}

Then in my JS file, I added "&$inlinecount=allpages" to my query and where I would treat the data blob returned by $.getJSON as an array, I simply use data.Count to have the number of items that match my query, and data.Items as my array of items.

The solution looks so simple now, but took me some time to figure out. Hope this helps...