共用方式為

逐步解說：建立可顯示 OData for SharePoint 的 Silverlight Web 組件

  • 發行項

SharePoint 2010 會透過 OData 公開其清單資料。 在 SharePoint 中，OData 服務是由 RESTful 服務 ListData.svc 實作。 本逐步解說示範如何建立裝載 Silverlight 應用程式的 SharePoint Web 組件。 Silverlight 應用程式會使用 ListData.svc 顯示 SharePoint 公告清單資訊。 如需詳細資訊，請參閱 SharePoint Foundation REST 介面和開放式資料通訊協定。

注意

在下列指示的某些 Visual Studio 使用者介面項目中，您的電腦可能會顯示不同的名稱或位置： 您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。 如需詳細資訊，請參閱將 IDE 個人化。

必要條件

您需要下列元件才能完成這個逐步解說：

  • 支援的 Microsoft Windows 和 SharePoint 版本。

  • Visual Studio 2012。

建立 Silverlight 應用程式與 Silverlight Web 組件

首先，在 Visual Studio 中建立 Silverlight 應用程式。 Silverlight 應用程式會使用 ListData.svc 服務，從 SharePoint 公告清單中擷取資料。

注意

4.0 之前的 Silverlight 版本不支援參考 SharePoint 清單資料所需的介面。

