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

Artikel
06/19/2023

Wenn Sie Webparts für eine SharePoint-Website erstellen, können Benutzer Inhalt, Darstellung und Verhalten der Seiten auf dieser Website direkt mithilfe eines Browsers ändern. Diese exemplarischen Vorgehensweise veranschaulicht die visuelle Erstellung eines Webparts mithilfe der SharePoint-Projektvorlage Visuelles Webpart in Visual Studio.

Das erstellte Webpart zeigt eine monatliche Kalenderansicht und ein Kontrollkästchen für jede Kalenderliste auf der Website an. Die Benutzer können angeben, welche Kalenderlisten in die monatliche Kalenderansicht eingeschlossen werden, indem sie die Kontrollkästchen aktivieren.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

Erstellen eines Webparts mithilfe der Projektvorlage Visuelles Webpart
Entwerfen des Webparts mit dem Visual Web Developer-Designer in Visual Studio
Hinzufügen von Code, um die Ereignisse der Steuerelemente des Webparts zu behandeln
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 in den folgenden Anweisungen aufgeführt werden. Diese Elemente sind von der jeweiligen Visual Studio-Version und den verwendeten Einstellungen abhängig. Weitere Informationen finden Sie unter Personalisieren der Visual Studio-IDE

Voraussetzungen

Zum Abschließen dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

Unterstützte Editionen von Windows und SharePoint.

Erstellen eines Webpartprojekts

Erstellen Sie zunächst mit der Projektvorlage Visuelles Webpart ein Webpartprojekt.

Starten Sie Visual Studio mit der Option Als Administrator ausführen.
Klicken Sie in der Menüleiste auf Datei>Neu>Projekt.
Wählen Sie im Dialogfeld Neues Projekt erstellen das leere SharePoint-Projekt* für die installierte SharePoint-Version aus. Wenn beispielsweise SharePoint 2019 installiert ist, wählen Sie die Vorlage SharePoint 2019 – Leeres Projekt aus.

Hinweis

Sie können auch nach Vorlagen suchen, indem Sie oben im Dialogfeld Neues Projekt erstellen in das Textfeld „Suchen“ den Begriff SharePoint eingeben. Sie können die Liste der Vorlagen außerdem so filtern, dass nur die Vorlagen für Office und SharePoint angezeigt werden. Wählen Sie hierzu im Dropdownfeld „Projekttyp“ die Option „Office“ aus. Weitere Informationen finden Sie unter Erstellen eines neuen Projekts in Visual Studio.
Geben Sie im Feld Name den Wert TestProject1 ein, und wählen Sie dann die Schaltfläche Erstellen aus.
Wählen Sie im Abschnitt Wie lautet die Vertrauensebene für diese SharePoint-Lösung? die Optionsschaltfläche Als Farmlösung bereitstellen aus.
Wählen Sie die Schaltfläche Fertig stellen aus, um die lokale SharePoint-Standardwebsite zu übernehmen.

Entwerfen des Webparts

Entwerfen Sie das Webpart, indem Sie der Oberfläche des Visual Web Developer-Designers Steuerelemente aus der Toolbox hinzufügen.

Klicken Sie im Visual Web Developer-Designer auf die Registerkarte Entwurf, um zur Designansicht zu wechseln.
Wählen Sie in der Menüleiste Ansicht>Toolbox aus.
Wählen Sie im Knoten Standard in der Toolbox das Steuerelement CheckBoxList aus, und führen Sie dann einen der folgenden Schritte aus:
- Öffnen Sie das Kontextmenü für das Steuerelement CheckBoxList, wählen Sie Kopieren aus, öffnen Sie das Kontextmenü für die erste Zeile im Designer. Klicken Sie dann auf Einfügen.
- Ziehen Sie das Steuerelement CheckBoxList aus der Toolbox, und verbinden Sie das Steuerelement mit der ersten Zeile im Designer.
Wiederholen Sie den vorherigen Schritt, aber verschieben Sie eine Schaltfläche in die nächste Zeile des Designers.
Wählen Sie im Designer die Schaltfläche Button1 aus.
Wählen Sie auf der Menüleiste Ansicht>Eigenschaftenfenster aus.

Das Fenster Eigenschaften wird geöffnet.
Geben Sie in der Eigenschaft Text der Schaltfläche Aktualisieren ein.

Behandeln der Ereignisse von Steuerelementen des Webparts

Fügen Sie Code hinzu, der es dem Benutzer ermöglicht, der Masterkalenderansicht Kalender hinzuzufügen.

Führen Sie einen der folgenden Schritte aus:
- Doppelklicken Sie im Designer auf die Schaltfläche Aktualisieren.
- Wählen Sie im Fenster Eigenschaften für die Schaltfläche Aktualisieren die Schaltfläche Ereignisse aus. Geben Sie in der Eigenschaft Klicken den Wert Button1_Click ein, und drücken dann die EINGABETASTE.
  
  Die Benutzersteuerelement-Codedatei wird im Code-Editor geöffnet, und der Button1_Click-Ereignishandler wird angezeigt. Später fügen Sie diesem Ereignishandler Code hinzu.

Fügen Sie am Anfang der Benutzersteuerelement-Codedatei die folgenden Anweisungen hinzu.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls
Imports System.Web.UI.WebControls

Fügen Sie der VisualWebPart1-Klasse folgende Codezeile hinzu. In diesem Code wird ein monatliches Kalenderansichtssteuerelement deklariert.
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Ersetzen Sie die Page_Load-Methode der VisualWebPart1-Klasse durch folgenden Code. Mit diesem Code werden die folgenden Aufgaben durchgeführt:

Fügt dem Benutzersteuerelement eine monatliche Kalenderansicht hinzu.
Fügt ein Kontrollkästchen für jede Kalenderliste der Website hinzu.

Gibt eine Vorlage für jeden Typ von Element an, das in der Kalenderansicht angezeigt wird.

