逐步解說：使用設計工具建立 SharePoint 的 Web 組件
Web 組件可讓使用者直接透過瀏覽器，修改 SharePoint 網站頁面的內容、外觀及行為。 本逐步解說將示範如何使用 Visual Studio 2010 中的 SharePoint [視覺 Web 組件] 專案範本，以視覺化方式建立網頁組件。
網頁組件會在網站上顯示月份行事曆檢視，而且每個行事曆清單都有一個核取方塊。 使用者只要選取核取方塊，就能選擇要納入月份行事曆檢視中的行事曆清單。
這個逐步解說將說明下列工作：
使用 [視覺 Web 組件] 專案範本建立網頁組件。
使用 Visual Studio 中的 Visual Web Developer 設計工具來設計網頁組件。
加入程式碼來處理網頁組件上控制項的事件。
在 SharePoint 中測試網頁組件。
.gif "注意事項")
注意事項在下列指示的某些 Visual Studio 使用者介面項目中，您的電腦可能會顯示不同的名稱或位置： 您所擁有的 Visual Studio 版本和使用的設定決定了這些項目。 如需詳細資訊，請參閱 使用設定。
必要條件
您需要下列元件才能完成此逐步解說：
支援的 Microsoft Windows 和 SharePoint 版本。 如需詳細資訊，請參閱開發 SharePoint 方案的要求。
Visual Studio 2010 Professional 或某個 Visual Studio Application Lifecycle Management (ALM) 版本。
建立網頁組件專案
首先，請使用 [視覺 Web 組件] 專案範本建立網頁組件專案。
若要建立視覺 Web 組件專案
使用 [以系統管理員身分執行] 選項來啟動 Visual Studio 2010。
在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]。 如果您的 IDE 設定為使用 Visual Basic 開發設定，請按一下 [檔案] 功能表上的 [新增專案]。
[新增專案] 對話方塊隨即出現。
開啟 [新增專案] 對話方塊、在您要使用之語言下展開 [SharePoint] 節點，然後選取 [2010] 節點。
在 [Visual Studio 安裝的範本] 窗格中選取 [視覺 Web 組件]，然後按一下 [確定]。
[SharePoint 自訂精靈] 隨即出現。 這個精靈可讓您選取用來偵錯專案的網站以及方案的信任層級。
按一下 [完成] 以接受預設的本機 SharePoint 網站，以及方案的預設信任層級。
根據預設，Visual Web Developer 會在 [原始碼] 檢視內顯示專案的使用者控制項，您可以在該檢視中查看網頁的 HTML 項目。
設計網頁組件
您可以將控制項從 [工具箱] 拖曳至使用者控制項的介面，以設計網頁組件。
若要設計網頁組件的配置
在 Visual Web Developer 設計工具上按一下 [設計] 索引標籤，切換至 [設計] 檢視。
在 [檢視] 功能表上，按一下 [工具箱]。
在 [工具箱] 中，將 [CheckBoxList] 和 [Button] 從 [標準] 群組拖曳到設計工具。
在設計工具中按一下 [Button]。
在 [檢視] 功能表中，按一下 [屬性視窗]。
在 [屬性視窗] 中，將按鈕的 [Text] 屬性設為 [更新]。
處理網頁組件上控制項的事件
加入可讓使用者將行事曆新增到主要行事曆檢視的程式碼。
若要處理網頁組件上控制項的事件
在設計工具上，按兩下 [更新] 按鈕。
使用者控制項程式碼檔案隨即在 [程式碼編輯器] 中開啟，並且出現 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; } } }
測試網頁組件
執行專案時，SharePoint 網站會開啟。 網頁組件會自動新增至 SharePoint 中的 [Web 組件庫]。 若要測試這個專案，請執行下列工作：
在兩個不同的行事曆清單中分別加入一項事件。
將網頁組件加入至 [網頁組件頁面]。
選取要包含在月份行事曆檢視中的清單。
若要將事件新增至網站上的行事曆清單
在 Visual Studio 中按下 F5。
SharePoint 網站隨即開啟，Microsoft SharePoint Foundation 2010 [快速啟動] 列也會出現在頁面上。
在 [快速啟動] 列的 [清單] 下，按一下 [行事曆]。
[行事曆] 頁面隨即出現。
按一下 [事件]，再按一下 [新增事件]。
在 [標題] 方塊的預設行事曆中輸入「事件」，然後按一下 [儲存]。
按一下 [網站動作]，然後按一下 [更多選項]。
按一下 [建立] 頁面中的 [行事曆]，為行事曆命名，然後按一下 [建立]，
[自訂行事曆] 頁面隨即出現。
在自訂行事曆中，加入名為「事件」的新事件。
若要將網頁組件加入至網頁組件頁面
按一下 [網站動作]，然後按一下 [更多選項]。
按一下 [建立] 頁面的 [網頁組件頁面]，然後按一下 [建立]。
在 [新增網頁組件頁面] 頁面中，將頁面命名為 SampleWebPartPage.aspx，然後按一下 [建立]。
該網頁組件頁面隨即出現。
選取該網頁組件頁面上的任何區域。
在頁面頂端按一下 [插入] 索引標籤，然後按一下 [網頁組件]。
按一下 [自訂] 資料夾中的 [VisualWebPart1] 網頁組件，然後按一下 [加入]。
該網頁組件隨即出現在頁面上。 下列控制項會出現在網頁組件上：
月份行事曆檢視。
[更新] 按鈕。
[行事曆] 核取方塊。
[自訂行事曆] 核取方塊。
若要選取要包含在月份行事曆檢視中的清單
在網頁組件中選取您想要納入月份行事曆檢視中的行事曆，然後按一下 [更新]。
所有已選取之行事曆中的事件都會顯示在月份行事曆檢視中。
請參閱
工作
HOW TO：使用設計工具建立 SharePoint Web 組件