通过

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

  • 项目

如果为 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 部件。

  1. 使用“以管理员身份运行”选项启动 Visual Studio。

  2. 在菜单栏上，依次选择“文件”>“新建”>“项目”。

  3. 在“创建新项目”对话框中，为已安装的 SharePoint 的特定版本选择“SharePoint 空项目”。 例如，如果安装了 SharePoint 2019，请选择“SharePoint 2019 - 空项目”模板。

    备注

    还可以通过在“创建新项目”对话框顶部的搜索文本框中键入“SharePoint”来搜索模板 。 还可以筛选模板列表，以仅显示 Office 和 SharePoint 的模板，只需在“项目类型”下拉框中选择“Office”即可。 有关详细信息，请参阅在 Visual Studio 中新建项目。

  4. 在“名称”框中，输入“TestProject1”，然后选择“创建”按钮。

  5. 在“此 SharePoint 解决方案的信任级别是什么?”部分中，选择“部署为场解决方案”选项按钮。

  6. 选择“完成”按钮以接受默认的本地 SharePoint 站点。

设计 Web 部件

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

  1. 在可视 Web 开发人员设计器中，选择“设计”选项卡以切换到“设计”视图。

  2. 在菜单栏上，依次选择“视图”>“工具箱” 。

  3. 在“工具箱”的“标准”节点中，选择“CheckBoxList”控件，然后执行以下步骤之一：

    • 打开“CheckBoxList”控件的快捷菜单，选择“复制”，打开设计器中第一行的快捷菜单，然后选择“粘贴”。

    • 从“工具箱”中拖动“CheckBoxList”控件，并将该控件连接到设计器中的第一行。

  4. 重复前面的步骤，但将按钮移动到设计器的下一行。

  5. 在设计器中，选择“Button1”按钮。

  6. 在菜单栏上，选择“视图”>“属性窗口”。

    此时将打开“属性”窗口。

  7. 在按钮的“文本”属性中，输入“更新”。

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

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

  1. 执行下面的某一组步骤：

    • 在设计器中，双击“更新”按钮。

    • 在“更新”按钮的“属性”窗口中，选择“事件”按钮。 在“单击”属性中，输入 Button1_Click，然后选择 Enter 键。

      用户控件代码文件将在代码编辑器中打开，并且将显示 Button1_Click 事件处理程序。 稍后，你将向此事件处理程序中添加代码。

  2. 将下面的语句添加到用户控件代码文件的顶部。

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

  3. 将以下代码行添加到 VisualWebPart1 类。 此代码声明月历视图控件。

    private MonthlyCalendarView MonthlyCalendarView1;

  4. 将 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";
}

  5. 将 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;
        }

    }

}

测试 Web 部件

运行该项目时，SharePoint 网站将打开。 Web 部件会自动添加到 SharePoint 中的 Web 部件库。 若要测试此项目，你将执行以下任务：

  • 向两个单独日历列表中的每个列表添加一个事件。
  • 将 Web 部件添加到 Web 部件页。
  • 指定要包含在月历视图中的列表。

向站点上的日历列表添加事件

  1. 在 Visual Studio 中，选择“F5”键。

    SharePoint 网站随即打开，页面上显示 Microsoft SharePoint Foundation 快速启动栏。

  2. 在快速启动栏上的“列表”下，选择“日历”链接。

    “日历”页面随即出现。

    如果快速启动栏上未显示“日历”链接，请选择“网站内容”链接。 如果“网站内容”页不显示“日历”项，请创建一个。

  3. 在“日历”页上，选择一天，然后选择所选日期中的“添加”链接以添加一个事件。

  4. 在“标题”框中，输入“默认日历中的事件”，然后选择“保存”按钮 。

  5. 选择“网站内容”链接，然后选择“添加应用”磁贴。

  6. 在“创建”页上，选择“日历”类型，为日历命名，然后选择“创建”按钮。

  7. 向新日历添加事件，将事件命名为“自定义日历中的事件”，然后选择“保存”按钮。

将 Web 部件添加到 Web 部件页

  1. 在“网站内容”页上，打开“网站页面”文件夹。

  2. 在功能区上，选择“文件”选项卡，打开“新建文档”菜单，然后选择“Web 部件页面”命令。

  3. 在“新建 Web 部件页面”页上，将该页命名为“SampleWebPartPage.aspx”，然后选择“创建”按钮 。

    Web 部件页面随即出现。

  4. 在该 Web 部件页面顶部选择“插入”选项卡，然后选择“Web 部件”按钮 。

  5. 依次选择“自定义”文件夹、“VisualWebPart1”Web 部件，然后选择“添加”按钮 。

    该 Web 部件随即显示在页面上。 以下控件显示在 Web 部件上：

    • 月历视图。

    • “更新”按钮。

    • “日历”复选框。

    • “自定义日历”复选框。

指定要包含在月历视图中的列表

在 Web 部件中，指定要包含在月历视图中的日历，然后选择“更新”按钮。

指定的所有日历中的事件均显示在月历视图中。

另请参阅

为 SharePoint 创建 Web 部件如何：创建 SharePoint Web 部件演练：为 SharePoint 创建 Web 部件