protected void Page_Load(object sender, EventArgs e)
{
    MonthlyCalendarView1 = new MonthlyCalendarView();
    this.Controls.Add(MonthlyCalendarView1);
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    if (CheckBoxList1.Items.Count == 0)
    {
        foreach (SPList listItem in thisWeb.Lists)
        {
            if (listItem.BaseTemplate == SPListTemplateType.Events)
            {
                CheckBoxList1.Items.Add(new ListItem(listItem.Title));
            }
        }
    }
    MonthlyCalendarView1.ItemTemplateName =
        "CalendarViewMonthItemTemplate";
    MonthlyCalendarView1.ItemAllDayTemplateName =
        "CalendarViewMonthItemAllDayTemplate";
    MonthlyCalendarView1.ItemMultiDayTemplateName =
        "CalendarViewMonthItemMultiDayTemplate";
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    MonthlyCalendarView1 = New MonthlyCalendarView()
    Me.Controls.Add(MonthlyCalendarView1)
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    If CheckBoxList1.Items.Count = 0 Then
        Dim listItem As SPList
        For Each listItem In thisWeb.Lists
            If listItem.BaseTemplate = SPListTemplateType.Events Then
                CheckBoxList1.Items.Add(New ListItem(listItem.Title))
            End If
        Next listItem
    End If
    MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate"
    MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate"
    MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate"
End Sub

Ersetzen Sie die Button1_Click-Methode der VisualWebPart1-Klasse durch folgenden Code. Mit diesem Code werden der Masterkalenderansicht Elemente aus jedem ausgewählten Kalender hinzugefügt.

protected void Button1_Click(object sender, EventArgs e)
{
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    foreach (ListItem item in CheckBoxList1.Items)
    {
        if (item.Selected == true)
        {
            SPList calendarList = thisWeb.Lists[item.Text];
            DateTime dtStart = DateTime.Now.AddDays(-7);
            DateTime dtEnd = dtStart.AddMonths(1).AddDays(7);
            SPQuery query = new SPQuery();
            query.Query = String.Format(
                "<Query>" +
                "<Where><And>" +
                "<Geq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{1}</Value></Geq>" +
                "<Leq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{2}</Value></Leq>" +
                "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" +
                "</Query>",
                "Start Time",
                dtStart.ToShortDateString(),
                dtEnd.ToShortDateString());

            foreach (SPListItem listItem in calendarList.GetItems(query))
            {
                SPCalendarItem calItem = new SPCalendarItem();
                calItem.ItemID = listItem["ID"].ToString();
                calItem.Title = listItem["Title"].ToString();
                calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian);
                calItem.StartDate = (DateTime)listItem["Start Time"];
                calItem.ItemID = listItem.ID.ToString();
                calItem.WorkSpaceLink = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.DisplayFormUrl = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.EndDate = (DateTime)listItem["End Time"];
                calItem.Description = listItem["Description"].ToString();
                if (listItem["Location"] != null)
                {
                    calItem.Location = listItem["Location"].ToString();
                }
                items.Add(calItem);
            }
            MonthlyCalendarView1.DataSource = items;
        }

    }

}

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    Dim item As ListItem
    For Each item In CheckBoxList1.Items
        If item.Selected = True Then
            Dim calendarList As SPList = thisWeb.Lists(item.Text)
            Dim dtStart As DateTime = DateTime.Now.AddDays(-7)
            Dim dtEnd As DateTime = dtStart.AddMonths(1).AddDays(7)
            Dim query As New SPQuery()
            query.Query = [String].Format("<Query>" + "<Where><And>" + _
                                          "<Geq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{1}</Value></Geq>" + _
                                          "<Leq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{2}</Value></Leq>" + _
                                          "</And></Where><OrderBy><FieldRef Name=""{0}"" /></OrderBy>" + _
                                          "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString())

            Dim listItem As SPListItem
            For Each listItem In calendarList.GetItems(query)
                Dim calItem As New SPCalendarItem()
                With calItem
                    .ItemID = listItem("ID").ToString()
                    .Title = listItem("Title").ToString()
                    .CalendarType = Convert.ToInt32(SPCalendarType.Gregorian)
                    .StartDate = CType(listItem("Start Time"), DateTime)
                    .ItemID = listItem.ID.ToString()
                    .WorkSpaceLink = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .DisplayFormUrl = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .EndDate = CType(listItem("End Time"), DateTime)
                    .Description = listItem("Description").ToString()
                End With

                If Not (listItem("Location") Is Nothing) Then
                    calItem.Location = listItem("Location").ToString()
                End If
                items.Add(calItem)
            Next listItem
            MonthlyCalendarView1.DataSource = items
        End If
    Next item

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. Um dieses Projekt zu testen, führen Sie folgende Aufgaben aus:

Fügen Sie jeder von zwei separaten Kalenderlisten ein Ereignis hinzu.
Fügen Sie das Webpart einer Webpartseite hinzu.
Geben Sie die Listen an, die in die monatliche Kalenderansicht eingeschlossen werden sollen.

So fügen Sie Kalenderlisten der Website Ereignisse hinzu

Drücken Sie in Visual Studio die Taste F5.

Die SharePoint-Website wird geöffnet, und auf der Seite wird die Schnellstartleiste von Microsoft SharePoint Foundation angezeigt.
Wählen Sie auf der Schnellstartleiste unter Listen den Link Kalender aus.

Die Seite Kalender wird geöffnet.

Wenn der Link „Kalender“ nicht in der Schnellstartleiste angezeigt wird, wählen Sie den Link Websiteinhalte aus. Wenn auf der Seite „Websiteinhalte“ kein Element Kalender angezeigt wird, erstellen Sie es.
Wählen Sie auf der Seite „Kalender“ einen Tag aus, und klicken Sie dann für den ausgewählten Tag auf den Link Hinzufügen, um ein Ereignis hinzuzufügen.
Geben Sie im Feld Titel den Wert Ereignis im Standardkalender ein, und klicken Sie dann auf die Schaltfläche Speichern.
Klicken Sie auf den Link Websiteinhalte, und wählen Sie dann die Kachel App hinzufügen aus.
Wählen Sie auf der Seite Erstellen den Typ Kalender aus, geben Sie dem Kalender einen Namen, und klicken Sie dann auf die Schaltfläche Erstellen.
Fügen Sie dem neuen Kalender ein Ereignis hinzu, geben Sie dem Ereignis den Namen Ereignis im benutzerdefinierten Kalender, und klicken Sie dann auf die Schaltfläche Speichern.

So fügen Sie das Webpart einer Webpartseite hinzu

Öffnen Sie auf der Seite Websiteinhalte den Ordner Websiteseiten.
Klicken Sie im Menüband auf die Registerkarte Dateien, öffnen Sie das Menü Neues Dokument, und wählen Sie dann den Befehl Webpartseite 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 im oberen Bereich der Webpartseite die Registerkarte Einfügen aus, und klicken Sie dann auf die Schaltfläche Webpart.
Wählen Sie den Ordner Benutzerdefiniert und anschließend das Webpart VisualWebPart1 aus, und klicken Sie dann auf die Schaltfläche Hinzufügen.

Das Webpart wird auf der Seite angezeigt. Die folgenden Steuerelemente werden für das Webpart angezeigt:
- Eine monatliche Kalenderansicht.
- Eine Schaltfläche Aktualisieren.
- Ein Kontrollkästchen Kalender.
- Ein Kontrollkästchen Benutzerdefinierter Kalender.

So geben Sie die Listen an, die in die monatliche Kalenderansicht eingeschlossen werden sollen

Geben Sie im Webpart Kalender an, die Sie in die monatliche Kalenderansicht einschließen möchten, und klicken Sie dann auf die Schaltfläche Aktualisieren.

Die Ereignisse aus allen angegebenen Kalendern werden in der monatlichen Kalenderansicht angezeigt.

Weitere Informationen

Erstellen von Webparts für SharePoint Gewusst wie: Erstellen eines SharePoint-Webparts Exemplarische Vorgehensweise: Erstellen eines Webparts für SharePoint

Share via