Freigeben über

Erstellen von Silverlight-Diagrammen mit SharePoint 2010-Daten mithilfe von LINQ

  • Artikel

SharePoint-Schnellstartbanner

Erste Schritte mit der Webentwicklung in SharePoint 2010 Erstellen von Microsoft Silverlight-Anwendungen, mit denen Microsoft SharePoint 2010-Listendaten mithilfe von LINQ abgerufen und anschließend als Diagramm angezeigt werden.

Letzte Änderung: Donnerstag, 27. Januar 2011

Gilt für: SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

Inhalt dieses Artikels
Erstellen eines Silverlight-Anwendungsprojekts
Hinzufügen von Code für den Zugriff auf Listendaten und zum Anzeigen in einem Silverlight-Diagrammsteuerelement
Bereitstellen und Testen der Projektmappe
Nächste Schritte

In dieser Übung werden Sie eine Microsoft Silverlight 3-Anwendung erstellen, mit der SharePoint-Listendaten mithilfe der Silverlight-Diagrammerstellungssteuerelemente als Diagramm angezeigt werden. Für diese Aufgabe müssen Sie die folgenden Schritte ausführen:

  • Erstellen eines Silverlight-Anwendungsprojekts

  • Hinzufügen von Code für den Zugriff auf Listendaten und zum Anzeigen in einem Silverlight-Diagrammsteuerelement

  • Bereitstellen und Testen der Projektmappe

Bei dieser Übung wird davon ausgegangen, dass Sie sich mit dem Thema Erstellen von Silverlight-Anwendungen für den Zugriff auf SharePoint 2010-Daten beschäftigt haben. In diesem Thema wird beschrieben, wie Sie eine Microsoft Silverlight 3-Anwendung erstellen, mit der SharePoint-Listendaten abgerufen und anschließend in einem DataGrid-Steuerelement auf der Website angezeigt werden.

Erstellen eines Silverlight-Anwendungsprojekts

Für diese Aufgabe erstellen Sie ein SilverlightAnwendungsprojekt in Microsoft Visual Studio 2010.

So erstellen Sie das Silverlight-Projekt

  1. Starten Sie Visual Studio 2010, klicken Sie auf Datei, zeigen Sie auf Neu, und klicken Sie dann auf Projekt.

  2. Navigieren Sie im Abschnitt Installierte Vorlagen zum Knoten Andere Projekttypen, klicken Sie auf Visual Studio-Projektmappen, und klicken Sie dann auf Leere Projektmappe.

  3. Wählen Sie oben im Bildschirm .NET Framework 3.5 aus, geben Sie Begin im Feld Name ein, und klicken Sie dann auf OK.

  4. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

  5. Erweitern Sie im Abschnitt Installierte Vorlagen den Eintrag Visual C#, klicken Sie auf Silverlight, und klicken Sie dann auf Silverlight-Anwendung.

  6. Wählen Sie oben im Bildschirm .NET Framework 3.5 aus, geben Sie SilverlightEmployeeContributionsGraph im Feld Name ein, und klicken Sie dann auf OK.

  7. Klicken Sie im Dialogfeld Neue Silverlight-Anwendung auf OK.

  8. Fügen Sie anschließend einen Verweis auf das SharePoint Silverlight-Clientobjektmodell hinzu. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten SilverlightEmployeeContributionsGraph, und klicken Sie dann auf Verweise hinzufügen.

  9. Navigieren Sie zu folgendem Ordner: C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.

  10. Wählen Sie Microsoft.SharePoint.ClientSilverlight.dll und Microsoft.SharePoint.Client.Silverlight.Runtime.dll aus, und klicken Sie dann auf OK.

  11. Fügen Sie anschließend einen Verweis auf die Silverlight-Diagrammsteuerelemente-Assembly hinzu. Sie finden diese Assembly im Dialogfeld Verweis hinzufügen auf der Registerkarte .NET unter dem Namen System.Windows.Controls.DataVisualization.Toolkit.

    HinweisHinweis

    Falls diese Assembly nicht im Dialogfeld Verweis hinzufügen angezeigt wird, können Sie das Microsoft Silverlight Toolkit installieren.

Hinzufügen von Code für den Zugriff auf Listendaten und zum Anzeigen in einem Silverlight-Diagrammsteuerelement

Für diese Aufgabe fügen Sie Code hinzu, mit dem Sie mithilfe von LINQ und den Silverlight-Diagrammsteuerelementen auf SharePoint-Listendaten zugreifen können, um die Daten als Diagramm darzustellen.

So fügen Sie dem Projekt Code hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei App.xaml, und klicken Sie dann auf Code anzeigen. Fügen Sie am Anfang der Datei die folgenden using-Anweisungen hinzu.

    using Microsoft.SharePoint.Client;
using System.Threading;

  2. Fügen Sie am Anfang der Application_Startup-Methode den folgenden Code hinzu.

    ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);

  3. Fügen Sie in der XAML-Ansicht der Datei MainPage.xaml im UserControl-Element den folgenden XML-Namespace hinzu.

    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

  4. Fügen Sie im grid-Element das folgende Silverlight-Diagrammsteuerelement hinzu.

    <chartingToolkit:Chart x:Name="chart" Width="350" Height="250" Title="Team Contributions">
    <chartingToolkit:Chart.Series>
        <chartingToolkit:ColumnSeries ItemsSource="{Binding}" 
            DependentValuePath="Contributions" 
            IndependentValuePath="Name"
            AnimationSequence="FirstToLast"   
            Title="Contributions" IsSelectionEnabled="True" />
    </chartingToolkit:Chart.Series>
