演练：使用设计器为 SharePoint 创建 Web 部件
通过 Web 部件，用户可以使用浏览器直接修改 SharePoint 网站页面的内容、外观和行为。 本演练演示如何使用 Visual Studio 2010 中 SharePoint 的**“可视 Web 部件”**项目模板以可视化方式创建 Web 部件。
Web 部件显示月历视图以及与网站上的每个日历列表相对应的复选框。 用户可以通过选中这些复选框来选择要包括在月历视图中的日历列表。
本演练阐释了以下任务：
使用**“可视 Web 部件”**项目模板创建 Web 部件。
使用 Visual Studio 中的 Visual Web Developer 设计器设计 Web 部件。
添加代码以处理 Web 部件中控件的事件。
在 SharePoint 中测试 Web 部件。
提示
以下说明中的某些 Visual Studio 用户界面元素在计算机上出现的名称或位置可能会不同。 您安装的 Visual Studio 版本以及使用的设置决定了这些元素。 有关更多信息，请参见 使用设置。
系统必备
您需要以下组件来完成本演练：
支持的 Microsoft Windows 和 SharePoint 版本。 有关更多信息，请参见开发 SharePoint 解决方案的要求。
Visual Studio 2010 专业版或 Visual Studio Application Lifecycle Management (ALM) 的某个版本。
创建 Web 部件项目
首先，使用**“可视 Web 部件”**项目模板创建 Web 部件项目。
创建可视 Web 部件项目
使用**“以管理员身份运行”**选项启动 Visual Studio 2010。
在**“文件”菜单上指向“新建”，再单击“项目”。 如果您的 IDE 设置为使用 Visual Basic 开发设置，请在“文件”菜单上单击“新建项目”**。
此时将出现**“新建项目”**对话框。
打开**“新建项目”对话框，展开要使用的语言下的“SharePoint”节点，然后选择“2010”**节点。
在**“Visual Studio 已安装的模板”窗格中选择“可视 Web 部件”，然后单击“确定”**。
这将显示**“SharePoint 自定义向导”**。 使用此向导可以选择用于调试项目的网站以及解决方案的信任级别。
单击**“完成”**以接受默认的本地 SharePoint 网站和默认的解决方案信任级别。
默认情况下，Visual Web Developer 将在**“源”**视图中显示项目的用户控件，您可以在该视图中查看此页的 HTML 元素。
设计 Web 部件
通过将控件从**“工具箱”**拖动到用户控件的图面上来设计 Web 部件。
设计 Web 部件的布局
在 Visual Web Developer 设计器上，单击**“设计”**选项卡以切换到设计视图。
在**“视图”菜单上单击“工具箱”**。
在**“工具箱”的“标准”组中，将“CheckBoxList”和“按钮”**拖动到设计器中。
在设计器中单击**“按钮”**。
在**“视图”菜单上，单击“属性窗口”**。
在**“属性”窗口中，将该按钮的“Text”**属性设置为“更新”。
处理 Web 部件上的控件的事件
添加可用于将日历添加到母版日历视图中的代码。
处理 Web 部件上的控件的事件
在设计器中，双击**“更新”**按钮。
用户控件代码文件随即在代码编辑器中打开，并显示 Button1_Click 事件处理程序。 然后，您需要向此事件处理程序添加代码。
将以下语句添加到用户控件代码文件的顶部。
Imports Microsoft.SharePoint Imports Microsoft.SharePoint.WebControlsusing Microsoft.SharePoint; using Microsoft.SharePoint.WebControls;将以下代码行添加到 VisualWebPart1userControl 类中。 此代码声明一个月历视图控件。
Private MonthlyCalendarView1 As MonthlyCalendarViewprivate MonthlyCalendarView MonthlyCalendarView1;用以下代码替换 VisualWebPart1UserControl 类的 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 Subprotected 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"; }用以下代码替换 VisualWebPart1UserControl 类的 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 Subprotected 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 部件页。
选择要包含在月历视图中的列表。
向网站上的日历列表添加事件
在 Visual Studio 中按**“F5”**。
SharePoint 网站随即打开，并在该页上显示 Microsoft SharePoint Foundation 2010 快速启动栏。
在快速启动栏中的**“列表”下单击“日历”**。
此时将显示**“日历”**页。
单击**“事件”，然后单击“新建事件”**。
在**“标题”框中的默认日历中键入“事件”，然后单击“保存”**。
单击**“网站操作”，然后单击“更多选项”**。
在**“创建”页中，单击“日历”，命名日历，然后单击“创建”**。
此时将显示**“自定义日历”**页。
将新事件添加到自定义日历中名为“事件”的自定义日历。
将 Web 部件添加到 Web 部件页
单击**“网站操作”，然后单击“更多选项”**。
在**“创建”页中，单击“Web 部件页”，然后单击“创建”**。
在**“新建 Web 部件页”页中，将该页命名为 SampleWebPartPage.aspx，然后单击“创建”**。
此时将显示 Web 部件页。
选择 Web 部件页上的任何区域。
在该页顶部单击**“插入”选项卡，然后单击“Web 部件”**。
依次单击**“自定义”文件夹、“VisualWebPart1”“Web 部件”和“添加”**。
此时将在该页上显示 Web 部件。 此时将在 Web 部件上显示以下控件：
月历视图。
**“更新”**按钮。
**“日历”**复选框。
**“自定义日历”**复选框。
选择要包含在月历视图中的列表
在 Web 部件中选择要包含在月历视图中的日历，然后单击**“更新”**。
此时会在月历视图中显示所有选定日历的事件。