Procedura dettagliata: Creare una web part per SharePoint

Articolo
08/25/2023

Web part consentire agli utenti di modificare direttamente il contenuto, l'aspetto e il comportamento delle pagine del sito di SharePoint tramite un browser. Questa procedura dettagliata illustra come creare una web part usando il modello di elemento della web part in Visual Studio 2010.

La web part visualizza i dipendenti in una griglia dati. L'utente specifica il percorso del file che contiene i dati del dipendente. L'utente può anche filtrare la griglia dei dati in modo che i dipendenti che sono responsabili vengano visualizzati solo nell'elenco.

In questa procedura dettagliata sono illustrati i task seguenti:

Creazione di una web part tramite il modello di elemento della web part di Visual Studio.
Creazione di una proprietà che può essere impostata dall'utente della web part. Questa proprietà specifica il percorso del file di dati dei dipendenti.
Rendering del contenuto in una web part mediante l'aggiunta di controlli alla raccolta di controlli web part.
Creazione di una nuova voce di menu, denominata verbo, visualizzata nel menu dei verbi della web part sottoposta a rendering. I verbi consentono all'utente di modificare i dati visualizzati nella web part.
Test della web part in SharePoint.

Nota

I nomi o i percorsi visualizzati per alcuni elementi dell'interfaccia utente di Visual Studio nelle istruzioni seguenti potrebbero essere diversi nel computer in uso. La versione di Visual Studio in uso e le impostazioni configurate determinano questi elementi. Per altre informazioni, vedere Personalizzare l'IDE di Visual Studio.

Prerequisiti

Edizioni supportate di Microsoft Windows e SharePoint.
Visual Studio 2017 o Azure DevOps Services.

Creare un progetto SharePoint vuoto

Creare prima di tutto un progetto SharePoint vuoto. Successivamente, si aggiungerà una web part al progetto usando il modello di elemento della web part .

Avviare Visual Studio usando l'opzione Esegui come Amministrazione istrator.
Sulla barra degli uomini scegliere File>Nuovo>progetto.
Nella finestra di dialogo Nuovo progetto espandere il nodo SharePoint sotto la lingua che si desidera usare e quindi scegliere il nodo 2010.
Nel riquadro Modelli scegliere Progetto SharePoint 2010 e quindi scegliere il pulsante OK.

Verrà visualizzata la Personalizzazione guidata SharePoint. Questa procedura guidata consente di selezionare il sito che verrà usato per eseguire il debug del progetto e il livello di attendibilità della soluzione.
Scegliere il pulsante di opzione Distribuisci come soluzione farm e quindi scegliere il pulsante Fine per accettare il sito di SharePoint locale predefinito.

Aggiungere una web part al progetto

Aggiungere un elemento della web part al progetto. L'elemento della web part aggiunge il file di codice della web part. Successivamente, si aggiungerà codice al file di codice della web part per eseguire il rendering del contenuto della web part.

Nella barra dei menu scegliere Progetto>Aggiungi nuovo elemento.
Nel riquadro Modelli installati della finestra di dialogo Aggiungi nuovo elemento espandere il nodo SharePoint e quindi scegliere il nodo 2010.
Nell'elenco dei modelli di SharePoint scegliere il modello web part e quindi scegliere il pulsante Aggiungi .

L'elemento della web part viene visualizzato in Esplora soluzioni.

Rendering del contenuto nella web part

È possibile specificare i controlli che si desidera visualizzare nella web part aggiungendoli alla raccolta di controlli della classe web part.

