演练：使用设计器为 SharePoint 创建 Web 部件

项目
06/19/2023

如果为 SharePoint 站点创建 Web 部件，用户可以使用浏览器直接修改该站点中页面的内容、外观和行为。本演练演示如何使用 Visual Studio 中的 SharePoint 可视 Web 部件项目模板以可视化方式创建 Web 部件。

你将创建的 Web 部件将显示月历视图，以及站点上每个日历列表的复选框。用户可以通过选中复选框来指定要包含在月历视图中的日历列表。

本演练演示以下任务：

使用可视 Web 部件项目模板创建 Web 部件。
使用 Visual Studio 中的可视 Web 开发人员设计器设计 Web 部件。
添加代码以处理 Web 部件上的控件的事件。
在 SharePoint 中测试 Web 部件。

备注

以下说明中的 Visual Studio 用户界面的某些元素在计算机上出现的名称或位置可能会不同。这些元素取决于你所使用的 Visual Studio 版本和你所使用的设置。请参阅个性化设置 Visual Studio IDE。

先决条件

您需要满足以下条件才能完成本演练：

支持的 Windows 和 SharePoint 版本。

创建 Web 部件项目

首先，使用可视 Web 部件项目模板创建 Web 部件。

使用“以管理员身份运行”选项启动 Visual Studio。
在菜单栏上，依次选择“文件”>“新建”>“项目”。
在“创建新项目”对话框中，为已安装的 SharePoint 的特定版本选择“SharePoint 空项目”。例如，如果安装了 SharePoint 2019，请选择“SharePoint 2019 - 空项目”模板。

备注

还可以通过在“创建新项目”对话框顶部的搜索文本框中键入“SharePoint”来搜索模板。还可以筛选模板列表，以仅显示 Office 和 SharePoint 的模板，只需在“项目类型”下拉框中选择“Office”即可。有关详细信息，请参阅在 Visual Studio 中新建项目。
在“名称”框中，输入“TestProject1”，然后选择“创建”按钮。
在“此 SharePoint 解决方案的信任级别是什么?”部分中，选择“部署为场解决方案”选项按钮。
选择“完成”按钮以接受默认的本地 SharePoint 站点。

设计 Web 部件

通过将“工具箱”中的控件添加到可视 Web 开发人员设计器的图面来设计 Web 部件。

在可视 Web 开发人员设计器中，选择“设计”选项卡以切换到“设计”视图。
在菜单栏上，依次选择“视图”>“工具箱” 。
在“工具箱”的“标准”节点中，选择“CheckBoxList”控件，然后执行以下步骤之一：
- 打开“CheckBoxList”控件的快捷菜单，选择“复制”，打开设计器中第一行的快捷菜单，然后选择“粘贴”。
- 从“工具箱”中拖动“CheckBoxList”控件，并将该控件连接到设计器中的第一行。
重复前面的步骤，但将按钮移动到设计器的下一行。
在设计器中，选择“Button1”按钮。
在菜单栏上，选择“视图”>“属性窗口”。

此时将打开“属性”窗口。
在按钮的“文本”属性中，输入“更新”。

处理 Web 部件上的控件的事件

添加使用户能够将日历添加到母版日历视图中的代码。

执行下面的某一组步骤：
- 在设计器中，双击“更新”按钮。
- 在“更新”按钮的“属性”窗口中，选择“事件”按钮。在“单击”属性中，输入 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 类。此代码声明月历视图控件。

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

通过