新手学习之培训记录：silverlight webpart using client object

2011/7/20 10:51:25中文系列评论(0)浏览(1582)

这个培训任务包含两个纠结点：一个是将silverlight webpart结合到sharepoint站点中，另一个就是client object。关于这两方面也查了不少东西，这里简要介绍我做的步骤，新手记录，不要笑话~

首先建立silverlight application，那么首先就是先涉及到Client Object的方面，在这次培训我做的是三个listbox，首先一个读取所有的列表，然后点击列表后在另一个listbox中显示列表周所有item的title，选择titile后，让原来隐藏的第三个listbox显示（覆盖第一个listbox的位置），其中是该item的信息。另外设置一个按钮，用于重置，说白了就是清空该清空的，隐藏该隐藏的，相信大家都知道什么意思。

首先添加空间，在MainPage中的代码如下

View Code

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        
        <ListBox x:Name="lBoxLists" SelectionChanged="lBoxLists_SelectionChanged" Loaded="siteLists_Loaded" Height="300" Width="200" Grid.Column="0" Grid.Row="0" Margin="10,0,10,0" />
        <ListBox x:Name="lBoxItems" Height="300" Width="200" Grid.Row="0" Grid.Column="1" SelectionChanged="lBoxItems_SelectionChanged" />
        <ListBox x:Name="lBoxDetail" Height="300" Width="200" Visibility="Collapsed" Grid.Column="0" Grid.Row="0" />
        <Button x:Name="BtnReset" Content="Reset" Height="30" Width="60" Grid.Column="1" Grid.Row="1" Click="BtnReset_Click" Margin="5,5,5,5" />
        
    </Grid>

这里都很基础，没什么可以说的。接下来MainPage.xaml.cs中代码比较花，分成几个部分

首先，是第一个listbox的读取，这里名字叫做lBoxLists：

View Code

