Procedura dettagliata: Creare una web part per SharePoint usando una finestra di progettazione

Articolo
08/25/2023

Se si creano web part per un sito di SharePoint, gli utenti possono modificare direttamente il contenuto, l'aspetto e il comportamento delle pagine in tale sito usando un browser. Questa procedura dettagliata illustra come creare visivamente una web part usando il modello di progetto web part Visual SharePoint in Visual Studio.

La web part che verrà creata visualizza una visualizzazione calendario mensile e una casella di controllo per ogni elenco di calendari nel sito. Gli utenti possono specificare gli elenchi di calendari da includere nella visualizzazione calendario mensile selezionando le caselle di controllo.

In questa procedura dettagliata sono illustrati i task seguenti:

Creazione di una web part tramite il modello di progetto Web part Visual.
Progettazione della web part tramite la finestra di progettazione Visual Web Developer in Visual Studio.
Aggiunta di codice per gestire gli eventi dei controlli nella web part.
Test della web part in SharePoint.

Nota

Il computer potrebbe visualizzare nomi o percorsi diversi per alcuni elementi dell'interfaccia utente per Visual Studio nelle istruzioni seguenti. La versione di Visual Studio in uso e le impostazioni configurate determinano questi elementi. Vedere Personalizzare l'IDE di Visual Studio.

Prerequisiti

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

Edizioni supportate di Windows e SharePoint.

Creare un progetto di web part

Creare prima di tutto un progetto di web part usando il modello di progetto Web part Visual.

Avviare Visual Studio usando l'opzione Esegui come Amministrazione istrator.
Nella barra dei menu scegliere File>Nuovo>Progetto.
Nella finestra di dialogo Crea un nuovo progetto selezionare il progetto vuoto di SharePoint* per la versione specifica di SharePoint installata. Ad esempio, se si dispone di SharePoint 2019 install selezionare il modello SharePoint 2019 - Progetto vuoto.

Nota

È anche possibile cercare modelli digitando SharePoint nella casella di testo Cerca nella parte superiore della finestra di dialogo Crea un nuovo progetto. È anche possibile filtrare l'elenco dei modelli per visualizzare solo i modelli per Office e SharePoint selezionando "Office" nella casella a discesa Tipo di progetto. Per altre informazioni, vedere Creare un nuovo progetto in Visual Studio.
Nella casella Nome immettere TestProject1, quindi scegliere il pulsante Crea.
Nella sezione Qual è il livello di attendibilità per questa soluzione SharePoint? scegliere il pulsante di opzione Distribuisci come soluzione farm.
Scegliere il pulsante Fine per accettare il sito di SharePoint locale predefinito.

Progettazione della web part

Progettare la web part aggiungendo controlli dalla casella degli strumenti all'area di progettazione Visual Web Developer.

Nella finestra di progettazione Visual Web Developer scegliere la scheda Progettazione per passare alla visualizzazione Progettazione.
Scegliere Visualizza>Casella degli strumenti sulla barra dei menu.
Nel nodo Standard della casella degli strumenti scegliere il controllo CheckBoxList e quindi eseguire una delle operazioni seguenti:
- Aprire il menu di scelta rapida per il controllo CheckBoxList , scegliere Copia, aprire il menu di scelta rapida per la prima riga della finestra di progettazione e quindi scegliere Incolla.
- Trascinare il controllo CheckBoxList dalla casella degli strumenti e connettere il controllo alla prima riga della finestra di progettazione.
Ripetere il passaggio precedente, ma spostare un pulsante nella riga successiva della finestra di progettazione.
Nella finestra di progettazione scegliere il pulsante Button1 .
Sulla barra dei menu scegliere Visualizza>finestra Proprietà.

Si aprirà la finestra Proprietà.
Nella proprietà Text del pulsante immettere Update.

Gestione degli eventi dei controlli nella web part

Aggiungere codice che consente all'utente di aggiungere calendari alla visualizzazione calendario master.

Eseguire una delle procedure seguenti:
- Nella finestra di progettazione fare doppio clic sul pulsante Aggiorna .
- Nella finestra Proprietà del pulsante Aggiorna scegliere il pulsante Eventi. Nella proprietà Click immettere Button1_Click e quindi premere INVIO.
  
  Il file di codice di controllo utente viene aperto nell'editor del codice e viene visualizzato il Button1_Click gestore eventi. Successivamente, si aggiungerà il codice a questo gestore eventi.

