Procedura dettagliata: creazione di una web part per SharePoint

Articolo
03/05/2013

Le web part consentono agli utenti di modificare direttamente il contenuto, l'aspetto e il comportamento di pagine del sito di SharePoint tramite un browser.In questa procedura dettagliata viene illustrato come creare una web part tramite il modello di elemento Web part in Visual Studio 2010.

Nella web part vengono visualizzati i dipendenti in una griglia dati.Il percorso del file contenente i dati relativi ai dipendenti viene specificato dall'utente.L'utente può inoltre filtrare la griglia dati in modo che dipendenti con il ruolo di manager vengano visualizzati solo nell'elenco.

In questa procedura dettagliata vengono illustrate le attività seguenti:

Creazione di una web part tramite il modello di elemento 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, definita verbo, visualizzata nel menu dei verbi della web part di cui è stato eseguito il rendering.I verbi consentono all'utente di modificare i dati visualizzati nella web part.
Test della web part in SharePoint.

[!NOTA]

Il computer potrebbe mostrare nomi o percorsi diversi per alcuni elementi dell'interfaccia utente di Visual Studio nelle istruzioni seguenti.Questi elementi sono determinati dall'edizione di Visual Studio in uso e dalle impostazioni utilizzate.Per ulteriori informazioni, vedere Impostazioni di Visual Studio.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

Edizioni supportate di Microsoft Windows e SharePoint.Per ulteriori informazioni, vedere Requisiti per lo sviluppo di soluzioni SharePoint.
Visual Studio Professional o un'edizione di Visual Studio Application Lifecycle Management (ALM).

Creazione di un progetto SharePoint vuoto

Creare innanzitutto un progetto SharePoint vuoto.In un secondo momento, si aggiungerà una web part al progetto tramite il modello di elemento Web part.

Per creare un progetto SharePoint vuoto

Avviare Visual Studio utilizzando l'opzione Esegui come amministratore.
Gli uomini exclude, scegliere File, Nuova, Progetto.
Nella finestra di dialogo Nuovo progetto, espandere il nodo SharePoint sotto il linguaggio che si desidera utilizzare quindi selezionare il nodo 2010.
Nel riquadro Modelli, scegliere Progetto SharePoint 2010quindi scegliere il pulsante Scegliere OK.

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

Aggiunta di una web part al progetto

Aggiungere un elemento Web part al progetto.L'elemento Web part consente di aggiungere il file di codice della web part.In un secondo momento, si aggiungerà codice al file di codice della web part per eseguire il rendering del contenuto della web part.

Per aggiungere una web part al progetto

Sulla barra dei menu, scegliere Progetto, Aggiungi nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento, nel riquadro modelli installati, espandere il nodo SharePoint quindi selezionare il nodo 2010.
Nell'elenco di modelli di SharePoint, scegliere il modello Web part quindi scegliere il pulsante Aggiungi.

L'elemento Web part verrà visualizzato in Esplora soluzioni.

Rendering del contenuto nella web part

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

Per eseguire il rendering del contenuto nella web part

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

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

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

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

Sostituire il metodo CreateChildControls con il codice seguente.Mediante il codice vengono effettuate le seguenti attività:

Aggiunta della griglia dati e dell'etichetta dichiarate nel passaggio precedente.
Associazione della griglia dati a un file XML che contiene dati dei dipendenti.

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

Aggiungere il seguente metodo alla classe WebPart1.Mediante il codice vengono effettuate le seguenti attività:

Creazione di un verbo che viene visualizzato nel menu dei verbi della web part di cui è stato eseguito il rendering.
Gestisce l'evento generato quando l'utente sceglie il verbo nel menu dei verbi.Questo codice filtra l'elenco dei dipendenti visualizzato nella griglia dati.

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

Test della 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.

Per testare la web part

Incollare il codice XML riportato di seguito in un file del Blocco note.Questo file XML contiene i dati di esempio che saranno visualizzati nella web part.

<?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>

In Blocco Note, sulla barra dei menu, scegliere File, Salva con nome.
Nella finestra di dialogo Salva con nome, nell'elenco Salva come, scegliere Tutti i file.
Nella casella Nome file, immettere data.xml.
Scegliere qualsiasi cartella mediante il pulsante Esplorare le cartelle quindi scegliere il pulsante Salva.
In Visual Studio, scegliere la chiave F5.

Verrà aperto il sito di SharePoint.
Scegliere dal menu collochi le azioni, scegliere Altre opzioni.
Nella pagina Crea, scegliere il tipo Pagina Web part, quindi scegliere il pulsante Crea.
Nella pagina Nuova pagina Web part, denominare la pagina SampleWebPartPage.aspxquindi 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 quindi scegliere il pulsante Web part.
Nel riquadro categorie, selezionare la cartella Personalizzate, selezionare la Web part WebPart1 quindi scegliere il pulsante Aggiungi.

La web part verrà visualizzata nella pagina.

Test della proprietà personalizzata

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

Per testare la proprietà personalizzata

Scegliere la freccia visualizzata a destra di Web part e quindi scegliere Modificare la Web part dal menu visualizzato.

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

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

Test del verbo della web part

Visualizzare e nascondere i dipendenti che non sono manager facendo clic su un elemento presente nel menu dei verbi della web part.

Per testare il verbo della web part

Scegliere la freccia visualizzata a destra di Web part e quindi scegliere Mostra solo gli amministratori dal menu visualizzato.

Nella web part verranno visualizzati solo dipendenti con il ruolo di manager.
Scegliere nuovamente la freccia quindi scegliere Mostra tutti i dipendenti dal menu visualizzato.

Nella web part verranno visualizzati tutti i dipendenti.

Vedere anche

Attività

Procedura: creare una web part di SharePoint

Procedura: creare una web part di SharePoint tramite una finestra di progettazione

Procedura dettagliata: creazione di una web part per SharePoint tramite una finestra di progettazione

Altre risorse

Creazione di web part per SharePoint

Condividi tramite