Návod: Vytvoření webové části pro službu SharePoint

Využitím webových částí mohou uživatelé upravit obsah, vzhled a chování stránek webu služby SharePoint pomocí prohlížeče.Tento návod ukazuje, jak vytvářet webové části pomocí šablony prvku Webová část v rámci aplikace Visual Studio 2010.

Webová část zobrazuje zaměstnance v komponentě data grid.Uživatel zadá umístění souboru, který obsahuje údaje o zaměstnancích.Uživatel má také možnost filtrovat komponentu data grid tak, že dojde k zobrazení pouze manažerů a zaměstnanců.

Tento návod ilustruje následující úkoly:

• Vytvoření webové části pomocí šablony prvku aplikace Visual Studio Webová část.

• Vytvoření vlastnosti, která může být nastavena uživatelem webové části.Vlastnost určuje umístění datového souboru se zaměstnanci.

• Vykreslení obsahu v rámci webové části přidáním ovládacích prvků do kolekce ovládacích prvků webové části.

• Vytvoření nové položky nabídky označené jako operace, která je zobrazena v rámci nabídky operací vykreslené webové části.Operace umožní provést uživateli úpravu dat, která se zobrazují v rámci webové části.

• Testování webové části v rámci služby SharePoint.

  [!POZNÁMKA]

  Váš počítač může zobrazit jiné názvy nebo umístění pro některé prvky uživatelského rozhraní sady Visual Studio v následujících pokynech.Tyto prvky jsou určeny verzí aplikace Visual Studio a použitým nastavením.Další informace naleznete v tématu Přizpůsobení nastavení pro vývoj v sadě Visual Studio.

Požadavky

Chcete-li dokončit tento návod, potřebujete následující komponenty:

• Podporované edice systému Microsoft Windows a služby SharePoint.Další informace naleznete v tématu Požadavky na vývoj řešení služby SharePoint.

• Visual Studio Professional nebo edice Visual Studio Application Lifecycle Management (ALM).

Vytvoření prázdného projekt služby SharePoint.

Nejdříve vytvořte Prázdný projekt služby SharePoint.Do projektu bude později přidána webová část použitím šablony Webová část.

Vytvoření Prázdného projektu služby SharePoint.

1. Spusťte Visual Studio pomocí možnosti Spustit jako správce.

2. Na panelu nabídky vyberte možnosti Soubor, Nový, Projekt.

3. V dialogovém okně Nový projekt rozbalte v rámci jazyka, který chcete použít, uzel SharePoint a poté vyberte uzel 2010.

4. V podokně Šablony vyberte položku Projekt služby SharePoint 2010 a poté klikněte na tlačítko OK.

   Zobrazí se Průvodce přizpůsobením SharePoint.Tento průvodce vám umožní vybrat web, který budete používat k ladění projektu a úroveň důvěryhodnosti řešení.

5. Zvolte možnost Nasadit jako řešení farmy a potom zvolte tlačítko Dokončit a přijměte tak výchozí místní web služby SharePoint.

Přidání webové části do projektu

Přidejte do projektu položku Webová část.Položka Webová část přidá soubor kódu webové části.Pro vykreslení obsahu webové části bude do souboru webové části později přidán kód.

Přidání webové části do projektu

1. V panelu nabídky vyberte možnosti Projekt, Přidat novou položku.

2. V dialogovém okně Nová položka, v podokně Nainstalované šablony rozbalte uzel SharePoint a poté zvolte uzel 2010.

3. V seznamu šablon vyberte šablonu Webová část a klikněte na tlačítko Přidat.

   V Průzkumníku řešení se objeví položka Webová část.

Vykreslování obsahu v rámci webové části

Přidáním ovládacích prvků do kolekce ovládacích prvků třídy webové části je možné určit, které ovládací prvky budou v rámci webové třídy zobrazeny.

Vykreslení obsahu v rámci webové části

