Exemplarische Vorgehensweise: Erstellen eines Webparts für SharePoint

Artikel
06/19/2023

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 Verbenmenü des gerenderten Webparts angezeigt wird. Verben ermöglichen es dem Benutzer, die im Webpart angezeigten Daten zu ändern.
Testen des Webparts in SharePoint.

Hinweis

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. Diese Elemente sind von der jeweiligen Visual Studio-Version und den verwendeten Einstellungen abhängig. Weitere Informationen finden Sie unter Personalisieren von Visual Studio-IDE.

Voraussetzungen

Unterstützte Editionen von Microsoft Windows und SharePoint.
Visual Studio 2017 oder Azure DevOps Services.

Erstellen eines leeren SharePoint-Projekts

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

Starten Sie Visual Studio mit der Option Als Administrator ausführen.
Wählen Sie in der Menüleiste Datei>Neu>Projekt aus.
Erweitern Sie im Dialogfeld Neues Projekt den Knoten SharePoint unter der gewünschten Sprache, und wählen Sie anschließend den Knoten 2010 aus.
Im Bereich Vorlagen wählen Sie SharePoint 2010-Projekt und 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.
Wählen Sie das Optionsfeld Als Farmlösung bereitstellen aus, und wählen Sie dann die Schaltfläche Fertig stellen aus, um die lokale SharePoint-Standardwebsite zu übernehmen.

Hinzufügen eines Webparts zum Projekt

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

Wählen Sie in der Menüleiste Projekt>Neues Element hinzufügen aus.
Erweitern Sie im Dialogfeld Neues Element hinzufügen im Bereich Installierte Vorlagen den Knoten SharePoint, und wählen Sie dann den Knoten 2010 aus.
Wählen Sie in der Liste der SharePoint-Vorlagen die Vorlage Webpart aus, und klicken Sie dann auf die Schaltfläche Hinzufügen.

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.

Öffnen Sie im Projektmappen-ExplorerWebPart1.vb (in Visual Basic) oder WebPart1.cs (in C#).

Die Codedatei für das Webpart wird im Code-Editor geöffnet.
Fügen Sie am Anfang der Codedatei des Webparts die folgenden Anweisungen hinzu.
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```
Fügen Sie der WebPart1 -Klasse den 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.
  - C#
  - VB
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```

Fügen Sie der WebPart1 -Klasse den 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 string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

<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

Ersetzen Sie die CreateChildControls-Methode durch den folgenden Code. Mit diesem Code werden die folgenden Aufgaben durchgefü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 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();
}

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

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

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

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

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";
    }
}

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

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.

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="http://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>

Wählen Sie in Editor in der Menüleiste Datei>Speichern unter aus.
Wählen Sie im Dialogfeld Speichern unter in der Liste Dateityp die Option Alle Dateien aus.
Geben Sie im Feld Dateiname den Namen data.xml ein.
Wählen Sie über die Schaltfläche Ordner durchsuchen einen Ordner aus, und klicken Sie dann auf die Schaltfläche Speichern.
In Visual Studio drücken Sie die Taste F5.

Die SharePoint-Website wird geöffnet.
Klicken Sie im Menü Websiteaktionen auf Weitere Optionen.
Auf der Seite Erstellen wählen Sie den Typ Webpartseite aus, und wählen Sie dann die Schaltfläche Erstellen aus.
Geben Sie auf der Seite Neue Webpartseite den Namen SampleWebPartPage.aspx für die Seite an, und klicken Sie dann auf die Schaltfläche Erstellen.

Die Webpartseite wird angezeigt.
Wählen Sie eine Zone auf der Webpartseite aus.
Wählen Sie im oberen Bereich der Webpartseite die Registerkarte Einfügen aus, und klicken Sie dann auf die Schaltfläche Webpart.
Wählen Sie im Bereich Kategorien den Ordner Benutzerdefiniert aus, wählen Sie das Webpart WebPart1 aus, und klicken Sie dann auf die Schaltfläche Hinzufügen.

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.

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

Ein Bereich, der Eigenschaften für das Webpart enthält, wird auf der rechten Seite der Seite angezeigt.
Erweitern Sie im Bereich den Knoten Sonstiges, geben Sie den Pfad zu der XML-Datei ein, die Sie zuvor erstellt haben, und wählen Sie Übernehmen und dann OK aus.

Ü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 Verbenmenü des Webparts angezeigt wird.

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

Nur Mitarbeiter, die Manager sind, werden im Webpart angezeigt.
Wählen Sie den Pfeil erneut aus, und wählen Sie dann im angezeigten Menü Alle Mitarbeiter anzeigen aus.

Alle Mitarbeiter werden im Webpart angezeigt.

Weitere Informationen

Erstellen von Webparts für SharePoint 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