Freigeben über

Exemplarische Vorgehensweise: Erstellen eines Webparts für SharePoint

  • Artikel

Mithilfe von Webparts können Benutzer Inhalt, Darstellung und Verhalten der Seiten einer SharePoint-Website direkt im Browser ändern.In dieser exemplarischen Vorgehensweise wird erläutert, wie ein Webpart mit der Elementvorlage Webpart in Visual Studio 2010 erstellt wird.

Das Webpart zeigt Mitarbeiter in einem Datenraster an.Der Benutzer gibt den Speicherort der Datei an, die die Mitarbeiterdaten enthält.Außerdem kann der Benutzer das Datenraster filtern, damit nur Mitarbeiter, die Manager sind, in der Liste angezeigt werden.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

  • Erstellen eines Webparts mit der Visual Studio-Elementvorlage Webpart.

  • Erstellen einer Eigenschaft, die vom Benutzer des Webparts festgelegt werden kann.Diese Eigenschaft gibt den Speicherort der Mitarbeiterdatendatei an.

  • Rendern von Inhalt in einem Webpart durch Hinzufügen von Steuerelementen zur Webpart-Steuerelementauflistung.

  • Erstellen eines neuen, als Verb bezeichneten Menüelements, das im Verbmenü des gerenderten Webparts angezeigt wird.Verben ermöglichen es dem Benutzer, die im Webpart angezeigten Daten zu ändern.

  • Testen des Webparts in SharePoint.

    HinweisHinweis

    Auf Ihrem Computer werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in den folgenden Anweisungen aufgeführten.Die von Ihnen verwendete Visual Studio-Edition und die Einstellungen legen diese Elemente fest.Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

  • Unterstützte Editionen von Microsoft Windows und SharePoint.Weitere Informationen finden Sie unter Anforderungen für die Entwicklung von SharePoint-Lösungen.

  • Visual Studio Professional oder eine Edition der Anwendungslebenszyklus-Verwaltung (Application Lifecycle Management, ALM) von Visual Studio.

Erstellen eines leeren SharePoint-Projekts

Erstellen Sie zunächst ein leeres SharePoint-Projekt.Später fügen Sie dem Projekt mit der Elementvorlage Webpart ein Webpart hinzu.

So erstellen Sie ein leeres SharePoint-Projekt

  1. Starten Sie Visual Studio mit der Option Als Administrator ausführen.

  2. Auf den Männern halten Sie ab, wählen Sie Datei, Neu, Projekt aus.

  3. Im Dialogfeld Neues Projekt erweitern Sie den Knoten SharePoint unter der gewünschten Sprache, die Sie verwenden möchten, und wählen Sie dann den Knoten 2010 aus.

  4. Im Bereich Vorlagen wählen Sie SharePoint 2010-Projekt aus und wählen dann die Schaltfläche OK aus.

    Der Assistent zum Anpassen von SharePoint wird angezeigt.Mit diesem Assistenten können Sie die Website, die Sie zum Debuggen des Projekts verwenden, sowie die Vertrauensebene der Projektmappe auswählen.

  5. Wählen Sie das Optionsfeld Als Farmlösung bereitstellen, und wählen Sie dann die Schaltfläche Fertig stellen, um die standardmäßige lokale SharePoint-Website zu akzeptieren.

Hinzufügen eines Webparts zum Projekt

Fügen Sie dem Projekt ein Element Webpart hinzu.Durch das Element Webpart wird die Codedatei für das Webpart hinzugefügt.Später fügen Sie der Codedatei für das Webpart Code hinzu, um den Inhalt des Webparts zu rendern.

So fügen Sie ein Webpart zum Projekt hinzu

  1. Klicken Sie auf der Menüleiste wählen Sie Projekt, Neues Element hinzufügen aus.

  2. Im Dialogfeld Installierte VorlagenNeues Element hinzufügen im Bereich, erweitern Sie den Knoten SharePoint, und wählen Sie dann den Knoten 2010 aus.

  3. In der Liste der SharePoint-Vorlagen, wählen Sie die Webpart Vorlage aus, und wählen Sie dann die Schaltfläche Hinzufügen aus.

    Das Element Webpart wird im Projektmappen-Explorer angezeigt.

Rendern von Inhalt im Webpart

Sie können angeben, welche Steuerelemente im Webpart angezeigt werden, indem Sie diese der Steuerelementauflistung der Webpartklasse hinzufügen.

