Silverlight WebPart in Share Point2010 using Client object model

Introduction

In this article we will walk through to create Silverlight WebPart and deploy to SharePoint 2010 sites. We will fetching list items using client object model and bind to the Silverlight datagrid. 

Step1

Open Visual Studio 2010 and create a new Silverlight project by choosing Silverlight project template from Silverlight tab.

Figure :Select silverlight version

Step 2

Add the reference of SharePoint client object model.

1. Microsoft.SharePoint.Client.Silverlight.dll
2. Microsoft.SharePoint.Client.Silverlight.Runtime.dll

To add the reference browse to the folder C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin

Step3

Open designer of Silverlight page (xaml file) and drag and drop the DataGrid on the page.

MainPage.xaml

<UserControl
xmlns:data="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Data" 
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical" >
            <data:DataGrid
                      x:Name="MyDataGRid" 
                      Height="auto" 
                     Width="auto" AutoGenerateColumns="True"  />            
        </StackPanel>          
    </Grid>
</UserControl> 

Step4

Now add a class called Product. This class will represent SharePoint list, we are going to display in DataGrid.

Product.cs

namespace SilverlightApplication1
{
    public class Product
    {
        public string ProductId { get; set; }
        public string ProductName { get; set; }
        public string ProductPrice { get; set; }
    }
}

Step5

1. Open MainPage.xaml.cs file and add the reference
 

2. In the Page constructor connect to the ClientContext

3. Load the current web or root site of the web application where you are going to deploy the Silverlight webpart.

4. Get the list to be queried in the context

Here Test1_Product is name of the SharePoint list we want to query.

5. Load the list in the client context

6. Create instance of CAML query class to query the list

Here we are retrieving all the items from the list.

7. Now retrieve the items from the list

8. Now load the returned items of the list in context

9. Now need to execute the query asynchronously

10. We need to create onRequestSucceeded

11. Now we need to create BindData action and in this we will fetch the items of the list and create list of ProductClass . and then Bind the list to DataGrid

Here MyDataGrid is name of the DataGrid . Make sure you are giving internal names of the list columns.

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.SharePoint.Client;
namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
       ListItemCollection ProductsCollection;      
        public MainPage()
        {
            InitializeComponent();
            var context = new ClientContext(ApplicationContext.Current.Url);
            context.Load(context.Web);
             var productsList = context.Web.Lists.GetByTitle("Test1_Product");
            context.Load(productsList);
             var query = CamlQuery.CreateAllItemsQuery();
             ProductsCollection = productsList.GetItems(query);
             context.Load(ProductsCollection);
             context.ExecuteQueryAsync(OnRequestSucceeded, null);
 

        }

        private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)

        {

            Dispatcher.BeginInvoke(BindData);
        }

        private void BindData()
        {
            var list = new List<Product>();
            foreach (var i in ProductsCollection)
            {
                list.Add(new Product
                          {
                              ProductName = i["ProductName"].ToString(),
                              ProductId = i["ProductId"].ToString(),
                              ProductPrice = i["ProductPrice"].ToString()
                          }

                          ); 

            }

              MyDataGRid.DataContext = list;
              MyDataGRid.ItemsSource = list;           

        }

    }

}

Step 6
Now before building the project, right click on the project and

Navigate to Build tab and set the output path to below folder.

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin

And build the project
Step7

Open the SharePoint site and Edit the page

Then click on Insert

Then add Web Part .

Click on Add button

/_layouts/ClientBin/SilverlightApplication1.xap

And press OK,
Now you can see Silverlight WebPart being added to SharePoint site.

That's all, now you have done.happy coding.