SharePoint, ADO.Net Data Services and Silverlight 4 data binding example

I presented recently at an internal Microsoft conference here in Seattle & showed a simple OData/ADO.Net data services & Silverlight 4 data binding example.   It is very rudimentary, but shows how simple it is to get up and running binding Silverlight controls to data coming from SharePoint.

For this you will need:

• A SharePoint development environment with VS 2010 set up. (see here)
• Silverlight Web Parts Visual Studio 2010 project template. This is an extension project template from Paul Stubbs that make it super easy to create a custom Silverlight web part.
• Silverlight 4 Tools for Visual Studio 2010

One time setup:

1. Create a new Custom list called “Projects” in the root of your SharePoint site.
2. Add a new text column to the list called “ProjectName”
3. Add some new data to the list and fill in the column values.

The resulting list should look something like this now:

Ok now for the good stuff…

Creating the projects:

1. Create a new “Silverlight Web Part” from the SharePoint > 2010 project templates in Visual Studio.  This template is part of the Silverlight Web Parts Visual Studio 2010 project template VS Extension.  Make sure you have that installed if you don’t see it.
   
2. In the new project wizard that pops up make sure the path to your SharePoint site is specified. e.g. https://chjohn3 is the url to my dev site on my machine.
3. Make sure “Deploy as a sandboxed solution” is ticked & Click Next
4. Enter “MySilverlightWebPart” as the Silverlight Project Name.  Select “Shared Documents” as the library to deploy the Silverlight control to.
5. Enter “My Silverlight Web Part” as the title for your new web part & click Finish
6. Right click on the MySilverlightWebPart project and choose properties.  We need to flip the Target Silverlight Version to Silverlight 4
7. When prompted click Yes to reload the project.

Hooking up the OData/ADO.Net Data Services data source:

1. Right click on the “MySilverlightWebPart” project and click “Add Service Reference”
2. Enter the address to the listdata.svc service e.g. https://chjohn3/_vti_bin/ListData.svc (you will need to use your server name of course)
3. Click GO & you should see “HomeDataContext” appear in the list of Services.  Expand it to see all your lists.  You should see “Projects” in the list.
4. Change the Namespace to “Contoso” and Click OK

Your project should now look like this:

Building the UI:

In this example all we are going to do is drop a grid onto our Silverlight surface and bind it to the Projects data.

1. Double click “MainPage.xaml” to open it.  You should see the design surface.
2. From the Data Sources panel drag out “Projects” onto the design surface and size it appropriately
   
   
3. If you only want to show the ID and Project Name columns delete all the others from the XAML window.
   
4. Save the file.  CTRL+S

Binding to the data:

Now we need to issue the query to the server to retrieve the data and bind those results to the grid.

1. Right click “MainPage.xaml” and View Code

2. Add the following Namespace definitions

   using MySilverlightWebPart.Contoso;
   using System.Windows.Data;
   using System.Data.Services.Client;

3. Uncomment the Loaded event handler wire up in the MainPage() function.  It should look like this:
   

4. Declare some local variables.  Context is the data context for our ADO.Net Data Service, projects will contain the collection of projects we are going to bind to the grid & projectsViewSource is the view source collection that controls what data will be shown in the grid.
   

5. Add the functions below to the code.  This will query the datasource for the projects & then bind them to the grid when the main page loaded event is fired.

 /// <summary>Page loaded event handler</summary>

private void MainPage_Loaded(object sender, RoutedEventArgs e)

{



    // this news up our data context with the URI to the ListData.svc

    context = new HomeDataContext(new Uri("<a href="https://chjohn3/_vti_bin/ListData.svc"">https://chjohn3/_vti_bin/ListData.svc"</a>, UriKind.Absolute));



    // create the collection that we are doing to store the projects in

    projects = new DataServiceCollection<ProjectsItem>();



    // get the view source reference from the grid

    projectsViewSource = (CollectionViewSource)this.Resources["projectsViewSource"];



    // Define a query that returns orders for a give customer.

    var query = from p in context.Projects

                select p;



    // wire up the loaded event

    projects.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(projects_LoadCompleted);



    // Asynchronously load the result of the query.

    projects.LoadAsync(query);



}



private void projects_LoadCompleted(object sender, LoadCompletedEventArgs e)

{

    // if there wasnt an error

    if (e.Error == null)

    {

        // load the view source with the list of projects that were returned.

        projectsViewSource.Source = projects;

    }

    else

    {

        MessageBox.Show(string.Format("An error has occured: {0}", e.Error.Message));



    }

}

 

 

Building and Deploying

Now its time to try it all out! 

1. Hit F5
2. Visual Studio will build the projects, Package up the solution in a WSP package, Deploy it into the Solution Gallery (the spot where sandbox solutions are deployed) & will start up IE and attach to the right processes for debugging.  IE should load with the homepage of the site.
3. Click Page > Edit in the Ribbon
4. Click Insert > Web Part in the ribbon
5. Click into the Custom folder where you will find your web part “My Silverlight Web Part” & select it
6. Click Add to insert it onto the page
7. You will see your web part load and moments later the data should show up in the grid.  Looking something like this:
   

Congratulations.  You have just built a Silverlight 4 web part that is data bound using ADO.Net Data Services to SharePoint list data!

If you want to have a poke around with the ListData.svc Service then you can try hitting some URLs directly from IE like these:

• https://<servername>//_vti_bin/ListData.svc">_vti_bin/ListData.svc
• https://<servername>/_vti_bin/ListData.svc/Projects
• https://<servername>/_vti_bin/ListData.svc/Projects(1)
• https://<servername>/_vti_bin/ListData.svc/Projects?$filter=id eq 2
• https://<servername>/_vti_bin/ListData.svc/Projects?$filter=Title eq 'Project 2'

Here is a good starting point in the documentation for how this REST interface works: https://msdn.microsoft.com/en-us/library/ff521587.aspx

Thanks,

-Chris.

Comments

• Anonymous
  August 21, 2010
  Helpful post, unfortunately I'm not seeing Silverlight 4 as on option in the wizard. I have the Silverlight 4 tool set installed (confirmed). Are you running a different build of the SharePoint WebPart project or am I missing something? Thanks.

• Anonymous
  August 23, 2010
  Hi Josh, Silverlight 4 wont show up in the project wizard.  In the steps above i have you change it to SilverLight 4 in the project settings instead.  See step 6 under Creating the Projects. Thanks, Chris.