So rendern Sie Inhalt im Webpart

  1. In Projektmappen-Explorer öffnen Sie WebPart1.vb (in Visual Basic) oder WebPart1.cs (in C#).

    Die Codedatei für das Webpart wird im Code-Editor geöffnet.

  2. Fügen Sie am Anfang der Codedatei für das Webpart die folgenden Anweisungen hinzu.

    Imports System.Data

    using System.Data;

  3. Fügen Sie der WebPart1-Klasse folgenden Code hinzu.Mit diesem Code werden die folgenden Felder deklariert:

    • Ein Datenraster, um Mitarbeiter im Webpart anzuzeigen.

    • Text, der auf dem Steuerelement angezeigt wird, das zum Filtern des Datenrasters verwendet wird.

    • Eine Bezeichnung, die einen Fehler anzeigt, wenn das Datenraster keine Daten anzeigen kann.

    • Eine Zeichenfolge, die den Pfad zur Mitarbeiterdatendatei enthält.

    Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String

    private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;

  4. Fügen Sie der WebPart1-Klasse folgenden Code hinzu.In diesem Code wird dem Webpart eine benutzerdefinierte Eigenschaft mit dem Namen DataFilePath hinzugefügt.Eine benutzerdefinierte Eigenschaft ist eine Eigenschaft, die vom Benutzer in SharePoint festgelegt werden kann.Diese Eigenschaft ruft den Speicherort einer XML-Datendatei ab, die zum Auffüllen des Datenrasters verwendet wird, und legt diesen Speicherort fest.

    <Personalizable(PersonalizationScope.[Shared]), _
    WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
    WebDescription("Location of the XML file that contains employee data")> _
Public Property DataFilePath() As String
    Get
        Return xmlFilePath
    End Get
    Set(ByVal value As String)
        xmlFilePath = value
    End Set
End Property

    [Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Path to Employee Data File"),
WebDescription("Location of the XML file that contains employee data")]
public string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

  5. Ersetzen Sie die CreateChildControls-Methode durch den folgenden Code.Mit diesem Code werden die folgenden Aufgaben ausgeführt:

    • Fügt das Datenraster und die Bezeichnung hinzu, die Sie im vorherigen Schritt deklariert haben.

    • Bindet das Datenraster an eine XML-Datei, die Mitarbeiterdaten enthält.

    Protected Overloads Overrides Sub CreateChildControls()

    'Define the grid control that displays employee data in the Web Part.
    grid = New DataGrid()
    With grid
        .Width = Unit.Percentage(100)
        .GridLines = GridLines.Horizontal
        .HeaderStyle.CssClass = "ms-vh2"
        .CellPadding = 2
        .BorderWidth = Unit.Pixel(5)
        .HeaderStyle.Font.Bold = True
        .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
    End With



    'Populate the grid control with data in the employee data file.
    Try
        Dim dataset As New DataSet()
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
        grid.DataSource = dataset
        grid.DataBind()
    Catch x As Exception
        errorMessage.Text += x.Message
    End Try

    'Add control to the controls collection of the Web Part.
    Controls.Add(grid)
    Controls.Add(errorMessage)
    MyBase.CreateChildControls()

End Sub

    protected override void CreateChildControls()
{
    // Define the grid control that displays employee data in the Web Part.
    grid = new DataGrid();
    grid.Width = Unit.Percentage(100);
    grid.GridLines = GridLines.Horizontal;
    grid.HeaderStyle.CssClass = "ms-vh2";
    grid.CellPadding = 2;
    grid.BorderWidth = Unit.Pixel(5);
    grid.HeaderStyle.Font.Bold = true;
    grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

    // Populate the grid control with data in the employee data file.
    try
    {
        DataSet dataset = new DataSet();
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
        grid.DataSource = dataset;
        grid.DataBind();
    }
    catch (Exception x)
    {
        errorMessage.Text += x.Message;
    }

    // Add control to the controls collection of the Web Part.
    Controls.Add(grid);
    Controls.Add(errorMessage);
    base.CreateChildControls();
}

  6. Fügen Sie der WebPart1-Klasse die folgende Methode hinzu.Mit diesem Code werden die folgenden Aufgaben ausgeführt:

    • Erstellt ein Verb, das im Verbmenü des gerenderten Webparts angezeigt wird.

    • Behandelt das Ereignis, das ausgelöst wird, wenn der Benutzer das Verb im Verbmenü auswählt.In diesem Code wird die Liste der Mitarbeiter gefiltert, die im Datenraster angezeigt wird.

    Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
    Get
        Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
            New WebPartEventHandler(AddressOf CustomVerbEventHandler))

        customVerb.Text = verbText
        customVerb.Description = "Shows only employees that are managers"

        Dim newVerbs() As WebPartVerb = {customVerb}

        Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
    End Get
End Property

Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
    Dim titleColumn As Integer = 2

    Dim item As DataGridItem
    For Each item In grid.Items
        If item.Cells(titleColumn).Text <> "Manager" Then
            If item.Visible = True Then
                item.Visible = False
            Else
                item.Visible = True
            End If
        End If
    Next item
    If verbText = "Show Managers Only" Then
        verbText = "Show All Employees"
    Else
        verbText = "Show Managers Only"
    End If
End Sub

    public override WebPartVerbCollection Verbs
{
    get
    {
        WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
            new WebPartEventHandler(CustomVerbEventHandler));

        customVerb.Text = verbText;
        customVerb.Description = "Shows only employees that are managers";

        WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };

        return new WebPartVerbCollection(base.Verbs, newVerbs);
    }
}

protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
{
    int titleColumn = 2;

    foreach (DataGridItem item in grid.Items)
    {
        if (item.Cells[titleColumn].Text != "Manager")
        {
            if (item.Visible == true)
            {
                item.Visible = false;
            }
            else
            {
                item.Visible = true;
            }
        }

    }
    if (verbText == "Show Managers Only")
    {
        verbText = "Show All Employees";
    }
    else
    {
        verbText = "Show Managers Only";
    }
}

Testen des Webparts

Wenn Sie das Projekt ausführen, wird die SharePoint-Website geöffnet.Das Webpart wird automatisch dem Webpartkatalog in SharePoint hinzugefügt.Sie können das Webpart jeder Webpartseite hinzufügen.

So testen Sie das Webpart

  1. Fügen Sie folgendes XML in eine Editor-Datei ein.Diese XML-Datei enthält die Beispieldaten, die im Webpart angezeigt werden.

    <?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="https://schemas.microsoft.com/vsto/samples">
       <employee>
           <name>David Hamilton</name>
           <hireDate>2001-05-11</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Karina Leal</name>
           <hireDate>1999-04-01</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Nancy Davolio</name>
           <hireDate>1992-05-01</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Steven Buchanan</name>
           <hireDate>1955-03-04</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Suyama Michael</name>
           <hireDate>1963-07-02</hireDate>
           <title>Sales Associate</title>
       </employee>
    </employees>

  2. Im Editor auf der Menüleiste, wählen Sie Datei, Speichern unter aus.

  3. Speichern unter im Dialogfeld in der Liste Dateityp, wählen Sie Alle Dateien aus.

  4. Im Feld geben Sie Dateiname data.xml ein.

  5. Wählen Sie einen beliebigen Ordner, indem Sie die Schaltfläche Ordner durchsuchen verwenden aus, und wählen Sie dann die Schaltfläche Speichern aus.

  6. In Visual Studio wählen Sie die F5 Schlüssel aus.

    Die SharePoint-Website wird geöffnet.

  7. Klicken Sie im Menü Websiteaktionen wählen Sie Weitere Optionen aus.

  8. Auf der Seite Erstellen den Webpartseite-Typ aus, und wählen Sie die Schaltfläche Erstellen aus.

  9. Auf der Seite Neue Webpartseite geben Sie die Seite SampleWebPartPage.aspx, und wählen Sie dann die Schaltfläche Erstellen aus.

    Die Webpartseite wird angezeigt.

  10. Wählen Sie eine Zone auf der Webpartseite aus.

  11. Oben auf der Seite die Registerkarte EINFG aus, und wählen Sie dann die Schaltfläche Webpart aus.

  12. Im Bereich Kategorien wählen Sie den Ordner Benutzerdefiniert aus, wählen Sie das WebPart1 Webpart aus, und wählen Sie dann die Schaltfläche Hinzufügen aus.

    Das Webpart wird auf der Seite angezeigt.

Testen der benutzerdefinierten Eigenschaft

Um das im Webpart angezeigte Datenraster aufzufüllen, geben Sie den Pfad der XML-Datei an, die Daten zu jedem Mitarbeiter enthält.

So testen Sie die benutzerdefinierte Eigenschaft

  1. Wählen Sie den Pfeil, der auf der rechten Seite des Webparts angezeigt wird, und wählen Sie dann Webpart bearbeiten im Menü aus, das angezeigt wird.

    Ein Bereich, der Eigenschaften für das Webpart enthält, wird auf der rechten Seite der Seite angezeigt.

  2. Erweitern Sie im Bereich den Knoten VERSCHIEDENES, geben Sie den Pfad der XML-Datei, die Sie zuvor erstellt haben, wählen Sie die Schaltfläche Übernehmen auswählen und dann die Schaltfläche OK.

    Überprüfen Sie, ob eine Liste von Mitarbeitern im Webpart angezeigt wird.

Testen des Webpartverbs

Zeigen Sie Mitarbeiter an, die keine Manager sind, und blenden Sie diese aus, indem Sie auf ein Element klicken, das im Verbmenü des Webparts angezeigt wird.

So testen Sie das Webpartverb

  1. Wählen Sie den Pfeil, der auf der rechten Seite des Webparts angezeigt wird, und wählen Sie dann Nur Manager anzeigen im Menü aus, das angezeigt wird.

    Nur Mitarbeiter, die Manager sind, werden im Webpart angezeigt.

  2. Wählen Sie den Pfeil erneut aus, und wählen Sie dann Alle Mitarbeiter anzeigen im Menü aus, das angezeigt wird.

    Alle Mitarbeiter werden im Webpart angezeigt.

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines SharePoint-Webparts

Gewusst wie: Erstellen eines SharePoint-Webparts mithilfe eines Designers

Exemplarische Vorgehensweise: Erstellen eines Webparts für SharePoint mithilfe eines Designers

Weitere Ressourcen

Erstellen von Webparts für SharePoint