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

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 SharePoint-Projektvorlage Visuelles Webpart in Visual Studio 2010 visuell erstellt wird.

Das Webpart zeigt eine monatliche Kalenderansicht und ein Kontrollkästchen für jede Kalenderliste auf der Website an. Die Benutzer können auswählen, 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 mit 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.

Tipp

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 Arbeiten mit 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 2010 Professional oder eine Edition der Anwendungslebenszyklus-Verwaltung (Application Lifecycle Management, ALM) von Visual Studio.

Erstellen eines Webpartprojekts

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

So erstellen Sie ein visuelles Webpartprojekt

Starten Sie Visual Studio 2010 mit der Option Als Administrator ausführen.
Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt. Wenn die IDE auf die Verwendung der Visual Basic-Entwicklungseinstellungen festgelegt ist, klicken Sie im Menü Datei auf Neues Projekt.

Das Dialogfeld Neues Projekt wird angezeigt.
Öffnen Sie das Dialogfeld Neues Projekt, erweitern Sie den Knoten SharePoint unter der gewünschten Sprache, und wählen Sie anschließend den Knoten 2010 aus.
Wählen Sie im Bereich Von Visual Studio installierte Vorlagen die Vorlage Visuelles Webpart aus, und klicken Sie dann auf OK.

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.
Klicken Sie auf Fertig stellen, um die lokale SharePoint-Standardwebsite sowie die standardmäßige Vertrauensebene für die Projektmappe zu akzeptieren.

Standardmäßig zeigt der Visual Web Developer das Benutzersteuerelement des Projekts in der Ansicht Quelle an, in der die HTML-Elemente der Seite aufgeführt werden.

Entwerfen des Webparts

Entwerfen Sie das Webpart, indem Sie Steuerelemente aus der Toolbox auf die Oberfläche des Benutzersteuerelements ziehen.

So entwerfen Sie das Layout für das Webpart

Klicken Sie auf dem Visual Web Developer-Designer auf die Registerkarte Entwurf, um zur Entwurfsansicht zu wechseln.
Klicken Sie im Menü Ansicht auf Toolbox.
Ziehen Sie in der Toolbox aus der Gruppe Standard ein Steuerelement CheckBoxList und ein Steuerelement Button in den Designer.
Klicken Sie im Designer auf Button.
Klicken Sie im Menü Ansicht auf Eigenschaftenfenster.
Legen Sie im Eigenschaftenfenster die Text-Eigenschaft der Schaltfläche auf Aktualisieren fest.

Behandeln der Ereignisse von Steuerelementen des Webparts

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

So behandeln Sie Ereignisse der Steuerelemente des Webparts

Doppelklicken Sie im Designer auf die Schaltfläche Aktualisieren.

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.

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

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

Ersetzen Sie die Page_Load-Methode der VisualWebPart1UserControl-Klasse durch folgenden Code. Mit diesem Code werden die folgenden Aufgaben ausgefü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 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

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

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

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

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

    }

}

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.
Wählen Sie Listen aus, die in die monatliche Kalenderansicht eingeschlossen werden sollen.

So fügen Sie Kalenderlisten der Website Ereignisse hinzu

Drücken Sie in Visual Studio F5.

Die SharePoint-Website wird geöffnet, und die Microsoft SharePoint Foundation 2010-Schnellstartleiste wird auf der Seite angezeigt.
Klicken Sie auf der Schnellstartleiste unter Listen auf Kalender.

Die Seite Kalender wird angezeigt.
Klicken Sie auf Ereignisse und dann auf Neues Ereignis.
Geben Sie im Feld Titel im Standardkalender den Titel Ereignis ein, und klicken Sie dann auf Speichern.
Klicken Sie auf Websiteaktionen und dann auf Weitere Optionen.
Klicken Sie auf der Seite Erstellen auf Kalender, geben Sie einen Namen für den Kalender ein, und klicken Sie dann auf Erstellen.

Die Seite Benutzerdefinierter Kalender wird angezeigt.
Fügen Sie dem benutzerdefinierten Kalender ein neues Ereignis mit dem Namen Ereignis hinzu.

So fügen Sie das Webpart einer Webpartseite hinzu

Klicken Sie auf Websiteaktionen und dann auf Weitere Optionen.
Klicken Sie auf der Seite Erstellen auf Webpartseite und dann auf Erstellen.
Geben Sie auf der Seite Neue Webpartseite den Namen SampleWebPartPage.aspx für die Seite an, und klicken Sie dann auf Erstellen.

Die Webpartseite wird angezeigt.
Wählen Sie eine Zone auf der Webpartseite aus.
Klicken Sie am oberen Rand der Seite auf die Registerkarte Einfügen und dann auf Webpart.
Klicken Sie auf den Ordner Benutzerdefiniert, klicken Sie auf das Webpart VisualWebPart1 und dann auf 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 wählen Sie Listen aus, die in die monatliche Kalenderansicht eingeschlossen werden sollen

Wählen Sie im Webpart Kalender aus, die Sie in die monatliche Kalenderansicht einschließen möchten, und klicken Sie dann auf Aktualisieren.

Die Ereignisse aus allen ausgewählten Kalendern werden in der monatlichen Kalenderansicht angezeigt.