ASP.NET 2.0 Web Part編程入門(mén)（實(shí)踐篇）
2007-1-23 11:13:48 Count:
微軟MCSE2003:Security 微軟MCSE2003+MCDBA Cisco網(wǎng)絡(luò )工程師CCNA 華為認證網(wǎng)絡(luò )工程師（HCNE） CorelDRAW 12 官方認證 Adobe平面設計師(ACCD) AutoCAD(2006)認證專(zhuān)家 Adobe網(wǎng)絡(luò )設計師（ACCD） 軟件加密與解密工程師培訓 網(wǎng)絡(luò )應用工程師 國家信息化網(wǎng)絡(luò )安全工程師 CEAC網(wǎng)絡(luò )應用工程師一、簡(jiǎn)介
在許多Web應用程序中，能夠更改內容的外觀(guān)以及允許用戶(hù)選擇和排列要顯示的內容是非常有用的。ASP.NET Web Part功能由一組用于創(chuàng )建網(wǎng)頁(yè)的控件組成，這些控件能顯示模塊化內容并允許用戶(hù)更改外觀(guān)和內容。
在本示例中，我將創(chuàng )建一個(gè)使用Web Part控件集的頁(yè)面，用于創(chuàng )建用戶(hù)可以修改或進(jìn)行個(gè)性化設置的網(wǎng)頁(yè)。本示例具體實(shí)現如下任務(wù)：
◆向頁(yè)添加Web Part控件。
◆創(chuàng )建一個(gè)自定義用戶(hù)控件，并將其用作Web Part控件。
◆允許用戶(hù)對頁(yè)面上的Web Part控件的布局進(jìn)行個(gè)性化設置。
◆允許用戶(hù)編輯Web Part控件的外觀(guān)。
◆允許用戶(hù)從可用Web Part控件的目錄中進(jìn)行選擇。
(一)先決條件
若要完成本示例，您需要：
◆可標識各個(gè)用戶(hù)的站點(diǎn)。如果您有一個(gè)已配置了ASP.NET成員資格的站點(diǎn)，則可以使用該站點(diǎn)作為本示例的起點(diǎn)。
◆配置過(guò)的個(gè)性化設置提供程序和數據庫。Web Part個(gè)性化設置默認情況下是啟用的，它使用SQL個(gè)性化設置提供程序(SqlPersonalizationProvider)以及Microsoft SQL Server Exprss Edition（SSE）存儲個(gè)性化設置數據。此示例使用SSE和默認的SQL提供程序。如果安裝了SSE，則不需要進(jìn)行任何配置。SSE在安裝Microsoft Visual Studio 2005時(shí)作為可選部分免費提供，也可以從Microsoft.com免費下載。若要使用SQL Server的某個(gè)完整版本，必須安裝和配置ASP.NET應用程序服務(wù)數據庫，并配置SQL個(gè)性化設置提供程序以連接到該數據庫。當然，你也可以創(chuàng )建和配置自定義提供程序，以便使用其他非SQL數據庫或存儲解決方案。
【注】本文程序調試環(huán)境為Windows XP Professional＋VS2005。
二、案例分析
現在，我們開(kāi)始創(chuàng )建一個(gè)使用Web Part控件顯示靜態(tài)內容的頁(yè)面。使用Web Part的第一步是創(chuàng )建具有兩個(gè)必需的結構元素的頁(yè)面。首先，Web Part頁(yè)需要一個(gè)WebPartManager控件來(lái)跟蹤和協(xié)調所有Web Part控件；其次，Web Part頁(yè)需要一個(gè)或多個(gè)區域（區域即“Zone”，是包含WebPart或其他服務(wù)器控件并且占據頁(yè)面上指定區域的復合控件）。
【注意】您無(wú)需執行任何操作即可啟用Web Part個(gè)性化設置；Web Part控件集默認情況下即啟用該設置。在站點(diǎn)上第一次運行Web Part頁(yè)時(shí)，ASP.NET會(huì )設置默認的個(gè)性化設置提供程序來(lái)存儲用戶(hù)個(gè)性化設置。
(一)創(chuàng )建包含Web Part控件的頁(yè)面
1.啟動(dòng)VS2005，創(chuàng )建一個(gè)ASP.NET網(wǎng)站W(wǎng)ebPartsDemo，并將默認頁(yè)面Default.aspx重命名為WebPartsDemo.aspx。
2.切換到“設計”視圖。
3.確保在“視圖”菜單中選中“非可視控件”和“詳細信息”選項，以便查看不具有用戶(hù)界面的布局標記和控件。
4.在設計圖面上將插入點(diǎn)放在標記前，然后按Enter添加一個(gè)新行。將插入點(diǎn)放在新行字符前，單擊菜單上的“塊格式”下拉列表控件，再選擇選項“標題1”。在該標題中添加文本“Web Part應用演示”。
5.從工具箱的“WebParts”選項卡中，將一個(gè)WebPartManager控件拖動(dòng)到頁(yè)上，并將它放置在新行字符之后，標記之前。
【注】WebPartManager控件不呈現任何輸出，因此在設計器圖面上顯示為灰框。
6.將插入點(diǎn)放置在標記內。
7.在“布局”菜單中單擊“插入表”，然后創(chuàng )建一個(gè)包含一行三列的表。單擊“單元格屬性”按鈕，從“垂直對齊”下拉列表中選擇“頂端對齊”，單擊“確定”創(chuàng )建表格。
8.將一個(gè)WebPartZone控件拖動(dòng)到該表左邊的列中，并設置下面相應的屬性：
◆ID—SidebarZone；
◆HeaderText—“側欄”；
9.再次將一個(gè)WebPartZone控件拖動(dòng)到該表中間的列中，并設置下面的屬性：
◆ID—MainZone；
◆HeaderText—“主要”；
10.保存文件。
現在，頁(yè)面中具有兩個(gè)能夠單獨控制的不同區域。但是，這兩個(gè)區域中都沒(méi)有任何內容，因此下一步就是創(chuàng )建內容。此示例中使用的是僅顯示靜態(tài)內容的Web Part控件。
Web Part區域的布局由元素指定。在區域模板內可以添加任何ASP.NET控件，無(wú)論是自定義Web Part控件、用戶(hù)控件還是現有服務(wù)器控件。注意，本例中使用的是Label控件，其中僅添加了靜態(tài)內容。如果在WebPartZone區域中放置常規服務(wù)器控件，則在運行時(shí)，ASP.NET將該控件視為Web Part控件，并在控件上啟用Web Part功能。
(二)為主要區域創(chuàng )建內容
1.從工具箱的“標準”選項卡中將一個(gè)Label控件拖動(dòng)到ID屬性設置為MainZone的區域的內容區域中。
2.切換到“源”視圖。注意，系統自動(dòng)添加了一個(gè)元素來(lái)包裝MainZone中的Label控件。
3.為元素添加一個(gè)名為title的屬性，并將屬性值設置為“Content”，并從元素中移除Text="Label"屬性。然后，在元素的開(kāi)始標記和結束標記之間添加一些文本，例如在一對元素標記之間添加文本“歡迎訪(fǎng)問(wèn)本主頁(yè)”。代碼如下所示。
<asp:webpartzone id="MainZone" runat="server" headertext="主要">
<zonetemplate>
<asp:label id="Label1" runat="server" title="內容">
<h2>歡迎訪(fǎng)問(wèn)本主頁(yè)</h2>
</asp:label>
</zonetemplate>
</asp:webpartzone>
4.保存文件。
接下來(lái)，創(chuàng )建一個(gè)也可以作為Web Part控件添加到頁(yè)面中的用戶(hù)控件。
(三)創(chuàng )建用戶(hù)控件
本例中，我將一個(gè)新的Web用戶(hù)控件添加到站點(diǎn)中，充當搜索控件。將該控件放在WebPartsDemo.aspx頁(yè)所在的目錄中，并將其命名為SearchUserControl.ascx。
【注意】此示例的用戶(hù)控件并不實(shí)現實(shí)際的搜索功能；它僅用于演示W(wǎng)eb部件功能。
1.切換到“設計”視圖。從工具箱的“標準”選項卡中，將TextBox控件拖動(dòng)到頁(yè)面上。
2.將插入點(diǎn)放在剛添加的文本框之后，再按Enter添加一個(gè)新行。
3.將Button控件拖動(dòng)到頁(yè)面上剛添加的文本框下面的新行上。
4.切換到“源”視圖，并確保用戶(hù)控件的源代碼如下所示：
<%@ control language="C#" classname="SearchUserControl" %>
<asp:textbox runat="server" id=" TextBox1"></asp:textbox>
<br />
<asp:button runat="server" id=" Button1" text="搜索" />
5.保存并關(guān)閉文件。
接下來(lái)，我們將向側欄區域添加Web Part控件—將向側欄區域添加兩個(gè)控件：一個(gè)包含鏈接列表，另一個(gè)則是在前面創(chuàng )建的用戶(hù)控件。鏈接是作為標準Label服務(wù)器控件添加的，添加方法類(lèi)似于為主要區域創(chuàng )建靜態(tài)文本。雖然用戶(hù)控件中包含的各個(gè)服務(wù)器控件都可直接包含在該區域中（類(lèi)似標簽控件），但在本示例中不是這樣。相反，它們是在前面的過(guò)程中創(chuàng )建的用戶(hù)控件的一部分。這演示了將所需控件和其他功能打包到用戶(hù)控件中，然后在某個(gè)區域中將該控件作為Web Part控件引用的常用方式。
運行時(shí)，Web Part控件集將這兩個(gè)控件都包裝在GenericWebPart控件中。當GenericWebPart控件包裝Web服務(wù)器控件時(shí)，GenericWebPart為父控件，您可以通過(guò)該父控件的ChildControl屬性訪(fǎng)問(wèn)服務(wù)器控件。
【注意】GenericWebPart控件能夠使標準Web服務(wù)器控件具有與從WebPart類(lèi)派生的Web Part控件相同的基本行為和屬性。
(四)向側欄區域添加Web Part控件
1.打開(kāi)WebPartsDemo.aspx頁(yè)。
2.切換到“設計”視圖。
3.將已創(chuàng )建的用戶(hù)控件頁(yè)SearchUserControl.ascx從“解決方案資源管理器”拖放到ID屬性設置為SidebarZone的區域中。
4.保存WebPartsDemo.aspx頁(yè)面。
5.切換到“源”視圖。
6.在SidebarZone的元素內，對用戶(hù)控件的引用之上，添加一個(gè)包含了鏈接的元素；另外，將Title屬性添加到用戶(hù)控件標記，屬性值為“搜索”，如下所示：
<asp:WebPartZone id="SidebarZone" runat="server"
headertext="側欄">
<zonetemplate>
<asp:label runat="server" id="linksPart" title="我的鏈接">
<a href="
asp.net/‘>http://www.asp.net">ASP.NET網(wǎng)站</a>
<br />
<a href="
gotdotnethttp://www.gotdotnet.com">GotDotNet</a>
<br />
<a href="
contoso.comhttp://www.contoso.com">Contoso.com</a>
<br />
</asp:label>
<uc1:SearchUserControl id="searchPart" runat="server"
title="搜索" />
</zonetemplate>
</asp:WebPartZone>
(五)測試頁(yè)面
圖1.具有兩個(gè)區域的Web Part演示頁(yè)
(六)支持用戶(hù)更改布局和編輯頁(yè)面
元素和兩個(gè)編輯控件。
1．創(chuàng )建支持對頁(yè)面布局進(jìn)行更改的用戶(hù)控件
(1)在Visual Studio中，選擇“文件→新建”菜單，然后單擊“文件”選項。
(2)在“添加新項”對話(huà)框中，選擇“Web用戶(hù)控件”。將新文件命名為DisplayModeMenu.ascx，并取消選項“將源代碼放在單獨的文件中”。
(3)單擊“添加”新建控件。
(4)切換到“源”視圖。
(5)按如下內容修改源碼（此用戶(hù)控件允許用戶(hù)更改其視圖和顯示模式的Web Part控件集功能，并允許您在某種顯示模式下更改頁(yè)面的物理外觀(guān)和布局）：
2.允許用戶(hù)更改布局
<td valign="top">
<asp:EditorZone ID="EditorZone1" runat="server">
<ZoneTemplate>
<asp:AppearanceEditorPart ID="AppearanceEditorPart1"
runat="server" />
<asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
</ZoneTemplate>
</asp:EditorZone>
</td>
3.測試布局更改
圖2.包含“鏈接”控件的Web Part演示頁(yè)
圖3.編輯模式下的Web Part演示頁(yè)
圖4.編輯過(guò)的Web Part演示頁(yè)
(七)在運行時(shí)添加Web Part
1.允許用戶(hù)在運行時(shí)添加Web Part
元素的源代碼。注意，DeclarativeCatalogPart控件中包含了一個(gè)元素以及兩個(gè)可從目錄添加到頁(yè)面中的服務(wù)器控件。
【提示】顯然，在DeclarativeCatalogPart控件的“WebPartsTemplate”部分中也可以加入你的自定義Web控件或用戶(hù)控件—如果你愿意的話(huà)。
(8)為添加到目錄中的每個(gè)控件添加Title屬性。
【問(wèn)題】這是否又是微軟的一個(gè)小紕漏？開(kāi)始加入控件時(shí)，只顯示Caption屬性，但是在目錄區域中顯示單選框時(shí)，則只能使用Title屬性，因此這里只得手工添加，而且可以去掉原有的Caption屬性，見(jiàn)下面的代碼。另外，雖然Title并非在設計時(shí)通?？稍谶@兩個(gè)服務(wù)器控件上設置的屬性，但當用戶(hù)在運行時(shí)刻將這些控件從目錄添加到WebPartZone區域時(shí)，這些控件均包裝在GenericWebPart控件中。這使它們可以“充當”Web Part控件，而且它們可以顯示此標題。
2.測試Web Part目錄
圖5.從目錄區域添加到主要區域的控件（充當Web Part）
三、小結