Aggiungere le istruzioni seguenti all'inizio del file di codice del controllo utente.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls
Imports System.Web.UI.WebControls

Aggiungere la riga di codice seguente alla VisualWebPart1 classe . Questo codice dichiara un controllo visualizzazione calendario mensile.
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Sostituire il Page_Load metodo della VisualWebPart1 classe con il codice seguente. Il codice esegue queste operazioni:

Aggiunge una visualizzazione calendario mensile al controllo utente.
Aggiunge una casella di controllo per ogni elenco di calendari nel sito.

Specifica un modello per ogni tipo di elemento visualizzato nella visualizzazione calendario.

protected void Page_Load(object sender, EventArgs e)
{
    MonthlyCalendarView1 = new MonthlyCalendarView();
    this.Controls.Add(MonthlyCalendarView1);
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    if (CheckBoxList1.Items.Count == 0)
    {
        foreach (SPList listItem in thisWeb.Lists)
        {
            if (listItem.BaseTemplate == SPListTemplateType.Events)
            {
                CheckBoxList1.Items.Add(new ListItem(listItem.Title));
            }
        }
    }
    MonthlyCalendarView1.ItemTemplateName =
        "CalendarViewMonthItemTemplate";
    MonthlyCalendarView1.ItemAllDayTemplateName =
        "CalendarViewMonthItemAllDayTemplate";
    MonthlyCalendarView1.ItemMultiDayTemplateName =
        "CalendarViewMonthItemMultiDayTemplate";
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    MonthlyCalendarView1 = New MonthlyCalendarView()
    Me.Controls.Add(MonthlyCalendarView1)
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    If CheckBoxList1.Items.Count = 0 Then
        Dim listItem As SPList
        For Each listItem In thisWeb.Lists
            If listItem.BaseTemplate = SPListTemplateType.Events Then
                CheckBoxList1.Items.Add(New ListItem(listItem.Title))
            End If
        Next listItem
    End If
    MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate"
    MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate"
    MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate"
End Sub

Sostituire il Button1_Click metodo della VisualWebPart1 classe con il codice seguente. Questo codice aggiunge elementi da ogni calendario selezionato alla visualizzazione calendario master.

protected void Button1_Click(object sender, EventArgs e)
{
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    foreach (ListItem item in CheckBoxList1.Items)
    {
        if (item.Selected == true)
        {
            SPList calendarList = thisWeb.Lists[item.Text];
            DateTime dtStart = DateTime.Now.AddDays(-7);
            DateTime dtEnd = dtStart.AddMonths(1).AddDays(7);
            SPQuery query = new SPQuery();
            query.Query = String.Format(
                "<Query>" +
                "<Where><And>" +
                "<Geq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{1}</Value></Geq>" +
                "<Leq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{2}</Value></Leq>" +
                "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" +
                "</Query>",
                "Start Time",
                dtStart.ToShortDateString(),
                dtEnd.ToShortDateString());

            foreach (SPListItem listItem in calendarList.GetItems(query))
            {
                SPCalendarItem calItem = new SPCalendarItem();
                calItem.ItemID = listItem["ID"].ToString();
                calItem.Title = listItem["Title"].ToString();
                calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian);
                calItem.StartDate = (DateTime)listItem["Start Time"];
                calItem.ItemID = listItem.ID.ToString();
                calItem.WorkSpaceLink = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.DisplayFormUrl = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.EndDate = (DateTime)listItem["End Time"];
                calItem.Description = listItem["Description"].ToString();
                if (listItem["Location"] != null)
                {
                    calItem.Location = listItem["Location"].ToString();
                }
                items.Add(calItem);
            }
            MonthlyCalendarView1.DataSource = items;
        }

    }

}

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    Dim item As ListItem
    For Each item In CheckBoxList1.Items
        If item.Selected = True Then
            Dim calendarList As SPList = thisWeb.Lists(item.Text)
            Dim dtStart As DateTime = DateTime.Now.AddDays(-7)
            Dim dtEnd As DateTime = dtStart.AddMonths(1).AddDays(7)
            Dim query As New SPQuery()
            query.Query = [String].Format("<Query>" + "<Where><And>" + _
                                          "<Geq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{1}</Value></Geq>" + _
                                          "<Leq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{2}</Value></Leq>" + _
                                          "</And></Where><OrderBy><FieldRef Name=""{0}"" /></OrderBy>" + _
                                          "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString())

            Dim listItem As SPListItem
            For Each listItem In calendarList.GetItems(query)
                Dim calItem As New SPCalendarItem()
                With calItem
                    .ItemID = listItem("ID").ToString()
                    .Title = listItem("Title").ToString()
                    .CalendarType = Convert.ToInt32(SPCalendarType.Gregorian)
                    .StartDate = CType(listItem("Start Time"), DateTime)
                    .ItemID = listItem.ID.ToString()
                    .WorkSpaceLink = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .DisplayFormUrl = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .EndDate = CType(listItem("End Time"), DateTime)
                    .Description = listItem("Description").ToString()
                End With

                If Not (listItem("Location") Is Nothing) Then
                    calItem.Location = listItem("Location").ToString()
                End If
                items.Add(calItem)
            Next listItem
            MonthlyCalendarView1.DataSource = items
        End If
    Next item

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. Per testare questo progetto, si eseguiranno le attività seguenti:

Aggiungere un evento a ognuno di due elenchi di calendari separati.
Aggiungere la web part a una pagina web part.
Specificare gli elenchi da includere nella visualizzazione calendario mensile.

Per aggiungere eventi agli elenchi di calendari nel sito

In Visual Studio scegliere il tasto F5 .

Viene aperto il sito di SharePoint e nella pagina viene visualizzata la barra di avvio rapido di Microsoft SharePoint Foundation.
Nella barra Avvio veloce, in Elenchi, scegliere il collegamento Calendario .

Viene visualizzata la pagina Calendario.

Se nella barra di avvio veloce non viene visualizzato alcun collegamento Calendario, scegliere il collegamento Contenuto sito. Se la pagina Contenuto sito non mostra un elemento Calendario , crearne una.
Nella pagina Calendario scegliere un giorno e quindi scegliere il collegamento Aggiungi nel giorno selezionato per aggiungere un evento.
Nella casella Titolo immettere Evento nel calendario predefinito e quindi scegliere il pulsante Salva.
Scegliere il collegamento Contenuto sito e quindi scegliere il riquadro Aggiungi un'app .
Nella pagina Crea scegliere il tipo di calendario , denominare il calendario e quindi scegliere il pulsante Crea .
Aggiungere un evento al nuovo calendario, denominare l'evento nel calendario personalizzato e quindi scegliere il pulsante Salva .

Per aggiungere la web part a una pagina web part

Nella pagina Contenuto sito aprire la cartella Pagine sito.
Sulla barra multifunzione scegliere la scheda File , aprire il menu Nuovo documento e quindi scegliere il comando Pagina web part.
Nella pagina Nuova pagina web part denominare la pagina SampleWebPartPage.aspx e quindi scegliere il pulsante Crea.

Verrà visualizzata la pagina della web part.
Nell'area superiore della pagina della web part scegliere la scheda Inserisci e quindi scegliere il pulsante Web part .
Scegliere la cartella Personalizzata , scegliere la web part VisualWebPart1 e quindi scegliere il pulsante Aggiungi .

La web part viene visualizzata nella pagina. Nella web part vengono visualizzati i controlli seguenti:
- Visualizzazione del calendario mensile.
- Pulsante Aggiorna .
- Casella di controllo Calendario .
- Casella di controllo Calendario personalizzato.

Per specificare gli elenchi da includere nella visualizzazione calendario mensile

Nella web part specificare i calendari da includere nella visualizzazione calendario mensile e quindi scegliere il pulsante Aggiorna .

Gli eventi di tutti i calendari specificati vengono visualizzati nella visualizzazione calendario mensile.

Vedi anche

Creare web part per SharePoint Procedura: Creare una web part di SharePoint Procedura dettagliata: Creare una web part per SharePoint

Condividi tramite