In this article we will walkthrough 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.

clip_image001

clip_image002

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

clip_image003

Step3

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

clip_image004

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

clip_image005

2. In the Page constructor connect to the ClientContext

clip_image007

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

clip_image008

4. Get the list to be queried in the context

clip_image010

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

5. Load the list in the client context

clip_image011

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

clip_image012

Here we are retrieving all the items from the list.

7. Now retrieve the items from the list

clip_image013

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

clip_image014

9. Now need to execute the query asynchronously

clip_image016

10. We need to create onRequestSucceeded

clip_image018

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

clip_image020

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

clip_image021

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

clip_image023

And build the project

Step7

Open the SharePoint site and Edit the page

clip_image024

Then click on Insert

clip_image025

Then add Web Part .

clip_image026

Click on Add button

/_layouts/ClientBin/SilverlightApplication1.xap

clip_image027

And press OK,

Now you can see Silverlight WebPart being added to SharePoint site.

clip_image029

Advertisements

One thought on “Silverlight WebPart in Share Point2010 using Client object model

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s