Freigeben über

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

  • 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 visuell erstellen, indem Sie die Projektvorlage oder Visuelles Webpart in Visual Studio verwendet.

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.

    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 Webpartprojekts

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

So erstellen Sie ein visuelles Webpartprojekt

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

  2. Klicken Sie auf der Menüleiste wählen Sie Datei, Neu, Projekt aus.Wenn die IDE festgelegt wird, um Visual Basic-Entwicklungseinstellungen, auf der Menüleiste zu verwenden, wählen Sie Datei, Neues Projekt aus.

    Das Dialogfeld Neues Projekt wird angezeigt.

  3. Im Dialogfeld Neues Projekt entweder mit Visual C# oder Visual BasicSharePoint, erweitern Sie den Knoten, und wählen Sie dann den Knoten 2010 aus.

  4. Im Bereich Von Visual Studio installierte Vorlagen die Visuelles SharePoint 2010-Webpart Vorlage aus, und wählen Sie dann die Schaltfläche OK aus.

    Der Assistent zum Anpassen von SharePoint wird angezeigt.Mit diesem Assistenten verwenden, können Sie die Site angeben, die Sie verwenden, um das Projekt und die Vertrauensebene der Projektmappe zu debuggen.

  5. Im Wie lautet die Vertrauensebene für diese SharePoint-Lösung?-Abschnitt aktivieren Sie das Optionsfeld Als Farmlösung bereitstellen.

  6. Wählen Sie die Schaltfläche Fertig stellen, um die standardmäßige lokale SharePoint-Website zu akzeptieren.

Entwerfen des Webparts

Entwerfen Sie das Webpart, indem Sie Steuerelemente aus Werkzeugkasten auf die Oberfläche des Benutzersteuerelements hinzufügen.

So entwerfen Sie das Layout für das Webpart

  1. Klicken Sie im Visual Web Developer-Designer Entwurf wählen Sie die Registerkarte, um zur Entwurfsansicht zu wechseln.

  2. Klicken Sie auf der Menüleiste wählen Sie Ansicht, Werkzeugkasten aus.

  3. Im Knoten StandardWerkzeugkasten, aktivieren Sie das CheckBoxList-Steuerelement aus und führen Sie dann einen der folgenden Schritte aus:

    • Öffnen Sie das Kontextmenü für das Steuerelement CheckBoxList und wählen Sie Kopieren aus, wählen Sie die erste Zeile im Designer aus, öffnen Sie das Kontextmenü für die Zeile, und wählen Sie dann Einfügen aus.

    • Ziehen Sie das Steuerelement CheckBoxList von Werkzeugkasten und fügen Sie es an die erste Zeile im Designer an.

  4. Wiederholen Sie den vorherigen Schritt, aber bewegen Sie eine Schaltfläche auf die nächste Zeile des Designers.

  5. Wählen Sie im Designer die Schaltfläche button1 aus.

  6. Wählen Sie auf der Menüleiste die Optionen Ansicht und Eigenschaftenfenster aus.

    Das Eigenschaftenfenster wird geöffnet.

  7. In der Text-Eigenschaft der Schaltfläche, geben Sie ein Update.

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

  1. Führen Sie einen der folgenden Schritte aus:

    • Doppelklicken Sie im Designer auf die Schaltfläche Aktualisieren.

    • Im Fenster Eigenschaften für die Schaltfläche Aktualisieren, wählen Sie die Schaltfläche Ereignisse aus.In der Eigenschaft Klicken geben Sie Button1_Click ein und wählen Sie dann die EINGABETASTE aus.

    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.

  2. 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;

  3. Fügen Sie der VisualWebPart1-Klasse folgende Codezeile hinzu.In diesem Code wird ein monatliches Kalenderansichtssteuerelement deklariert.

    Private MonthlyCalendarView1 As MonthlyCalendarView

    private MonthlyCalendarView MonthlyCalendarView1;

  4. Ersetzen Sie die Page_Load-Methode der VisualWebPart1-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";
}

  5. 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 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 die folgenden Aufgaben aus:

  • Fügen Sie jeder von zwei separaten Kalenderlisten ein Ereignis hinzu.

  • Fügen Sie das Webpart einer Webpartseite hinzu.

  • Geben Sie Listen an, die in die monatliche Kalenderansicht eingeschlossen werden.

So fügen Sie Kalenderlisten der Website Ereignisse hinzu

  1. In Visual Studio wählen Sie die F5-TASTE aus.

    Die SharePoint-Website wird geöffnet und die Microsoft SharePoint Foundation 2010 Schnellstartleiste wird auf der Seite.

  2. Klicken Sie auf der Schnellstartleiste unter Listen, wählen Sie den Kalender Link aus.

    Die Seite Kalender wird angezeigt.

  3. Wählen Sie die Registerkarte Ereignisse aus, und wählen Sie dann Neues Ereignis auf dem Menüband aus.

  4. Im Feld geben Sie Titel-Ereignis im Standardkalender ein, und wählen Sie dann die Schaltfläche Speichern aus.

  5. Klicken Sie im Menü WebsiteaktionenWeitere Optionen wählen Sie den Befehl aus.

  6. Auf der Seite Erstellen den Kalender-Typ aus, geben Sie den Kalender, und wählen Sie dann die Schaltfläche Erstellen aus.

    Die Seite Benutzerdefinierter Kalender wird angezeigt.

  7. Fügen Sie ein Ereignis dem benutzerdefinierten Kalender hinzu, benennen Sie das Ereignis im benutzerdefinierten Kalender, und wählen Sie dann die Schaltfläche Speichern aus.

So fügen Sie das Webpart einer Webpartseite hinzu

  1. Klicken Sie im Menü WebsiteaktionenWeitere Optionen wählen Sie den Befehl aus.

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

  3. 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.

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

  5. Oben auf der Seite die Registerkarte Einfügen aus, und wählen Sie dann die Schaltfläche Webpart aus.

  6. Wählen Sie den Ordner Benutzerdefiniert aus, wählen Sie das VisualWebPart1 Webpart aus, und wählen Sie dann die Schaltfläche Hinzufügen aus.

    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 Listen angeben, die in die monatliche Kalenderansicht eingeschlossen werden

  • Geben Sie im Webpart Kalender, die Sie in der Kalenderansicht einschließen möchten, und wählen Sie dann die Schaltfläche Aktualisieren aus.

    Ereignisse aus allen Kalendern, dass Sie angegeben haben, werden in der Kalenderansicht.

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

Weitere Ressourcen

Erstellen von Webparts für SharePoint