Przewodnik: tworzenie składnika Web Part dla programu SharePoint

składniki Web Part umożliwiają użytkownikom bezpośrednie modyfikowanie zawartości, wyglądu i zachowania stron witryny programu SharePoint przy użyciu przeglądarki. W tym przewodniku pokazano, jak utworzyć składnik Web Part przy użyciu szablonu elementu składnika Web Part w programie Visual Studio 2010.

Składnik Web Part wyświetla pracowników w siatce danych. Użytkownik określa lokalizację pliku zawierającego dane pracownika. Użytkownik może również filtrować siatkę danych, aby pracownicy, którzy są menedżerami, pojawili się tylko na liście.

W instruktażu przedstawiono następujące zagadnienia:

Tworzenie składnika Web Part przy użyciu szablonu elementu składnika Web Part programu Visual Studio.
Tworzenie właściwości, którą można ustawić przez użytkownika składnika Web Part. Ta właściwość określa lokalizację pliku danych pracownika.
Renderowanie zawartości w składniku Web Part przez dodanie kontrolek do kolekcji kontrolek składników Web Part.
Tworzenie nowego elementu menu nazywanego czasownikiem wyświetlanym w menu czasowników renderowanego składnika Web Part. Czasowniki umożliwiają użytkownikowi modyfikowanie danych wyświetlanych w składniku Web Part.
Testowanie składnika Web Part w programie SharePoint.

Uwaga

Na komputerze w poniższych instrukcjach mogą być wyświetlane inne nazwy i lokalizacje niektórych elementów interfejsu użytkownika programu Visual Studio. Te elementy są określane przez numer wersji Visual Studio oraz twoje ustawienia. Aby uzyskać więcej informacji, zobacz Personalizowanie środowiska IDE programu Visual Studio.

Wymagania wstępne

Obsługiwane wersje systemów Microsoft Windows i SharePoint.
Visual Studio 2017 lub Azure DevOps Services.

Tworzenie pustego projektu programu SharePoint

Najpierw utwórz pusty projekt programu SharePoint. Później dodasz składnik Web Part do projektu przy użyciu szablonu elementu składnika Web Part .

Uruchom program Visual Studio przy użyciu opcji Uruchom jako Administracja istrator.
Na pasku mężczyzn wybierz pozycję Plik>nowy>projekt.
W oknie dialogowym Nowy projekt rozwiń węzeł programu SharePoint w obszarze języka, którego chcesz użyć, a następnie wybierz węzeł 2010.
W okienku Szablony wybierz pozycję Projekt programu SharePoint 2010, a następnie wybierz przycisk OK .

Zostanie wyświetlony Kreator dostosowywania programu SharePoint. Ten kreator umożliwia wybranie witryny, która będzie używana do debugowania projektu i poziomu zaufania rozwiązania.
Wybierz przycisk Wdróż jako rozwiązanie farmy, a następnie wybierz przycisk Zakończ, aby zaakceptować domyślną lokalną witrynę programu SharePoint.

Dodawanie składnika Web Part do projektu

Dodaj element składnika Web Part do projektu. Element składnika Web Part dodaje plik kodu składnika Web Part. Później dodasz kod do pliku kodu składnika Web Part w celu renderowania zawartości składnika Web Part.

Na pasku menu wybierz pozycję Projekt>Dodaj nowy element.
W oknie dialogowym Dodawanie nowego elementu w okienku Zainstalowane szablony rozwiń węzeł programu SharePoint, a następnie wybierz węzeł 2010.
Na liście szablonów programu SharePoint wybierz szablon składnika Web Part , a następnie wybierz przycisk Dodaj .

Element składnika Web Part zostanie wyświetlony w Eksplorator rozwiązań.

Renderowanie zawartości w składniku Web Part

Możesz określić, które kontrolki mają być wyświetlane w składniku Web Part, dodając je do kolekcji kontrolek klasy składników Web Part.

