Condividi tramite


Procedura dettagliata: creazione di una web part per SharePoint

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:

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

  1. Avviare Visual Studio utilizzando l'opzione Esegui come amministratore.

  2. Gli uomini exclude, scegliere File, Nuova, Progetto.

  3. Nella finestra di dialogo Nuovo progetto, espandere il nodo SharePoint sotto il linguaggio che si desidera utilizzare quindi selezionare il nodo 2010.

  4. 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.

  5. 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

  1. Sulla barra dei menu, scegliere Progetto, Aggiungi nuovo elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento, nel riquadro modelli installati, espandere il nodo SharePoint quindi selezionare il nodo 2010.

  3. 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

  1. 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.

  2. Aggiungere le seguenti istruzioni all'inizio del file di codice della web part.

    Imports System.Data
    
    using System.Data;
    
  3. 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;
    
  4. 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;
        }
    }
    
  5. 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();
    }
    
  6. 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

  1. 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>
    
  2. In Blocco Note, sulla barra dei menu, scegliere File, Salva con nome.

  3. Nella finestra di dialogo Salva con nome, nell'elenco Salva come, scegliere Tutti i file.

  4. Nella casella Nome file, immettere data.xml.

  5. Scegliere qualsiasi cartella mediante il pulsante Esplorare le cartelle quindi scegliere il pulsante Salva.

  6. In Visual Studio, scegliere la chiave F5.

    Verrà aperto il sito di SharePoint.

  7. Scegliere dal menu collochi le azioni, scegliere Altre opzioni.

  8. Nella pagina Crea, scegliere il tipo Pagina Web part, quindi scegliere il pulsante Crea.

  9. Nella pagina Nuova pagina Web part, denominare la pagina SampleWebPartPage.aspxquindi scegliere il pulsante Crea.

    Verrà visualizzata la pagina web part.

  10. Selezionare un'area qualsiasi nella pagina web part.

  11. Nella parte superiore della pagina, scegliere la scheda Inserisci quindi scegliere il pulsante Web part.

  12. 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

  1. 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.

  2. 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

  1. 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.

  2. 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