using System;
using System.Collections.Generic;
using System.Collections;
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 SilverlightExample
{
    public partial class MainPage : UserControl
    {
        ClientContext siteCol;
        private ListCollection allLists;
        private IEnumerable<List> lists;
        private IEnumerable<ListItem> listItems;
        
        public MainPage()
        {
            InitializeComponent();
        }

        #region  ///读取所有列表至listbox
        private void siteLists_Loaded(object sender, RoutedEventArgs e)
        {
            
            string siteurl = "http://site url here";
            siteCol = new ClientContext(siteurl);
            allLists = siteCol.Web.Lists;
            lists = siteCol.LoadQuery(allLists.Include(
                    list => list.Title));
            siteCol.ExecuteQueryAsync(LoadedSuccess, LoadedFail);
        }

        private void bindD()
        {
            
            foreach (List list in lists)
            {
                lBoxLists.Items.Add(list.Title);
            }
        }
        
        private void LoadedSuccess(object sender, ClientRequestSucceededEventArgs e)
        {
            this.Dispatcher.BeginInvoke(bindD);   
        }

        private void LoadedFail(object sender, ClientRequestFailedEventArgs e)
        {
            this.Dispatcher.BeginInvoke(fail);              
        }

        private void fail()
        {
            lBoxLists.Items.Add("Fail");
        }

        #endregion

这里我一开始很顺势的用了ClientContext.Load，结果返回错误，因为Silverlight中只支持异步加载，所以要使用ClientContext.LoadQueryAsync(successCallback,failCallback)。在callback函数中，使用Dispatcher.BeginInvoke更新UI。

接下来是第二个listbox, 这里叫做lBoxItems：

View Code

        #region ///选择list后读取item的title

        public class ItemDetail
        {
            private string title;
            private string id;
            public string Title
            {
                get { return title; }
                set { title = value; }
            }
            public string Id
            {
                get { return id; }
                set { id = value; }
            }
        }


        List<ItemDetail> itemRecord = new List<ItemDetail>();

        private void lBoxLists_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            itemRecord.Clear();
            lBoxItems.Items.Clear();
            string listName = lBoxLists.SelectedItem.ToString();
            siteCol = new ClientContext("http://site url here");
            List list = siteCol.Web.Lists.GetByTitle(listName);
            CamlQuery camlQ = new CamlQuery();
            string strQuery = @" ";
            camlQ.ViewXml = strQuery;
            ListItemCollection Items = list.GetItems(camlQ);
            listItems = siteCol.LoadQuery(Items);
            siteCol.ExecuteQueryAsync(LoadedSuccess1, LoadedFail1);
        }

        private void LoadedSuccess1(object sender,ClientRequestSucceededEventArgs args)
        {
            this.Dispatcher.BeginInvoke(SuccessCompute);
        }

        private void SuccessCompute()
        {
            foreach (ListItem item in listItems)
            {
                ItemDetail newItem = new ItemDetail();
                newItem.Title = item["Title"].ToString();
                newItem.Id = item["ID"].ToString();
                itemRecord.Add(newItem);
                lBoxItems.Items.Add(item["Title"].ToString());
            }           
        }

        private void FailedCompute()
        {
            
        }
        
        private void LoadedFail1(object sender, ClientRequestFailedEventArgs args)
        {
            this.Dispatcher.BeginInvoke(FailedCompute);
        }
        #endregion

由于在list中getitem方法除了建立query以外，只能通过ID，因为只有ID是唯一确定的，所以这里新建了一个类用来存放item的ID以及title。用于读取item时候使用.

接下来是最后一个listbox，这里叫lBoxDetail。

View Code

        #region  ///选择item显示item信息
        ListItem item;
        List list;
        FieldCollection listFields;
        private void lBoxItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            lBoxDetail.Items.Clear();
            siteCol = new ClientContext("http://site url here/");
            list = siteCol.Web.Lists.GetByTitle(lBoxLists.SelectedItem.ToString());
            listFields = list.Fields;
            siteCol.Load(listFields);
            int i = lBoxItems.SelectedIndex;
            item = list.GetItemById(itemRecord[i].Id);
            siteCol.Load(item);
            siteCol.ExecuteQueryAsync(LoadedSuccess2, null);
            
        }

        private void LoadedSuccess2(object sender, ClientRequestSucceededEventArgs args)
        {
            this.Dispatcher.BeginInvoke(SuccessCompute2);
        }

        private void SuccessCompute2()
        {

            lBoxDetail.Visibility = Visibility.Visible;
            foreach (Field field in listFields)
            {
                lBoxDetail.Items.Add(field.StaticName+":  "+item[field.StaticName]);
            }
        }
        #endregion

到这里，读取列表的工作就做完了，最需要注意的是在必要的地方要清空一些数据，如在选择列表变化的时候，要　　清空itemRecord，否则变化以后列表项读取会出错等。

最后是点击button时的动作：

View Code

        #region ///重选按钮
        private void BtnReset_Click(object sender, RoutedEventArgs e)
        {
            lBoxDetail.Visibility = Visibility.Collapsed;
            lBoxItems.Items.Clear();
            lBoxDetail.Items.Clear();
        }
        #endregion

silverlight程序中的问题都结束了，接下来就是结合到sharepoint中的问题了。总的来说，silverlight和sharepoint结合的还是非常好的，这需要几个简单的步骤就可以加入到站点中。步骤很简单，到处资料也很多，我就不截图了：

1.在silverlight application的solution中添加一个empty sharepoint project

2.右件单击sharepoint project 点击add new item.加入一个新的模块（module），右件单击模块选择属性，打开Project Output Reference，然后点击add，设置deployment type为elementFile,在project name中下拉选择相应的silverlight应用程序，然后确定关闭

3.这时候在模块中的Element.xml就产生了一个新标签，其中就包含了xap的url，复制这个url，到站点中添加webpart--->Content and Media--->silverlight web part，再使用这个地址就可以了。

注：这里的路径有的时候添加会无效，这时候，打开sharepoint designer找到该xap文件，使用属性中的全url路径（http://.......）就没有问题了，若想知道正确的相对url，就插入后再查看，就可以看到正确的相对url了。

使用效果如下：