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