In Esplora soluzioni aprire WebPart1.vb (in Visual Basic) o WebPart1.cs (in C#).

Il file di codice della web part viene aperto nell'editor di codice.
Aggiungere le direttive seguenti all'inizio del file di codice della web part.
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```
Aggiungere il codice seguente alla classe WebPart1 . Questo codice dichiara i campi seguenti:
- Griglia dati per visualizzare i dipendenti nella web part.
- Testo visualizzato nel controllo utilizzato per filtrare la griglia dei dati.
- Etichetta che visualizza un errore se la griglia dati non è in grado di visualizzare i dati.
- Stringa contenente il percorso del file di dati del dipendente.
  - 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
```

Aggiungere il codice seguente alla classe WebPart1 . Questo codice aggiunge una proprietà personalizzata denominata DataFilePath alla web part. Una proprietà personalizzata è una proprietà che può essere impostata in SharePoint dall'utente. Questa proprietà ottiene e imposta il percorso di un file di dati XML utilizzato per popolare la griglia dei dati.

[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

Sostituire il metodo CreateChildControls con il codice seguente. Il codice esegue queste operazioni:

Aggiunge la griglia dati e l'etichetta dichiarati nel passaggio precedente.

Associa la griglia di dati a un file XML contenente i dati dei dipendenti.

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

Aggiungere il seguente metodo alla classe WebPart1. Il codice esegue queste operazioni:

Crea un verbo visualizzato nel menu verbi web part della web part di cui è stato eseguito il rendering.

Gestione dell'evento generato quando l'utente sceglie il verbo nel relativo menu. Questo codice filtra l'elenco dei dipendenti visualizzati nella griglia dei dati.

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

Testare la web part

Quando si esegue il progetto, viene aperto il sito di SharePoint. La web part viene aggiunta automaticamente alla raccolta web part in SharePoint. È possibile aggiungere la web part a qualsiasi pagina web part.

Incollare il codice XML seguente in un file Blocco note. Questo file XML contiene i dati di esempio che verranno visualizzati nella 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>

Nella barra dei menu in Blocco note scegliere Salva>con nome file.
Nella finestra di dialogo Salva con nome scegliere Tutti i file nell'elenco Salva con nome.
Nella casella Nome file immettere data.xml.
Scegliere qualsiasi cartella usando il pulsante Sfoglia cartelle e quindi scegliere il pulsante Salva .
In Visual Studio scegliere il tasto F5 .

Verrà aperto il sito di SharePoint.
Scegliere Altre opzioni dal menu Azioni sito.
Nella pagina Crea scegliere il tipo di pagina web part, quindi scegliere il pulsante Crea.
Nella pagina Nuova pagina web part denominare la pagina SampleWebPartPage.aspx e quindi scegliere il pulsante Crea.

Verrà visualizzata la pagina web part.
Selezionare un'area qualsiasi nella pagina web part.
Nella parte superiore della pagina scegliere la scheda Inserisci e quindi scegliere il pulsante Web part .
Nel riquadro Categorie scegliere la cartella Personalizzata, scegliere la Web part WebPart1 e quindi scegliere il pulsante Aggiungi.

La web part viene visualizzata nella pagina.

Testare la proprietà personalizzata

Per popolare la griglia dei dati visualizzata nella web part, specificare il percorso del file XML che contiene i dati relativi a ogni dipendente.

Scegliere la freccia visualizzata sul lato destro della web part e quindi scegliere Modifica web part dal menu visualizzato.

Sul lato destro della pagina viene visualizzato un riquadro contenente le proprietà per la web part.
Nel riquadro espandere il nodo Varie, immettere il percorso del file XML creato in precedenza, scegliere il pulsante Applica e quindi scegliere il pulsante OK.

Verificare che nella web part venga visualizzato un elenco di dipendenti.

Testare il verbo della web part

Mostrare e nascondere i dipendenti che non sono responsabili selezionando un elemento visualizzato nel menu Verbi web part.

Scegliere la freccia visualizzata sul lato destro della web part e quindi scegliere Mostra solo manager dal menu visualizzato.

Solo i dipendenti che sono responsabili vengono visualizzati nella web part.
Scegliere di nuovo la freccia, quindi scegliere Mostra tutti i dipendenti dal menu visualizzato.

Tutti i dipendenti vengono visualizzati nella web part.

Vedi anche

Procedura: Creare web part per SharePoint Procedura: Creare una web part di SharePoint: Creare una web part di SharePoint tramite unaprocedura dettagliata di Progettazione: Creare una web part per SharePoint tramite una finestra di progettazione

Condividi tramite