Refine Mobile Services queries with paging
This topic shows you how to use paging to manage the amount of data returned to your Windows Phone app from Windows Azure Mobile Services. In this tutorial, you will use the Take and Skip query methods on the client to request specific "pages" of data.
Note
To prevent data overflow in mobile device clients, Mobile Services implements an automatic page limit, which defaults to a maximum of 50 items in a response. By specifying the page size, you can explicitly request up to 1,000 items in the response.
This tutorial builds on the steps and the sample app from the previous tutorial Get started with data. Before you begin this tutorial, you must complete at least the first tutorial in the working with data seriesGet started with data.
-
In Visual Studio 2012 Express for Windows Phone, open the project that you modified when you completed the tutorial Get started with data.
-
Press the F5 key to run the app, then type text in the textbox and click Save.
-
Repeat the previous step at least three times, so that you have more than three items stored in the TodoItem table.
-
In the MainPage.xaml.cs file, replace the RefreshTodoItems method with the following code:
private async void RefreshTodoItems()
{
// Define a filtered query that returns the top 3 items.
IMobileServiceTableQuery<TodoItem> query = todoTable
.Where(todoItem => todoItem.Complete == false)
.Take(3);
items = await query.ToCollectionAsync();
ListItems.ItemsSource = items;
} This query, when executed during data binding, returns the top three items that are not marked as completed.
-
Press the F5 key to run the app.
Notice that only the first three results from the TodoItem table are displayed.
-
(Optional) View the URI of the request sent to the mobile service by using message inspection software, such as browser developer tools or Fiddler.
Notice that the Take(3) method was translated into the query option $top=3 in the query URI.
-
Update the RefreshTodoItems method once more with the following code:
private async void RefreshTodoItems()
{
// Define a filtered query that skips the first 3 items and
// then returns the next 3 items.
IMobileServiceTableQuery<TodoItem> query = todoTable
.Where(todoItem => todoItem.Complete == false)
.Skip(3)
.Take(3);
items = await query.ToCollectionAsync();
ListItems.ItemsSource = items;
} This query skips the first three results and returns the next three after that. This is effectively the second "page" of data, where the page size is three items.
Note
This tutorial uses a simplified scenario by passing hard-coded paging values to the Take and Skip methods. In a real-world app, you can use queries similar to the above with a pager control or comparable UI to let users navigate to previous and next pages. You can also call the IncludeTotalCount method to get the total count of items available on the server, along with the paged data.
-
(Optional) Again view the URI of the request sent to the mobile service.
Notice that the Skip(3) method was translated into the query option $skip=3 in the query URI.
Next Steps
This concludes the set of tutorials that demonstrate the basics of working with data in Mobile Services. Consider finding out more about the following Mobile Services topics: