Silverlight WebPart in Share Point2010 using Client object model
In this article we will walk through creation of a Silverlight WebPart and deployment to a SharePoint 2010 sites. We will be fetching list items using client object model and bind to the Silverlight datagrid.
Step 1
Open Visual Studio 2010 and create a new Silverlight project by choosing Silverlight project template from Silverlight tab.
![image1.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image1.gif)
![image2.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image2.gif)
Step 2
Add the reference of SharePoint client object model.
- Microsoft.SharePoint.Client.Silverlight.dll
- 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
![image3.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image3.gif)
Step 3
Open designer of Silverlight page (xaml file) and drag and drop the DataGrid on the page.
![image4.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image4.gif)
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>
Step 4
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; }
}
}
Step 5
- Open MainPage.xaml.cs file and add the reference
![image5.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image5.gif)
- In the Page constructor connect to the ClientContext
![image6.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image6.gif)
- Load the current web or root site of the web application where you are going to deploy the Silverlight webpart.
![image7.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image7.gif)
- Get the list to be queried in the context
![image8.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image8.gif)
Here Test1_Product is name of the SharePoint list we want to query.
- Load the list in the client context
![image9.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image9.gif)
- Create instance of CAML query class to query the list
![image10.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image10.gif)
Here we are retrieving all the items from the list.
- Now retrieve the items from the list
![image11.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image11.gif)
- Now load the returned items of the list in context
![image11.1.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image11.1.gif)
- Now need to execute the query asynchronously
![image12.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image12.gif)
- We need to create onRequestSucceeded
![image13.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image13.gif)
- Now we need to create BindData action and in this we will fetch the items of the list and create list of ProductClass, then Bind the list to the DataGrid.
![image14.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image14.gif)
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
![image15.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image15.gif)
Navigate to Build tab and set the output path to the following folder.
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin
![image16.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image16.gif)
And build the project
Step 7
Open the SharePoint site and Edit the page
![image17.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image17.gif)
Then click on Insert
![image18.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image18.gif)
Then add Web Part.
![image19.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image19.gif)
Click on Add button
/_layouts/ClientBin/SilverlightApplication1.xap
![image20.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image20.gif)
And press OK,
Now you can see Silverlight WebPart being added to SharePoint site.
![image21.gif](https://test.c-sharpcorner.com/UploadFile/dhananjaycoder/silverlight-webpart-in-share-point2010-using-client-object-model/Images/image21.gif)