1. V Průzkumníku řešení otevřete třídy WebPart1.vb (v jazyce Visual Basic) nebo WebPart1.cs (v jazyce C#).

   V editoru kódu se otevře soubor kódu webové části.

2. Na začátek souboru kódu webové části přidejte následující příkazy.

   Imports System.Data
   

   using System.Data;
   

3. Přidejte následující kód do třídy WebPart1.Kód deklaruje následující pole:

   • Komponentu data grid zobrazující zaměstnance v rámci webové části.

   • Text zobrazený v rámci ovládacího prvku, který je používán jako filtr pro komponentu data grid.

   • Popisek, který zobrazuje chybu, pokud nemůže komponenta data grid zobrazit data.

   • Řetězec, který obsahuje umístění datového souboru zaměstnanci.

   Private grid As DataGrid
   Private Shared verbText As String = "Show Managers Only" 
   Private errorMessage As New Label()
   Protected xmlFilePath As String
   

   private DataGrid grid;
   private static string verbText = "Show Managers Only";
   private Label errorMessage = new Label();
   protected string xmlFilePath;
   

4. Přidejte následující kód do třídy WebPart1.Kód přidá do webové části uživatelskou vlastnost s názvem DataFilePath.Uživatelská vlastnost je vlastnost, která může být nastavena v rámci služby SharePoint uživatelem.Vlastnost získává nebo nastavuje umístění XML datového souboru, který se používá k naplnění komponenty data grid.

   <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
   

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

5. Nahraďte metodu CreateChildControls následujícím kódem.Tento kód provede následující úlohy:

   • Přidá komponenty data grid a popisek, který byl deklarován v předchozím kroku.

   • Vytvoří vazbu mezi komponentou data grid a souborem XML, který obsahuje data o zaměstnanci.

   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
   

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

6. Přidejte do třídy WebPart1 následující metodu.Tento kód provede následující úlohy:

   • Vytvoří operaci, která se zobrazí v rámci nabídky operací webové části vykreslené webové části.

   • Obsluhuje událost vyvolanou uživatelem při výběru operace z nabídky operací.Kód filtruje seznam zaměstnanců, kteří se zobrazí v komponentě data grid.

   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
   

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

Testování webové části

Při spuštění projektu se otevře web SharePoint.Webová část je automaticky přidána do Galerie webových částí služby SharePoint.Webovou část lze přidat na libovolnou stránku webové části.

Testování webové části

1. Vložte následující kód jazyka XML do souboru programu Poznámkový blok.Tento soubor jazyka XML obsahuje ukázková data, která se zobrazí v rámci webové části.

   <?xml version="1.0" encoding="utf-8" ?>
       <employees xmlns="https://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>
   

2. Na panelu nabídek poznámkového bloku vyberte položku Soubor, Uložit jako.

3. V dialogovém okně Uložit jako vyberte v seznamu Uložit jako typ položku Všechny soubory.

4. Do pole Název zadejte data.xml.

5. Vyberte libovolný adresář pomocí tlačítka Procházet adresáře a poté klikněte na tlačítko Uložit.

6. V aplikaci Visual Studio stiskněte klávesu F5.

   Otevře se web služby SharePoint.

7. Z nabídky Akce webu vyberte Více nastavení.

8. Na stránce Vytvořit vyberte typ Stránka webové části a poté klikněte na tlačítko Vytvořit.

9. Na stránce Nová stránka webových částí pojmenujte stránku jako SampleWebPartPage.aspx a klikněte na tlačítko Vytvořit.

   Zobrazí se stránka webové části.

10. Vyberte libovolnou oblast stránky webové části.

11. V horní oblasti stránky webové části zvolte kartu Vložit a klikněte na tlačítko Webová část.

12. Na kartě Kategorie, zvolte adresář Vlastní1, poté vyberte webovou část WebPart a následně klikněte na tlačítko Přidat.

    Na stránce se zobrazí webová část.

Testování uživatelské vlastnosti

Pro naplnění komponenty data grid, která se zobrazí v rámci webové části, je třeba zadat umístění souboru jazyka XML, který obsahuje data o každém zaměstnanci.

Testování uživatelské vlastnosti

1. Vyberte šipku, která se zobrazí na pravé horní straně webové části a poté vyberte Upravit webovou část z menu, které se zobrazí.

   Podokno, které obsahuje vlastnosti webové části se zobrazí na pravé straně stránky.

2. V rámci podokna rozbalte uzel Různé, zadejte cestu k souboru jazyka XML, který jste vytvořili dříve a klikněte na tlačítko Použít, poté klikněte na tlačítko OK.

   Ověřte, zda se v rámci webové části zobrazí seznam zaměstnanců.

Testování operace webové části

Kliknutím na položku, která se zobrazí v nabídce operací webové části zobrazíte nebo skryjete zaměstnance, kteří nejsou manažery.

Testování operace webové části

1. Vyberte šipku, která se zobrazí na pravé horní straně webové části a poté vyberte z nabídky, která se zobrazí Zobrazit pouze manažery.

   V rámci webové části se zobrazí pouze zaměstnanci, kteří nejsou manažery.

2. Vyberte šipku znovu a zvolte z nabídky, která se zobrazí Zobrazit všechny zaměstnance.

   Ve webové části se zobrazí všichni zaměstnanci.

Viz také

Úkoly

Postupy: Vytvoření webové části služby SharePoint

Postupy: Vytvoření webové části služby SharePoint pomocí návrháře

Návod: Vytvoření webové části pro službu SharePoint pomocí návrháře

Další zdroje

Vytváření webových částí pro službu SharePoint