通过

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

  • 项目

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

Web 部件显示月历视图以及与网站上的每个日历列表相对应的复选框。用户可以通过选中这些复选框来选择要包括在月历视图中的日历列表。

本演练阐释了以下任务：

  • 使用**“可视 Web 部件”**项目模板创建 Web 部件。

  • 使用 Visual Studio 中的 Visual Web Developer 设计器设计 Web 部件。

  • 添加代码以处理 Web 部件中控件的事件。

  • 在 SharePoint 中测试 Web 部件。

    说明说明

    以下说明中的某些 Visual Studio 用户界面元素在计算机上出现的名称或位置可能会不同。您安装的 Visual Studio 版本以及使用的设置决定了这些元素。有关更多信息，请参见 Visual Studio 设置。

系统必备

您需要以下组件来完成本演练：

  • 支持的 Microsoft Windows 和 SharePoint 版本。有关更多信息，请参见开发 SharePoint 解决方案的要求。

  • Visual Studio 专业版或 Visual Studio Application Lifecycle Management (ALM) 的某个版本。

创建 Web 部件项目

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

创建可视 Web 部件项目

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

  2. 在菜单栏上，依次选择 文件，新，项目。如果您的IDE设置为使用Visual Basic开发设置，请在菜单栏上，依次选择 文件，新项目。

    此时将出现**“新建项目”**对话框。

  3. 在 新项目 对话框中，在 visual C# 或 Visual Basic下，展开 SharePoint 节点，然后选择 2010年 节点。

  4. 在 Visual Studio安装模板 窗格中，选择 SharePoint 2010可视Web部件 模板，然后选择 好 按钮。

    这将显示**“SharePoint 自定义向导”**。使用此向导，可以指定用于调试项目和解决方案的信任级别的站点。

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

  6. 选择 完成 按钮接受默认的本地SharePoint网站。

设计 Web 部件

通过添加控件设计Web部件从 工具箱 到用户控件的图面。

设计 Web 部件的布局

  1. 在visual Web developer设计器中，选择 设计 选项卡以切换到设计视图。

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

  3. 在 工具箱的 标准 节点，选择 CheckBoxLIst 控件然后执行下列步骤之一:

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

    • 从拖到 工具箱 的 CheckBoxList 控件并将其连接到设计器中的第一行。

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

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

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

    这将打开**“属性”**窗口。

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

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

添加可用于将日历添加到母版日历视图中的代码。

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

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

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

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

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

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

    Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

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

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

    Private MonthlyCalendarView1 As MonthlyCalendarView

    private MonthlyCalendarView MonthlyCalendarView1;

  4. 用以下代码替换 VisualWebPart1 类的 Page_Load 方法。这段代码执行下列任务：

    • 向用户控件添加月历视图。

    • 在网站上为每个日历列表添加一个复选框。

    • 指定在日历视图中显示的每种项的模板。

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

  5. 用以下代码替换 VisualWebPart1 类的 Button1_Click 方法。此代码将各个所选日历中的项添加到母版日历视图中。

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

    }

}

测试 Web 部件

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

  • 为两个单独的日历列表中的每个列表分别添加一个事件。

  • 将 Web 部件添加到 Web 部件页。

  • 指定列表包含在月历视图。

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

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

    SharePoint网站将打开，并且，Microsoft SharePoint Foundation 2010 快速启动栏显示在页。

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

    此时将显示**“日历”**页。

  3. 选择 事件 选项卡，然后选择在功能区的 新事件。

  4. 在 前缀 框中，输入事件在默认日历，然后选择 保存 按钮。

  5. 在 站点事件 菜单中，选择 更多选项 命令。

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

    此时将显示**“自定义日历”**页。

  7. 活动添加到自定义日历，命名事件在自定义日历，然后选择 保存 按钮。

将 Web 部件添加到 Web 部件页

  1. 在 站点事件 菜单中，选择 更多选项 命令。

  2. 在 创建 页上，选择 Web部件页 类型，然后选择 创建 按钮。

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

    此时将显示 Web 部件页。

  4. 选择Web部件页上的所有区域。

  5. 在页的顶部，选择 插入 选项卡，然后选择 Web部件 按钮。

  6. 选择 自定义 文件夹，选择 VisualWebPart1 Web部件，然后选择 添加 按钮。

    此时将在该页上显示 Web 部件。此时将在 Web 部件上显示以下控件：

    • 月历视图。

    • **“更新”**按钮。

    • **“日历”**复选框。

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

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

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

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

请参见

任务

如何：创建 SharePoint Web 部件

如何：使用设计器创建 SharePoint Web 部件

演练：为 SharePoint 创建 Web 部件

其他资源

为 SharePoint 创建 Web 部件