建立 Silverlight 應用程式與 Silverlight Web 組件

  1. 在功能表列上，選擇 [檔案]> [新增]> [專案]，以顯示 [新增專案] 對話方塊。

  2. 展開 [Visual C#] 或 [Visual Basic] 底下的 [SharePoint] 節點，然後選擇 [2010] 節點。

  3. 在 [範本] 窗格中，選擇 SharePoint 2010 Silverlight Web 組件範本。

  4. 在 [名稱] 方塊中，輸入 SLWebPartTest，然後選擇 [確定] 按鈕。

    [SharePoint 自訂精靈] 對話方塊隨即出現。

  5. 在 [指定網站和安全性層級進行偵錯] 頁面上，輸入您想要偵錯網站定義之 SharePoint 伺服器網站的 URL，或使用預設位置 (http://system name/)。

  6. 在 [此 SharePoint 解決方案的信任層級為何？] 區段中，選擇 [部署為陣列方案] 選項按鈕。

    雖然此範例使用伺服器陣列解決方案，但 Silverlight Web 組件專案可以部署為伺服器陣列或沙箱化解決方案。 如需有關沙箱化方案和伺服器陣列方案的詳細資訊，請參閱沙箱化解決方案考量。

  7. 在 [指定 Silverlight 設定資訊] 頁面的 [您希望如何將 Silverlight Web 組件建立關聯] 區段中，選擇 [建立新 Silverlight 專案並將其與 Web 組件建立關聯] 選項按鈕。

  8. 將 [名稱] 變更為 SLApplication，將 [語言] 設定為 Visual Basic 或 Visual C#，然後將 [Silverlight 版本] 設定為 Silverlight 4.0。

  9. 選擇 [完成] 按鈕。 專案會在 [方案總管] 中出現。

    此解決方案包含兩個專案：Silverlight 應用程式和 Silverlight Web 組件。 Silverlight 應用程式會從 SharePoint 擷取並顯示清單資料，而 Silverlight Web 組件會裝載 Silverlight 應用程式，讓您能夠在 SharePoint 中檢視它。

自訂 Silverlight 應用程式

將程式碼和設計元素新增至 Silverlight 應用程式。

自訂 Silverlight 應用程式

  1. 在 Silverlight 應用程式中將組件參考新增至 System.Windows.Data。 如需詳細資訊，請參閱如何：使用加入參考對話方塊加入或移除參考。

  2. 在 [方案總管] 中開啟 [參考] 的捷徑功能表，然後選擇 [加入服務參考]。

    注意

    如果您使用 Visual Basic，您必須選擇 [方案總管] 頂端的 [顯示所有檔案] 圖示，以顯示 [參考] 節點。

  3. 在 [加入服務參考] 對話方塊的 [位址] 方塊中，輸入 SharePoint 網站的 URL，例如 http://MySPSite，然後選擇 [Go] 按鈕。

    當 Silverlight 找到 SharePoint OData 服務 ListData.svc 時，它會將位址取代為完整的服務 URL。 對於此範例，http://myserver 會變成 http://myserver/_vti_bin/ListData.svc.

  4. 選擇 [確定] 按鈕，將服務參考新增至專案，並使用預設服務名稱 ServiceReference1。

  5. 在功能表列上選擇 [建置]>[建置解決方案]。

  6. 根據 SharePoint 服務，將新的資料來源新增至專案。 若要進行此操作，請在功能表列上，選擇 [檢視]>[其他視窗]>[資料來源]。

    [資料來源] 視窗會顯示所有可用的 SharePoint 清單資料，例如工作、公告和行事曆。

  7. 將公告清單資料新增至 Silverlight 應用程式。 您可以將 [公告] 從 [資料來源] 視窗拖曳至 Silverlight 設計工具。

    這會建立繫結至 SharePoint 網站之「公告」清單的格線控制項。

  8. 調整格線控制項的大小以符合 Silverlight 頁面。

  9. 在 MainPage.xaml 程式碼檔案中 (適用於 Visual C# 的 MainPage.xaml.cs，或適用於 Visual Basic 的 MainPage.xaml.vb)，新增下列命名空間參考。

    // Add the following three using directives.
using SLApplication.ServiceReference1;
using System.Windows.Data;
using System.Data.Services.Client;

  10. 在類別的頂端，加入下列變數宣告。

    private TeamSiteDataContext context;
private CollectionViewSource myCollectionViewSource;
DataServiceCollection<AnnouncementsItem> announcements = new DataServiceCollection<AnnouncementsItem>();

  11. 使用下列程式碼取代 UserControl_Loaded 程序。

    private void UserControl_Loaded_1(object sender, RoutedEventArgs e)
{
    // The URL for the OData service.
    // Replace <server name> in the next line with the name of your
    // SharePoint server.
    context = new TeamSiteDataContext(new Uri("http://ServerName>/_vti_bin/ListData.svc"));

    // Do not load your data at design time.
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
        //Load your data here and assign the results to the CollectionViewSource.
        myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["announcementsViewSource"];
        announcements.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(announcements_LoadCompleted);
        announcements.LoadAsync(context.Announcements);
    }
}

    請務必將 ServerName 預留位置取代為執行 SharePoint 的伺服器名稱。

  12. 新增下列錯誤處理程序。

    void announcements_LoadCompleted(object sender, LoadCompletedEventArgs e)
{
    // Handle any errors.
    if (e.Error == null)
    {
        myCollectionViewSource.Source = announcements;
    }
    else
    {
        MessageBox.Show(string.Format("ERROR: {0}", e.Error.Message));
    }
}

修改 Silverlight Web 組件

變更 Silverlight Web 組件專案中的屬性，以啟用 Silverlight 偵錯。

修改 Silverlight Web 組件

  1. 開啟 Silverlight Web 組件專案的捷徑功能表 (SLWebPartTest)，然後選擇 [屬性]。

  2. 在 [屬性] 視窗中，選擇 [SharePoint] 索引標籤。

  3. 如果尚未選取，請選取 [啟用 Silverlight 偵錯] (而非 [指令碼偵錯]) 核取方塊。

  4. 儲存專案。

測試 Silverlight Web 組件

在 SharePoint 中測試新的 Silverlight Web 組件，以確保它正確地顯示 SharePoint 清單資料。

測試 Silverlight Web 組件

  1. 選擇 F5 鍵，以建置並執行 SharePoint 解決方案。

  2. 在 SharePoint 的 [網站動作] 功能表上，選擇 [新增頁面]。

  3. 在 [新增頁面] 對話方塊中輸入標題，例如 SL Web 組件測試，然後選擇 [建立] 按鈕。

  4. 在頁面設計工具的 [編輯工具] 索引標籤上，選擇 [插入]。

  5. 在索引標籤帶上，選擇 [Web 組件]。

  6. 在 [類別] 方塊中，選擇 [自訂] 資料夾。

  7. 在 [Web 組件] 清單中，選擇 Silverlight Web 組件，然後選擇 [新增] 按鈕，將 Web 組件新增至設計工具。

  8. 在網頁新增所需的所有內容後，選擇頁面索引標籤，然後選擇工具列上的儲存 & 關閉按鈕。

    Silverlight Web 組件現在應該會顯示來自 SharePoint 網站的公告資料。 根據預設，頁面會儲存在 SharePoint 的 [網站頁面] 清單中。

    注意

    跨網域存取 Silverlight 中的資料時，Silverlight 會防範可用來惡意探索 Web 應用程式的安全性弱點。 如果您在 Silverlight 中存取遠端資料時遇到問題，請參閱跨網域界限提供服務。

相關內容