逐步解說：使用設計工具建立 SharePoint 的 Web 組件
Web 組件可讓使用者直接透過瀏覽器，修改 SharePoint 網站頁面的內容、外觀及行為。您可以使用，在 Visual Studio的 [視覺 Web 組件] SharePoint 專案範本本逐步解說將示範如何以視覺化方式建立網頁組件。
網頁組件會在網站上顯示月份行事曆檢視，而且每個行事曆清單都有一個核取方塊。使用者只要選取核取方塊，就能選擇要納入月份行事曆檢視中的行事曆清單。
這個逐步解說將說明下列工作：
使用 [視覺 Web 組件] 專案範本建立網頁組件。
使用 Visual Studio 中的 Visual Web Developer 設計工具來設計網頁組件。
加入程式碼來處理網頁組件上控制項的事件。
在 SharePoint 中測試網頁組件。
.gif "注意事項")
注意事項在下列指示的某些 Visual Studio 使用者介面項目中，您的電腦可能會顯示不同的名稱或位置：您所擁有的 Visual Studio 版本和使用的設定決定了這些項目。如需詳細資訊，請參閱 Visual Studio 設定。
必要條件
您需要下列元件才能完成此逐步解說：
支援的 Microsoft Windows 和 SharePoint 版本。如需詳細資訊，請參閱開發 SharePoint 方案的要求。
Visual Studio Professional 或某個 Visual Studio Application Lifecycle Management (ALM) 版本。
建立網頁組件專案
首先，請使用 [視覺 Web 組件] 專案範本建立網頁組件專案。
若要建立視覺 Web 組件專案
使用 [以系統管理員身分執行] 選項來啟動 Visual Studio。
在功能表列上，選取 [檔案]， [新增]， [專案]。如果您的 IDE 設定為使用 Visual Basic 開發設定，在功能表列上，選取 [檔案]， [新增專案]。
[新增專案] 對話方塊隨即出現。
在 [新增專案] 對話方塊，請在 [Visual C#] 或 [Visual Basic] 底下，展開[SharePoint] 節點，然後選取[2010 年] 節點。
在 [Visual Studio 安裝範本] 窗格中，選取 [SharePoint 2010 視覺 Web 組件] 範本，然後選取 [確定] 按鈕。
[SharePoint 自訂精靈] 隨即出現。您可以使用這個精靈，您可指定用來偵錯專案和方案的信任層級的站台。
在 [此 SharePoint 方案的信任層級為何?] 區段中，選取[部署為陣列方案] 選項按鈕。
選取 [完成] 按鈕接受預設的本機 SharePoint 網站。
設計網頁組件
將控制項設計 Web 組件從 [工具箱] 加入至使用者控制項的介面。
若要設計網頁組件的配置
在 Visual Web Developer 設計工具中，選取 [設計] 索引標籤切換至 [設計] 檢視。
在功能表列上，選取 [檢視]， [工具箱]。
在 [工具箱] 的 [標準] 節點，請選取 [CheckBoxLIst] 控制項然後執行下列其中一個步驟:
開啟 [CheckBoxList] 控制項的捷徑功能表並選取 [複製]，選取設計工具中的第一行，開啟線條的捷徑功能表，然後選取 [貼上]。
從拖曳 [工具箱] 的 [CheckBoxList] 控制項並將它連接至設計工具中的第一行。
重複上述步驟，但是，捲動按鈕移至設計工具中的下一行。
在設計工具中，選取 [按鈕 1] 按鈕。
在功能表列上，選取 [檢視]， [屬性視窗]。
[屬性] 視窗隨即開啟。
在按鈕的 [文字] 屬性中，輸入更新。
處理網頁組件上控制項的事件
加入可讓使用者將行事曆新增到主要行事曆檢視的程式碼。
若要處理網頁組件上控制項的事件
請執行下列其中一組步驟：
在設計工具中，按兩下 [更新] 按鈕。
在 [更新] 按鈕的 [屬性] 視窗中，選取 [事件] 按鈕。在 [按一下] 屬性中，輸入 Button1_Click，然後選取 ENTER 鍵。
使用者控制項程式碼檔案隨即在 [程式碼編輯器] 中開啟，並且出現 Button1_Click 事件處理常式。稍後，您會將程式碼加入至事件處理常式。
在使用者控制項程式碼檔案上方加入下列陳述式。
Imports Microsoft.SharePoint Imports Microsoft.SharePoint.WebControlsusing Microsoft.SharePoint; using Microsoft.SharePoint.WebControls;在 VisualWebPart1 類別中加入下列程式碼，此程式碼會宣告月份行事曆檢視控制項。
Private MonthlyCalendarView1 As MonthlyCalendarViewprivate MonthlyCalendarView MonthlyCalendarView1;以下列程式碼取代 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 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"; }以下列程式碼取代 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 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 ，快速啟動列也會顯示在頁面上。
在 [快速啟動] 列中， [清單] 底下，選取[日曆] 連結。
[行事曆] 頁面隨即出現。
選取 [事件] 索引標籤，然後選取功能區上的 [新增事件] 。
在方塊中，請 [標題] 參與預設行事曆中的事件，然後選取 [存檔] 按鈕。
在 [設置動作。] 功能表上，選擇 [更多選項] 命令。
在 [建立] 頁面上，選取 [日曆] 型別，為行事曆命名，然後選取 [建立] 按鈕。
[自訂行事曆] 頁面隨即出現。
將事件加入至這個自訂行事曆命名事件，事件會將自訂行事曆，然後選取 [存檔] 按鈕。
若要將網頁組件加入至網頁組件頁面
在 [設置動作。] 功能表上，選擇 [更多選項] 命令。
在 [建立] 頁面上，選取 [Web 組件頁面。] 類型，然後選取[建立] 按鈕。
在 [新的 Web 組件頁面] 頁面，命名頁面 SampleWebPartPage.aspx，然後選取 [建立] 按鈕。
該網頁組件頁面隨即出現。
選取 Web 組件頁面上的任何區域。
在網頁的頂端，選取 [插入] 索引標籤，然後選取 [網頁組件] 按鈕。
選取 [自訂] 資料夾，選取 [VisualWebPart1] Web 組件，然後選取 [加入] 按鈕。
該網頁組件隨即出現在頁面上。下列控制項會出現在網頁組件上：
月份行事曆檢視。
[更新] 按鈕。
[行事曆] 核取方塊。
[自訂行事曆] 核取方塊。
指定清單包含在月份行事曆檢視
在 Web 組件中，指定您在月份行事曆檢視中要包含的行事曆，然後選取 [更新] 按鈕。
從指定的所有行事曆中的事件都會顯示在月份行事曆檢視。
請參閱
工作
HOW TO：使用設計工具建立 SharePoint Web 組件