Exercise 1: Breaking up the Dataset

This exercise shows how to manipulate the query submitted to SharePoint so that we get back just one page worth of data. By defining the size of the data returned, we can reduce the load on the server and make the data easier for users to digest.

Task 1 – Preparating

In this task, you will open the starter solution in VS 2010 and explore the environment to understand what has been done to get things set up for the rest of the exercises.

1. Using Visual Studio 2010, open the starter solution named LargeData from the <Install>\Labs\DisplayingLargeDatasetsSL\source\begin\ folder. Solution Explorer should look like this:

   Figure 1

   LargeData solution

2. Notice that there are two projects in this solution:
   1. LargeData – this is the actual project that will be deployed to SharePoint. It is an Empty SharePoint Project with a new project item added to it - the SilverlightWebPart1 item just above key.snk in the picture.
   2. SilverlightApplication1 – this is the Silverlight project in which we will build our Silverlight application. The output of this project is packaged with the output of the LargeData project and deployed to SharePoint.
3. Double click on the Properties node in Solution Explorer underneath the LargeData project and then open the SharePoint tab. Notice that the checkbox next to Enable Silverlight debugging is selected. This is necessary if we need to step through our code later on. Close the properties pane.
4. [Optional] If desired, explore the different files in both projects. Some of these files and/or the content in the files are used in later Exercises.

Task 2 – Reviewing The XAML

In this task you will review the XAML markup in the starter solution.

1. From Solution Explorer, in the SilverlightApplication1 project, double-click the file MainPage.xaml to open it and display the Silverlight design canvas.
2. Examine the XAML markup already in the starter solution. Except for the two buttons, this is identical to Lab 2. All of the pieces to deal with large datasets happen in the code behind, which we’ll cover later in this lab.

3. To finish exploring and see the results of what has been set up for you, hit the F5 key to deploy and activate the starter solution. After Visual Studio launches the browser, navigate to https://intranet.contoso.com/sites/LargeData/SitePages/SilverlightApplication1WebPartPage.aspx. Your page should look like this:

   Figure 2

   SilverlightApplication1Web page

4. The grid control and paging buttons are shown on the page, but are not yet functional. You will add the functionality in later in this lab.

Task 3 – Adding The Silverlight Client Object Model Code

In this task you will add code to the starter solution query SharePoint but control the size of the dataset returned.

1. If the browser is still open from Task 2, close it and return to Visual Studio.
2. From Solution Explorer, in the SilverlightApplication1 project, double-click the file MainPage.xaml.cs to open it and display the code behind file for our Silverlight application.

3. Position your cursor on line 40 and add the following code:

   C#

   private void Init() { spContext = ClientContext.Current; contactsList = spContext.Web.Lists.GetByTitle("Contacts"); qry.ViewXml = @"<View> <ViewFields> <FieldRef Name='Title'/> <FieldRef Name='FirstName'/> <FieldRef Name='Company'/> </ViewFields> <RowLimit>" + pageSize.ToString() + @"</RowLimit> </View>"; }

This code sets up the CAML query that will be submitted to SharePoint. In Lab 2, we simply returned all items from the list with the CamlQuery.CreateAllObjectsQuery method. For this lab, that is not going to work because we need to control the size of the dataset. We do that here by specifying a RowLimit value inside the query text. The starter solution contains a variable declaration that sets the pageSize variable to a value of 10. This code uses that to ensure that each execution of this query returns only 10 rows – this is what controls our page size.

1. This completes the coding, so hit F5 to test out the solution. After Visual Studio launches the browser, navigate to https://intranet.contoso.com/sites/LargeData/SitePages/SilverlightApplication1WebPartPage.aspx. The page should look like the following:

   Figure 3

   SilverlightApplication1Web page

2. The grid contains only the first 10 rows of data. In Exercise 2 we will add the code for the buttons to enable us to move backward and forward through the dataset, one page at a time. Note that the actual names and details shown will differ slightly because the sample data is randomly generated.

Exercise 1 verification

In order to verify that you have correctly performed all steps of exercise 1, proceed as follows:

Verification 1

In this verification, you can compare the anticipated output shown in step 4 with the actual output shown on your screen. If the two match, you have completed the exercise successfully.