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

  1. Avviare Visual Studio 2010 tramite l'opzione Esegui come amministratore.

  2. Scegliere Nuovo dal menu File, quindi Progetto.

    Verrà visualizzata la finestra di dialogo Nuovo progetto.

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

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

  1. Scegliere Aggiungi nuovo elemento dal menu Progetto.

  2. Nel riquadro Modelli installati della finestra di dialogo Aggiungi nuovo elemento espandere il nodo SharePoint, quindi fare clic su 2010.

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

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

  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.

    • 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

  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. Nel Blocco note scegliere Salva con nome del menu File.

  3. Nella finestra di dialogo Salva con nome selezionare Tutti i file nell'elenco a discesa Salva come.

  4. Nella casella Nome file digitare data.xml.

  5. Selezionare una cartella qualsiasi tramite il pulsante Sfoglia cartelle, quindi fare clic su Salva.

  6. In Visual Studio premere F5.

    Verrà aperto il sito di SharePoint.

  7. Fare clic su Azioni sito, quindi su Altre opzioni.

  8. Nella pagina Crea selezionare Pagina web part, quindi fare clic su Crea.

  9. Nella pagina Nuova pagina web part denominare la pagina SampleWebPartPage.aspx, quindi fare clic su Crea.

    Verrà visualizzata la pagina web part.

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

  11. All'inizio della pagina fare clic su Inserisci, quindi fare clic su Web part.

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

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

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

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

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