</chartingToolkit:Chart>

  5. Öffnen Sie die Datei MainPage.xaml.cs, und fügen Sie am Anfang der Datei die folgende using-Anweisung hinzu.

    using Microsoft.SharePoint.Client;

  6. Fügen Sie vor der MainPage-Klasse die folgenden Klassen hinzu.

    public class EmployeeContributions
{
    public string Name { get; set; }
    public string TeamName { get; set; }
    public decimal Contributions { get; set; }
}

public class TeamContributions
{
    public string Name { get; set; }
    public decimal Contributions { get; set; }
}

  7. Fügen Sie der MainPage-Klasse die folgende Variable hinzu.

    private ListItemCollection _employees;

  8. Fügen Sie der MainPage-Methode nach dem Aufruf von initializeComponent den folgenden Code hinzu.

    ClientContext context = new ClientContext(ApplicationContext.Current.Url);
context.Load(context.Web);
List employees = context.Web.Lists.GetByTitle("Employees");
context.Load(employees);

CamlQuery query = new CamlQuery();
string camlQueryXml = null;

query.ViewXml = camlQueryXml;
_employees = employees.GetItems(query);
context.Load(_employees);
context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);

  9. Fügen Sie nach der MainPage-Methode den folgenden Code hinzu.

    private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
{
    // This is not called on the UI thread.
    Dispatcher.BeginInvoke(BindData);
}

private void BindData()
{
    List<EmployeeContributions> employees = new List<EmployeeContributions>();

        // Get the list item values into a strongly-typed class.
        foreach (ListItem li in _employees)
        {
            employees.Add(new EmployeeContributions
            {
                Name = li["Title"].ToString(),
                TeamName = li["Team"].ToString(),
                Contributions = Convert.ToDecimal(li["Contribution_x0020__x0028_in_x00"])
            });
        }

        // Use LINQ to organize employees by team name and then total team contributions.
         List<TeamContributions> teams = employees
             .GroupBy(e => e.TeamName)
             .Select(t => new TeamContributions
             {
                 Name = t.Key,
                 Contributions = t.Sum(e => e.Contributions)
             }).ToList();
         // This must be on a UI thread.
         chart.DataContext = teams; 
}

    In dem von Ihnen hinzugefügten Code werden vom SharePoint Silverlight-Clientobjektmodell Daten aus einer SharePoint-Liste abgerufen. Wenn die EmployeeContributions-Elemente der Liste hinzugefügt werden, werden die Mitarbeiter mithilfe von LINQ in Teams zusammengestellt, und deren Beitrag wird zusammengefasst. Die Teambeiträge werden dann als Datenquelle des Diagramms festgelegt.

Bereitstellen und Testen der Projektmappe

Für diese Aufgabe werden Sie die Projektmappe bereitstellen und anschließend testen, indem Sie das Silverlight-Webpart der Seite auf der Website hinzufügen.

So testen Sie die Projektmappe

  1. Zum Bereitstellen der Projektmappe für SharePoint muss die vom Silverlight-Projekt erstellte resultierende XAP-Datei im Ordner C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin gespeichert sein.

    Klicken Sie mit der rechten Maustaste auf den Knoten SilverlightEmployeeContributionsGraph, klicken Sie auf Eigenschaften, und klicken Sie dann auf Erstellen.

  2. Ändern Sie den Ausgabepfad in C:\Programme\Gemeinsame Dateien\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.

  3. Erstellen Sie die Projektmappe, indem Sie mit der rechten Maustaste auf den Knoten SilverlightEmployeeContributionsGraph klicken und dann auf Erstellen klicken. Die XAP-Datei wird in das erforderliche Verzeichnis kopiert, und Sie können nun der SharePoint-Website das Silverlight-Webpart hinzufügen.

  4. Öffnen Sie Internet Explorer, und navigieren Sie zu der zuvor angegebenen Website.

  5. Anschließend aktualisieren Sie das im Abschnitt Erstellen von Silverlight-Anwendungen für den Zugriff auf SharePoint 2010-Daten hinzugefügte Silverlight-Webpart, sodass es auf das in diesem Thema erstellte Silverlight-Diagrammsteuerelement zeigt. Klicken Sie auf die Dropdownliste in der rechten oberen Ecke des Silverlight-Webparts, und klicken Sie dann auf Webpart bearbeiten.

  6. Klicken Sie ganz rechts im Bildschirm auf Konfigurieren, und geben Sie /_layouts/ClientBin/SilverlightEmployeeContributionsGraph.xap im Silverlight-Webpart-Dialogfeld ein.

  7. Klicken Sie auf OK, und klicken Sie dann unten in der Silverlight-Webpart-Randleiste auf OK.

    Das Ergebnis sollte etwa wie in Abbildung 1 aussehen.

    Abbildung 1. Silverlight-Diagramm-Webpart

    Silverlight-Diagramm-Webpart

Nächste Schritte