Procedura dettagliata: creazione di una web part per SharePoint

Articolo
08/11/2011

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 seguenti attività:

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 all'insieme 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. L'edizione di Visual Studio in uso e le impostazioni utilizzate determinano questi elementi. Per ulteriori informazioni, vedere Gestione delle impostazioni.

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 2010 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 2010 tramite l'opzione Esegui come amministratore.
Scegliere Nuovo dal menu File, quindi Progetto.

Verrà visualizzata la finestra di dialogo Nuovo progetto.
Aprire la finestra di dialogo Nuovo progetto, espandere il nodo SharePoint sotto il linguaggio che si desidera utilizzare, quindi selezionare il nodo 2010.
Nel riquadro Modelli selezionare Progetto SharePoint vuoto, quindi 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.
Selezionare Distribuisci come soluzione farm, quindi fare clic su 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

Scegliere Aggiungi nuovo elemento dal menu Progetto.
Nel riquadro Modelli installati della finestra di dialogo Aggiungi nuovo elemento espandere il nodo SharePoint, quindi fare clic su 2010.
Nell'elenco di modelli SharePoint selezionare Web part, quindi fare clic su 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 all'insieme di controlli della classe Web part.

Per eseguire il rendering del contenuto nella web part

In Esplora soluzioni fare doppio clic su 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.
Gestione dell'evento generato quando l'utente fa clic sul 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>

Nel Blocco note scegliere Salva con nome del menu File.
Nella finestra di dialogo Salva con nome selezionare Tutti i file nell'elenco a discesa Salva come.
Nella casella Nome file digitare data.xml.
Selezionare una cartella qualsiasi tramite il pulsante Sfoglia cartelle, quindi fare clic su Salva.
In Visual Studio premere F5.

Verrà aperto il sito di SharePoint.
Fare clic su Azioni sito, quindi su Altre opzioni.
Nella pagina Crea selezionare Pagina web part, quindi fare clic su Crea.
Nella pagina Nuova pagina web part denominare la pagina SampleWebPartPage.aspx, quindi fare clic su Crea.

Verrà visualizzata la pagina web part.
Selezionare un'area qualsiasi nella pagina web part.
All'inizio della pagina fare clic su Inserisci, quindi fare clic su Web part.
Nel riquadro Categorie fare clic sulla cartella Personalizzata, selezionare la web part WebPart1, quindi scegliere 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

Fare clic sulla freccia visualizzata nell'angolo della web part, quindi fare clic su Modifica web part.

Sul lato destro della pagina verrà visualizzato un riquadro contenente le proprietà della web part.
Nel riquadro espandere il nodo Varie, digitare il percorso del file XML creato precedentemente e fare clic su Applica, quindi 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

Fare clic sulla freccia visualizzata nell'angolo della web part, quindi fare clic sull'opzione per visualizzaresolo i manager.

Nella web part verranno visualizzati solo dipendenti con il ruolo di manager.
Fare di nuovo clic sulla freccia, quindi fare clic sull'opzione per visualizzaretutti i dipendenti.

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