Erstellen visueller Webparts für SharePoint 2010

SharePoint 2010

SharePoint-Schnellstartbanner

Erste Schritte mit Webparts in SharePoint 2010: Das Erstellen von Webparts ist eine der gängigsten Aufgaben, die von SharePoint-Entwicklern ausgeführt werden. Hier finden Sie Informationen zum Erstellen und Bereitstellen visueller Webparts, mit denen hierarchische Ansichten von Listenelementen und Unterwebsites angezeigt werden.

Letzte Änderung: Mittwoch, 12. Januar 2011

Gilt für: SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

Inhalt dieses Artikels
Erstellen eines visuellen Webpartprojekts
Hinzufügen eines TreeView-Steuerelements zum Webpart
Hinzufügen von Code zum Projekt
Erstellen und Bereitstellen des Webparts
Erstellen einer Webparts-Seite
Hinzufügen des Webparts zur Webparts-Seite
Nächste Schritte

In diesem Artikel werden Sie ein Webpart erstellen und bereitstellen, mit dem hierarchische Daten in einer Baumstruktur angezeigt werden. Für diese Aufgabe müssen Sie die folgenden Schritte ausführen:

Für diese Aufgabe erstellen Sie ein visuelles Webpartprojekt in Microsoft Visual Studio 2010.

  1. Starten Sie Visual Studio 2010, klicken Sie auf Datei, zeigen Sie auf Neu, und klicken Sie dann auf Projekt.

  2. Navigieren Sie im Abschnitt Installierte Vorlagen zum Knoten Visual C#, klicken Sie auf SharePoint, und klicken Sie anschließend auf 2010.

  3. Wählen Sie die Projektvorlage Visuelles Webpart aus (siehe Abbildung 1), geben Sie einen Namen (z. B. SampleWebPart) und einen Speicherort für das Projekt ein, und klicken Sie dann auf OK.

    Abbildung 1. Auswählen des Typs des visuellen Webpartprojekts

    Den Visual-Webpart-Projekttyp auswählen

  4. Wählen Sie in der Dropdownliste Welche lokale Site soll für das Debugging verwendet werden? die zu verwendende Website aus (z. B. http://localhost/sites/SampleWebSite). Wählen Sie außerdem die Option Als Farmlösung bereitstellen aus, und klicken Sie dann auf Fertig stellen.

    Beachten Sie, dass nach dem Erstellen des Projekts der Projektmappen-Explorer das standardmäßige visuelle Webpart VisualWebPart1 enthält (siehe Abbildung 2). Darüber hinaus sind im Projektmappen-Explorer die Knoten Features und Paket vorhanden. Mit einem Feature wird Ihre Anwendung auf eine Weise organisiert, die für SharePoint Foundation sinnvoll ist. Features können in SharePoint Foundation auf der Website- oder Webebene bereitgestellt werden. Das Paket enthält Features und andere Elemente, die beim Bereitstellen von Projektmappen in SharePoint Foundation verwendet werden.

    Abbildung 2. Das SampleWebPart-Projekt im Projektmappen-Explorer

    Das SampleWebPart-Projekt im Projektmappen-Explorer

Für diese Aufgabe fügen Sie der Entwurfsoberfläche des Webparts ein TreeView-Steuerelement hinzu. Mit dem TreeView-Steuerelement wird eine hierarchische Ansicht von Listen und Unterwebsites angezeigt.

  1. Erweitern Sie im Projektmappen-Explorer den Knoten VisualWebPart1, klicken Sie mit der rechten Maustaste auf die Datei VisualWebPart1UserControl.ascx, und klicken Sie dann auf Ansicht-Designer. Dadurch wird eine Ansicht geöffnet, in der Sie Steuerelemente per Drag & Drop aus der Toolbox in der Webpart-Designeroberfläche einfügen können.

  2. Klicken Sie in der Toolbox auf der linken Seite des Bildschirms auf den Abschnitt Navigation, und ziehen Sie ein TreeView-Steuerelement auf die Entwurfsoberfläche. Falls die Toolbox nicht auf der linken Seite des Bildschirms angezeigt wird, klicken Sie im Menü Ansicht auf Toolbox.

  3. Wählen Sie das TreeView-Steuerelement aus, und geben Sie im Eigenschaftenpanel in der rechten unteren Ecke des Visual Studio-Bildschirms den Namen siteStructure in das Feld ID ein.

Für diese Aufgabe fügen Sie dem Projekt Microsoft Visual C#-Code hinzu, mit dem alle Listen und Unterwebsites in der SharePoint-Website durchlaufen und dem TreeView-Steuerelement hinzugefügt werden.

  1. Erweitern Sie im Projektmappen-Explorer den Knoten VisualWebPart1UserControl.ascx, klicken Sie mit der rechten Maustaste auf den Knoten VisualWebPart1UserControl.ascx.cs, und klicken Sie dann auf Code anzeigen.

  2. Ersetzen Sie anschließend den Code im Codebildschirm durch den folgenden C#-Code.

    using System;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.Utilities;
    using System.Web;
    namespace BonnevilleTestBed.Bonneville
    {
      public partial class BonnevilleUserControl : UserControl
      {
        protected void Page_Load(object sender, EventArgs e)
        {
          SPWeb thisWeb = null;
          TreeNode node;
          thisWeb = SPContext.Current.Web;
          //Add the Web's title as the display text for the tree node, and add the URL as the NavigateUri.
          node = new TreeNode(thisWeb.Title, null, null, thisWeb.Url, "_self");
          //The Visual Web Part has a treeview control called siteStructure.
          siteStructure.Nodes.Add(node);
          //Get a reference to the current node, so child nodes can be added in the correct position.
          TreeNode parentNode = node;
          //Iterate through the Lists collection of the Web.
          foreach (SPList list in thisWeb.Lists)
          {
            if (!list.Hidden)
            {
              node = new TreeNode(list.Title, null, null, list.DefaultViewUrl, "_self");
              parentNode.ChildNodes.Add(node);
            }
          }
          foreach (SPWeb childWeb in thisWeb.Webs)
          {
            //Call our own helper function for adding each child Web to the tree.
            addWebs(childWeb, parentNode);
            childWeb.Dispose();
          }
          siteStructure.CollapseAll();
        }
        void addWebs(SPWeb web, TreeNode parentNode)
        {
          TreeNode node;
          node = new TreeNode(web.Title, null, null, web.Url, "_self");
          parentNode.ChildNodes.Add(node);
          parentNode = node;
          foreach (SPList list in web.Lists)
          {
            if (!list.Hidden)
            {
              node = new TreeNode(list.Title, null, null, list.DefaultViewUrl, "_self");
              parentNode.ChildNodes.Add(node);
            }
          }
          foreach (SPWeb childWeb in web.Webs)
          {
            //Call the addWebs() function from itself (i.e. recursively) 
            //to add all child Webs until there are no more to add.
            addWebs(childWeb, parentNode);
         childWeb.Dispose();
    
          }
        }
      }
    }
    
    
    

Für diese Aufgabe werden Sie das Webpartprojekt erstellen und bereitstellen.

Verwenden Sie eine der folgenden Optionen, um das Projekt zu erstellen und bereitzustellen:

  • Verwenden Sie beim Debuggen der SharePoint-Lösung die F5-Taste zum Erstellen und Bereitstellen Ihrer Projektmappe. Dadurch beinhaltet der Debugvorgang Optionen wie z. B. Hilfe beim Erstellen einer Webpartseite und die Möglichkeit des Zurücksetzens der Internetinformationsdienste (IIS).

  • Alternativ können Sie Ihre Projektmappe erstellen und bereitstellen, indem Sie im Menü Erstellen auf Projektmappe erstellen klicken, die fehlerfreie Erstellung der Projektmappe überprüfen und anschließend Projektmappe bereitstellen auswählen.

Für diese Aufgabe erstellen Sie eine Webparts-Seite für das Webpart, außer es wurde bereits eine Webparts-Seite erstellt.

  1. Wenn Sie F5 zum Debuggen der Anwendung gedrückt haben, wird standardmäßig die Seite angezeigt, auf der Sie eine Webpartseite erstellen. Öffnen Sie andernfalls die SharePoint-Website, klicken Sie auf Websiteaktionen, klicken Sie auf Alle Websiteinhalte einblenden, klicken Sie auf Erstellen, verschieben Sie den Fensterinhalt, und wählen Sie die Option Webpartseite aus.

  2. Geben Sie im Dialogfeld Webpartseite die angeforderten Informationen zu dieser Webparts-Seite ein. Beispielsweise einen Namen (SampleWebPartPage) und eine Layoutvorlage für die Seite.

  3. Wählen Sie in der Dropdownliste Dokumentbibliothek die Option Websiteseiten aus, und klicken Sie dann auf Erstellen. Die Webparts-Seite wird von SharePoint erstellt und angezeigt.

Abbildung 3. Eine Webpart-Beispielseite

Eine Webpart-Beispielseite

Für diese Aufgabe fügen Sie der Webparts-Seite das Webpart hinzu und testen die Projektmappe.

  1. Klicken Sie auf der Webparts-Seite in das Textfeld Webpart hinzufügen des Bereichs, in dem das Webpart angezeigt werden soll.

  2. Klicken Sie in der Liste Kategorien auf Benutzerdefiniert. Klicken Sie im Feld Webparts auf VisualWebPart1.

  3. Klicken Sie im Feld Informationen zum Webpart oben auf der Seite auf Hinzufügen. Das Webpart wird wie in Abbildung 4 dargestellt dem von Ihnen ausgewählten Bereich hinzugefügt. Beachten Sie, dass die Listen und Unterwebsites in einer hierarchischen Ansicht dargestellt werden.

Abbildung 4. Das Webpart nach dem Hinzufügen zu einem Bereich der Webpartseite

Das Webpart nach dem Hinzufügen zur Zone
Anzeigen: