逐步解說：使用設計工具建立 SharePoint 的 Web 組件

發行項
10/05/2023

如果您為 SharePoint 網站建立 Web 組件，您的使用者可以使用瀏覽器，直接修改該網站中頁面的內容、外觀和行為。本逐步解說示範如何使用 Visual Studio 中的 SharePoint Visual Web 組件專案範本，以視覺化方式建立 Web 組件。

您將建立的 Web 組件會顯示每月行事曆檢視，以及網站上每個行事曆清單的核取方塊。使用者可以選取核取方塊，指定要包含在每月行事曆檢視中的行事曆清單。

本逐步解說將說明下列工作：

使用 Visual Web 組件專案範本建立 Web 組件。
在 Visual Studio 中使用 Visual Web 開發人員設計工具設計 Web 組件。
新增程式碼以處理 Web 組件上的控制項事件。
在 SharePoint 中測試 Web 組件。

注意

在下列指示的某些 Visual Studio 使用者介面元素中，您的電腦可能會顯示不同的名稱或位置。您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。請參閱將 Visual Studio IDE 個人化。

必要條件

您需要下列元件才能完成這個逐步解說：

支援的 Windows 和 SharePoint 版本。

建立 Web 組件專案

首先，使用 Visual Web 組件專案範本建立 Web 組件專案。

使用 [以系統管理員身分執行] 選項啟動 Visual Studio。
在功能表列上，選擇 [檔案]>[新增]>[專案]。
在 [建立新專案] 對話方塊中，針對您已安裝的特定 SharePoint 版本，選取 [SharePoint 空白專案]*。例如，如果您已安裝 SharePoint 2019，請選取 [SharePoint 2019 - 空白專案] 範本。

注意

您也可以在 [建立新專案] 對話方塊頂端的 [搜尋] 文字方塊中，輸入 SharePoint 來搜尋範本。您也可以在 [專案類型] 下拉式方塊中選取 [Office]，篩選範本清單，只顯示 Office 和 SharePoint 的範本。如需詳細資訊，請參閱在 Visual Studio 中建立新專案。
在 [名稱] 方塊中，輸入 TestProject1，然後選擇 [建立] 按鈕。
在 [此 SharePoint 解決方案的信任層級為何？] 區段中，選擇 [部署為陣列方案] 選項按鈕。
選擇 [完成] 按鈕，以接受預設本機 SharePoint 網站。

設計 Web 組件

將控制項從 [工具箱] 新增至 Visual Web 開發人員設計工具的介面，以設計 Web 組件。

在 Visual Web 開發人員設計工具上，選擇 [設計] 索引標籤，切換至 [設計] 檢視。
在功能表列上，選擇 [檢視]>[工具箱]。
在 [工具箱] 的 [標準] 節點中，選擇 [CheckBoxList] 控制項，然後執行下列其中一個步驟：
- 開啟 [CheckBoxList] 控制項的捷徑功能表，選擇 [複製]，開啟設計工具中第一行的捷徑功能表，然後選擇 [貼上]。
- 從 [工具箱] 拖曳 [CheckBoxList] 控制項，然後將控制項連接到設計工具中的第一行。
重複上一個步驟，但是將 Button 移至設計工具的下一行。
在設計工具中，選擇 [Button1] 按鈕。
在功能表列上選擇 [檢視] > [屬性視窗]。

[屬性] 視窗隨即開啟。
在按鈕的 [Text] 屬性中，輸入 Update。

處理 Web 組件上的控制項事件

新增程式碼，讓使用者將行事曆新增至主要行事曆檢視。

請執行下列其中一組步驟：
- 在設計工具中，按兩下 [更新] 按鈕。
- 在 [更新] 按鈕的 [屬性] 視窗中，選擇 [事件] 按鈕。在 [Click] 屬性中，輸入 Button1_Click，然後選擇 Enter 鍵。
  
  使用者控制項程式碼檔案會在程式碼編輯器中開啟，且 Button1_Click 事件處理常式隨即出現。稍後，您會將程式碼新增至此事件處理常式。

將下列陳述式新增至使用者控制項程式碼檔案的頂端。

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

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

將下列程式碼新增至 VisualWebPart1 類別。此程式碼會宣告每月行事曆檢視控制項。
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

以下列程式碼取代 VisualWebPart1 類別的 Page_Load 方法。這個程式碼會執行下列工作：

將每月行事曆檢視新增至使用者控制項。
為網站上的每個行事曆清單新增核取方塊。

為每個出現在行事曆檢視中的項目類型指定範本。

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

以下列程式碼取代 VisualWebPart1 類別的 Button1_Click 方法。此程式碼會將每個已選取行事曆的項目新增至主要行事曆檢視。

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

測試 Web 組件

當您執行專案時，SharePoint 網站隨即開啟。 Web 組件會自動新增至 SharePoint 中的 Web 組件庫。若要測試此專案，您要執行下列工作：

將事件新增至兩個不同的行事曆清單。
將 Web 組件新增至 Web 組件頁面。
指定要包含在每月行事曆檢視中的清單。

將事件新增至網站上的行事曆清單

在 Visual Studio 中，選擇 F5 鍵。

SharePoint 網站隨即開啟，Microsoft SharePoint Foundation 快速啟動列會出現在頁面上。
在 [快速啟動] 列的 [清單] 下，選擇 [行事曆] 連結。

行事曆頁面隨即出現。

如果未在 [快速啟動] 列上顯示 [行事曆] 連結，請選擇 [網站內容] 連結。如果 [網站內容] 頁面未顯示 [行事曆] 項目，請建立一個項目。
在 [行事曆] 頁面上，選擇一個日期，然後在所選取日期中選擇 [新增] 連結，以新增活動。
在 [標題] 方塊中，輸入預設行事曆中的活動，然後選擇 [儲存] 按鈕。
選擇 [網站內容] 連結，然後選擇 [新增應用程式] 磚。
在 [建立] 頁面上，選擇 [行事曆] 類型、為行事曆命名，然後選擇 [建立] 按鈕。
將活動新增至新的行事曆、將活動命名為自訂行事曆中的活動，然後選擇 [儲存] 按鈕。

將 Web 組件新增至 Web 組件頁面

在 [網站內容] 頁面上，開啟 [網站頁面] 資料夾。
在功能區上，選擇 [檔案] 索引標籤，開啟 [新增文件] 功能表，然後選擇 [Web 組件頁面] 命令。
在 [新增 Web 組件頁面] 頁面中，將頁面命名為 SampleWebPartPage.aspx，然後選擇 [建立] 按鈕。

Web 組件頁面隨即出現。
在 Web 組件頁面頂端區域選擇 [插入] 索引標籤，然後選擇 [Web 組件] 按鈕。
依序選擇 [自訂] 資料夾、[VisualWebPart1] Web 組件和 [新增] 按鈕。

Web 組件隨即顯示在頁面上。下列控制項會出現在 Web 組件上：
- 每月行事曆檢視。
- [更新] 按鈕。
- [行事曆] 核取方塊。
- [自訂行事曆] 核取方塊。

指定要包含在每月行事曆檢視中的清單

在 Web 組件中，指定您想要包含在每月行事曆檢視中的行事曆，然後選擇 [更新] 按鈕。

您指定的所有行事曆的活動會出現在每月行事曆檢視中。

另請參閱

建立 SharePoint 的 Web 組件如何：建立 SharePoint Web 組件逐步解說：建立 SharePoint Web 組件

共用方式為