W Eksplorator rozwiązań otwórz WebPart1.vb (w Visual Basic) lub WebPart1.cs (w języku C#).

Plik kodu składnika Web Part zostanie otwarty w Edytorze kodu.
Dodaj następujące dyrektywy na początku pliku kodu składnika Web Part.
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```
Dodaj poniższy kod do klasy WebPart1. Ten kod deklaruje następujące pola:
- Siatka danych do wyświetlania pracowników w składniku Web Part.
- Tekst wyświetlany w kontrolce używanej do filtrowania siatki danych.
- Etykieta, która wyświetla błąd, jeśli siatka danych nie może wyświetlić danych.
- Ciąg zawierający ścieżkę pliku danych pracownika.
  - C#
  - VB
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```

Dodaj poniższy kod do klasy WebPart1. Ten kod dodaje właściwość niestandardową o nazwie DataFilePath do składnika Web Part. Właściwość niestandardowa jest właściwością, którą można ustawić w programie SharePoint przez użytkownika. Ta właściwość pobiera i ustawia lokalizację pliku danych XML używanego do wypełniania siatki danych.

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

<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

Zastąp metodę CreateChildControls następującym kodem. Ten kod wykonuje następujące zadania:

Dodaje siatkę danych i etykietę zadeklarowaną w poprzednim kroku.

Wiąże siatkę danych z plikiem XML zawierającym dane pracowników.

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

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

Dodaj następującą metodę do WebPart1 klasy . Ten kod wykonuje następujące zadania:

Tworzy czasownik wyświetlany w menu czasowników składników Web Part renderowanego składnika Web Part.

Obsługuje zdarzenie, które jest zgłaszane, gdy użytkownik wybiera czasownik w menu czasowników. Ten kod filtruje listę pracowników wyświetlanych w siatce danych.

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

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

Testowanie składnika Web Part

Po uruchomieniu projektu zostanie otwarta witryna programu SharePoint. Składnik Web Part jest automatycznie dodawany do galerii składników Web Part w programie SharePoint. Składnik Web Part można dodać do dowolnej strony składników Web Part.

Wklej następujący kod XML do pliku Notatnik. Ten plik XML zawiera przykładowe dane, które będą wyświetlane w składniku Web Part.

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

Na Notatnik na pasku menu wybierz pozycję Plik>Zapisz jako.
W oknie dialogowym Zapisz jako na liście Zapisz jako wybierz pozycję Wszystkie pliki.
W polu Nazwa pliku wprowadź data.xml.
Wybierz dowolny folder przy użyciu przycisku Przeglądaj foldery , a następnie wybierz przycisk Zapisz .
W programie Visual Studio wybierz klawisz F5 .

Zostanie otwarta witryna programu SharePoint.
W menu Akcje witryny wybierz pozycję Więcej opcji.
Na stronie Tworzenie wybierz typ strony składników Web Part, a następnie wybierz przycisk Utwórz.
Na stronie Nowa strona składników Web Part nadaj stronie nazwę SampleWebPartPage.aspx, a następnie wybierz przycisk Utwórz.

Zostanie wyświetlona strona składników Web Part.
Wybierz dowolną strefę na stronie składników Web Part.
W górnej części strony wybierz kartę Wstawianie , a następnie wybierz przycisk Składnik Web Part .
W okienku Kategorie wybierz folder Niestandardowy, wybierz składnik Web Part1 Web Part, a następnie wybierz przycisk Dodaj.

Składnik Web Part zostanie wyświetlony na stronie.

Testowanie właściwości niestandardowej

Aby wypełnić siatkę danych wyświetlaną w składniku Web Part, określ ścieżkę pliku XML zawierającego dane dotyczące każdego pracownika.

Wybierz strzałkę wyświetlaną po prawej stronie składnika Web Part, a następnie wybierz pozycję Edytuj składnik Web Part z wyświetlonego menu.

Okienko zawierające właściwości składnika Web Part zostanie wyświetlone po prawej stronie.
W okienku rozwiń węzeł Różne , wprowadź ścieżkę utworzonego wcześniej pliku XML, wybierz przycisk Zastosuj , a następnie wybierz przycisk OK .

Sprawdź, czy lista pracowników jest wyświetlana w składniku Web Part.

Testowanie czasownika składnika Web Part

Pokaż i ukryj pracowników, którzy nie są menedżerami, wybierając element wyświetlany w menu czasowników składników Web Part.

Wybierz strzałkę wyświetlaną po prawej stronie składnika Web Part, a następnie wybierz pozycję Pokaż menedżerów tylko z wyświetlonego menu.

Tylko pracownicy, którzy są menedżerami, pojawiają się w składniku Web Part.
Ponownie wybierz strzałkę, a następnie wybierz pozycję Pokaż wszystkich pracowników z wyświetlonego menu.

Wszyscy pracownicy są wyświetlani w składniku Web Part.

Zobacz też

Tworzenie składników Web Part dla programu SharePoint Instrukcje: tworzenie składnika Web Part programu SharePoint Instrukcje: tworzenie składnika Web Part programu SharePoint przy użyciu Projektant Walkthrough: Tworzenie składnika Web Part dla programu SharePoint przy użyciu projektanta

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-12-12