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

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 visivamente una web part tramite il modello di progetto Web part visiva di SharePoint in Visual Studio 2010.

Nella web part viene riprodotta una visualizzazione del calendario mensile e una casella di controllo per ogni elenco di calendario presente nel sito. Gli utenti possono scegliere quali elenchi di calendario includere nella visualizzazione del calendario mensile selezionando le caselle di controllo.

In questa procedura dettagliata vengono illustrate le seguenti attività:

Creazione di una web part tramite il modello di progetto Web part visiva.
Progettazione della web part tramite la finestra di progettazione di 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 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 web part

Creare innanzitutto un progetto web part tramite il modello di progetto Web part visiva.

Per creare una progetto Web part visiva

Avviare Visual Studio 2010 tramite l'opzione Esegui come amministratore.
Scegliere Nuovo dal menu File, quindi Progetto. Se l'IDE è configurato per utilizzare le impostazioni di sviluppo di Visual Basic, scegliere Nuovo progetto dal menu File.

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 Visual Studio installati selezionare Web part visiva, quindi fare clic su 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.
Fare clic su Fine per accettare il sito di SharePoint locale predefinito e il livello di attendibilità predefinito per la soluzione.

Per impostazione predefinita, il controllo utente del progetto viene visualizzato in Visual Web Developer nella visualizzazione Origine, dove è possibile esaminarne gli elementi HMTL.

Progettazione della web part

Per progettare la web part, trascinare i controlli dalla Casella degli strumenti sull'area del controllo utente.

Per progettare il layout della web part

Nella finestra di progettazione di Visual Web Developer fare clic sulla scheda Progettazione per passare alla visualizzazione Normale.
Scegliere Casella degli strumenti dal menu Visualizza.
Nella Casella degli strumenti trascinare un controllo CheckBoxList e un controllo Button dal gruppo Standard nella finestra di progettazione.
Nella finestra di progettazione fare clic su Button.
Scegliere Finestra Proprietà dal menu Visualizza.
Nella finestra Proprietà impostare la proprietà Text del pulsante su Aggiorna.

Gestione degli eventi dei controlli nella web part

Aggiungere codice che consenta all'utente di includere calendari alla visualizzazione del calendario master.

Per gestire gli eventi dei controlli nella web part

Nella finestra di progettazione fare doppio clic sul pulsante Aggiorna.

Il file di codice del controllo utente verrà aperto nell'editor di codice e verrà visualizzato il gestore eventi Button1_Click. In un secondo momento si aggiungerà codice a questo gestore eventi.

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

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

Aggiungere la riga di codice seguente alla classe VisualWebPart1userControl. Questo codice dichiara un controllo della visualizzazione del calendario mensile.
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```
```
private MonthlyCalendarView MonthlyCalendarView1;
```

Sostituire il metodo Page_Load della classe VisualWebPart1UserControl con il codice riportato di seguito. Mediante il codice vengono effettuate le seguenti attività:

Aggiunge una visualizzazione del calendario mensile al controllo utente.
Aggiunge una casella di controllo per ogni elenco di calendario sul sito.
Specifica un modello per ogni tipo di elemento presente nella visualizzazione del calendario.

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

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

Sostituire il metodo Button1_Click della classe VisualWebPart1UserControl con il codice riportato di seguito. Questo codice aggiunge elementi da ogni calendario selezionato alla visualizzazione del calendario master.

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

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

    }

}

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

Aggiungere un evento a ognuno di due elenchi di calendario distinti.
Aggiungere la web part a una pagina web part.
Selezionare gli elenchi da includere nella visualizzazione del calendario mensile.

Per aggiungere eventi agli elenchi di calendario sul sito

In Visual Studio premere F5.

Verrà aperto il sito di SharePoint e la barra Avvio veloce di Microsoft SharePoint Foundation 2010 verrà visualizzata nella pagina.
Nella barra Avvio veloce fare clic su Calendario in Elenchi.

Verrà visualizzata la pagina Calendario.
Scegliere Eventi, quindi Nuovo evento.
Nella casella Titolo digitare Evento nel calendario predefinito, quindi scegliere Salva.
Fare clic su Azioni sito, quindi su Altre opzioni.
Nella pagina Crea fare clic su Calendario, assegnare il nome al calendario, quindi fare clic su Crea.

Verrà visualizzata la pagina Calendario personalizzato.
Aggiungere un nuovo evento al calendario personalizzato denominato Evento contenuto nel calendario personalizzato.

Per aggiungere la web part a una pagina web part

Fare clic su Azioni sito, quindi su Altre opzioni.
Nella pagina Crea fare clic su Pagina web part, quindi 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 sula scheda Inserisci, quindi fare clic su Web part.
Fare clic sulla cartella Personalizzata, selezionare la web part VisualWebPart1, quindi scegliere Aggiungi.

La web part verrà visualizzata nella pagina. I controlli seguenti vengono visualizzati nella web part:
- Una visualizzazione del calendario mensile.
- Un pulsante Aggiorna.
- Una casella di controllo Calendario.
- Una casella di controllo Calendario personalizzato.

Per selezionare gli elenchi da includere nella visualizzazione del calendario mensile

Nella web part selezionare i calendari che si desidera includere nella visualizzazione del calendario mensile, quindi fa clic su Aggiorna.

Gli eventi da tutti i calendari selezionati verranno elencati nella visualizzazione del calendario mensile.

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

Altre risorse

Creazione di web part per SharePoint

Condividi tramite