ASP.NET2.0中使用webpart系列控件
在現在的網站設計中，更強調的是用戶的個性化設置，讓用戶可以自由的設置符合自己喜好的頁面成為網站開發人員的頭號難題，不過現在看來這個難題微軟幫我們解決了。在asp.net 2.0中新增加了一系列webpart控件，可以讓用戶很方便地對網頁的各區域布局進行調整。在一些web應用程序中，如果用戶想自定義頁面布局，比如一個新聞發布系統，想讓左，中，右三欄的位置進行調換的話，就可以使用webpart控件。
下面，我們來看下asp.net 2.0中webpart系列控件的一些基本用法。
首先，在vs.net 2005 中的工具箱中，可以找到如下圖所示的webpart系列控件，有很多個，限于篇幅，本文介紹其中的一些重要的控件：
在webpart系列控件中，其中的webpartmanager控件用于統一管理各webpart控件。而webpartzone控件，則是提供了各區域劃分，在這些區域中，用戶可以往里面放置各式各樣的控件，而當運行的時候，用戶可以移動的就是這些webpartzone控件所在的區域。
為增強認識，我們先做個簡單的例子。
1、首先使用vs.net 2005 beta 2(或者RC1)新建一個web站點，
2、往窗體中拖拉一個webpartmanager控件，再建一個3列1行的表格，分別往每個單元格里拖拉一個webpartzone控件，如下圖：
3、往webpartzone1中拖拉放一個日歷控件，并為這個日歷控件選擇一個合適的樣式
4、切換到代碼視圖狀態，將日歷控件的title屬性改為：today’s date。注意的是，日歷控件本身沒有title屬性，但當一個控件加入到webpartzone區域中去后，則該控件被自動包裝為GenericWebPart類型控件，這些類型的控件有title屬性。
5、這時，我們可以按F5來運行該程序，運行如下圖所示，可以看到，區域的右上角有最小化和關閉，恢復的按鈕。
接下來，我們介紹如何在webpart系列控件中，使用用戶自定義的控件。
1、首先，我們為工程項目增加一個"google.ascx"的控件，并且在images目錄下，添加google那張著名的logo圖片。
接著，往窗體中添加一個2*2行的表格，再往其中的一個單元格添加一個image圖象控件，指定其圖象為google.gif，再添加一個文本框，一個按鈕，如下圖所示，其中，括號內的是該控件的名稱：
3、在btnsearch按鈕的click事件中寫入如下代碼：
4、這時，將寫好的google.ascx控件，整個拖拉到我們剛才建立好的表格中的中間那個單元格，如下圖所示：
我們并且修改代碼如下，修改其名稱為google serach:
接下來，F5運行，可以看到，可以在googlesearch所在的webpart里進行google搜索了。
同時，如果覺得webpart的那些關閉，恢復，最小化的按鈕不大好看，還可以自定義按鈕，比如在images目錄下，添加下面的圖片：
然后，在webpartzone1的屬性中，指定如下的屬性就可以了。
使webpart動起來
上面設計的webpart還沒能動起來，要讓webpart動起來的話，必須要將webpar設置為design display 模式。先為webpart添加下面的radiobutton選擇框
并且在code-behind的代碼中，寫入如下代碼：
運行上面代碼，選擇design display mode，則可以象下圖那樣，自由拖動webpart,
要注意的是，當移動各webpart的位置后，即使關掉瀏覽器，下次重新打開時，依然可以看到各個控件保持原來的位置。其實，asp.net 2.0是使用在aspnetdb.mdf中的一個叫aspnet_PersonalizationPerUser的表來保存數據的，表的結構如下所示：
如果想恢復各控件的原來位置，只需要將該數據表中相應的行刪除掉就可以了。但有個問題是，如果使用每一個webpart的關閉按鈕，則很難再將其恢復（當然刪除數據表中的行，但十分麻煩）。在asp.net 2.0中，提供了另一種webpart，叫做catlogzone控件，下面介紹其用法：
1、往窗體中拖拉一個catlogzone控件，如下圖所視。
2、往該catlogzone控件區域中，再拖放三個webpart系列的控件，分別是DeclarativeCatalogPart, PageCatalogPart, and ImportCatalogPart，如下圖所示。其中，DeclarativeCatalogPart控件的作用是，顯示目前頁面上有哪些可以用的webpart控件；PageCatalogPart的作用是，可以讓用戶通過勾選的方式，選定將哪些控件添加轉移到其他webpart區域中去。ImportCatalogPart則可以通過外部磁盤文件的方式，加載其他做好了的webpart部件。
3、在radiobutton區域中，修改以下代碼，增添一個catalog display的顯示模式：
然后，在code-behind的代碼中，將代碼修改為如下：
4、在DeclarativeCatalogPart任務菜單上，點擊右上角的智能感知按鈕，然后選"edit templates"的鏈接，進入模版編輯狀態，如下圖：
再往其中的webpartstemplate區域中拖拉一個google.ascx控件，如下圖，這將允許用戶在運行時，可以自由地往頁面增加這樣的google搜索控件。
5、然后修改代碼如下：
6、運行程序，可以看到，當選擇catalog display mode時，會顯示如下圖所示的catalog zone,其中列出了當前可用的有哪些webpart控件，我們可以把這個google的控件加到其他的webpart區域，也可以嘗試將已經存在的webpart控件關閉，然后在catalog zone區域中的控件列表中，把它們再加回到頁面中去。
此外，在運行期間，還可以動態地修改webpart控件的外觀等屬性，如下：
1) 往窗體中添加一個editor zone的區域控件，往其中再拖放一個appearanceEdiotrPart控件，該控件可以在運行時，讓用戶動態改變各webpart控件的屬性。
2) 我們再修改radiobutton選擇框的代碼如下，則加一個編輯模式：
3) 修改code-behind代碼如下：
4) 運行程序，選擇edit display mode模式，這時，會發現每個控件的右上角，會多了一個"edit"的按鈕，點該按鈕，彈出如下圖的窗體，用戶可以修改每個控件的外觀等屬性。
最后，我們看下，webpart控件之間還可以進行相互之間的通信，下面的例子中，要實現的是，在一個日歷控件中點選某一個日期，會在已經做好的googlesearch的webpart控件的文本框中顯示其日期，達到通信的目的，下面介紹其實現步驟：
1、為了使兩個webpart控件之間進行通信，必須先聲明一個公共的接口。往工程項目里增加一個叫ISelectedDate.vb的類文件，放在app_code目錄下，寫入如下代碼：
這里，我們返回一個只讀的日期屬性selectedDate.
2、再創建一個日歷控件CalendarUC.ascx，其中拖拉一個普通的日歷控件即可。然后寫入如下代碼：
上面的代碼，首先實現了已經聲明了的IselectedDate接口，要留意的是＜ConnectionProvider("SelectedDate", "SelectedDate")＞中的寫法。由于在這個例子中，日歷控件要為其他的控件提供信息，因此，該日歷控件是一個provider（提供者）,而另外的接收信息的控件，是consumer(消費者)。而兩者為了要通信，必須要提供一個通信接入點，就象一個電插頭，要找到合適的電插板一樣。因此，＜ConnectionProvider("SelectedDate", "SelectedDate")＞中的第一個參數，定義了兩者的接口點，第二個參數，則是要傳遞給consumer的參數，本例是selectedDate。
3、接下來，我們在已經做好的google.ascx控件的代碼中，編寫如下代碼：
可以看到 ＜ConnectionConsumer("SelectedDate", "SelectedDate")＞的定義必須和provider中的定義一樣。
4、再修改如下代碼，將兩個控件的命名變得通俗易懂
5、最后，為了使兩者能互相通信，必須在default.aspx頁中修改如下代碼：
6、在頁面代碼中，增加一個radiobutton,用作顯示connection模式，并寫入如下代碼：
7、運行程序，選擇connect displaymode模式。再選擇GOOGLE SEARCH的那個webpart控件，點右上角的"conenct"按鈕，此時，會顯示如下圖所示，提示你要選擇從那個控件中得到信息，這里選擇日歷控件，按確定。那么，當點選日歷控件的某個日期值的時候，GOOGLE SEARCH的那個文本框里，就會顯示相應的日期了。
小結：
本文主要介紹了在asp.net 2.0中，如何使用基本的webpart系列控件，以達到改變頁面布局以及如何使頁面的各webpart控件相互之間通信。
下面，我們來看下asp.net 2.0中webpart系列控件的一些基本用法。
首先，在vs.net 2005 中的工具箱中，可以找到如下圖所示的webpart系列控件，有很多個，限于篇幅，本文介紹其中的一些重要的控件：
 |
在webpart系列控件中，其中的webpartmanager控件用于統一管理各webpart控件。而webpartzone控件，則是提供了各區域劃分，在這些區域中，用戶可以往里面放置各式各樣的控件，而當運行的時候，用戶可以移動的就是這些webpartzone控件所在的區域。
為增強認識，我們先做個簡單的例子。
1、首先使用vs.net 2005 beta 2(或者RC1)新建一個web站點，
2、往窗體中拖拉一個webpartmanager控件，再建一個3列1行的表格，分別往每個單元格里拖拉一個webpartzone控件，如下圖：
 |
3、往webpartzone1中拖拉放一個日歷控件，并為這個日歷控件選擇一個合適的樣式
4、切換到代碼視圖狀態，將日歷控件的title屬性改為：today’s date。注意的是，日歷控件本身沒有title屬性，但當一個控件加入到webpartzone區域中去后，則該控件被自動包裝為GenericWebPart類型控件，這些類型的控件有title屬性。
5、這時，我們可以按F5來運行該程序，運行如下圖所示，可以看到，區域的右上角有最小化和關閉，恢復的按鈕。
 |
接下來，我們介紹如何在webpart系列控件中，使用用戶自定義的控件。
1、首先，我們為工程項目增加一個"google.ascx"的控件，并且在images目錄下，添加google那張著名的logo圖片。
接著，往窗體中添加一個2*2行的表格，再往其中的一個單元格添加一個image圖象控件，指定其圖象為google.gif，再添加一個文本框，一個按鈕，如下圖所示，其中，括號內的是該控件的名稱：
 |
3、在btnsearch按鈕的click事件中寫入如下代碼：
| Response.Write(Page.IsValid) Dim queryStr As String = HttpUtility.UrlEncode(txtSearch.Text) Response.Redirect("http://www.google.com/search?q=" & queryStr) End Sub |
4、這時，將寫好的google.ascx控件，整個拖拉到我們剛才建立好的表格中的中間那個單元格，如下圖所示：
 |
我們并且修改代碼如下，修改其名稱為google serach:
| ＜uc1:Google title="Google Search" runat="server" ID="Google1" /＞ |
接下來，F5運行，可以看到，可以在googlesearch所在的webpart里進行google搜索了。
同時，如果覺得webpart的那些關閉，恢復，最小化的按鈕不大好看，還可以自定義按鈕，比如在images目錄下，添加下面的圖片：
 |
然后，在webpartzone1的屬性中，指定如下的屬性就可以了。
| CloseVerb.ImageUrl="Images/CloseVerb.gif" EditVerb.ImageUrl="Images/EditVerb.gif" MinimizeVerb.ImageUrl="Images/MinimizeVerb.gif" RestoreVerb.ImageUrl="Images/RestoreVerb.gif" |
使webpart動起來
上面設計的webpart還沒能動起來，要讓webpart動起來的話，必須要將webpar設置為design display 模式。先為webpart添加下面的radiobutton選擇框
| ＜asp:RadioButtonList ID="rblMode" runat="server" AutoPostBack="True"＞ ＜asp:ListItem＞Browse Display Mode＜/asp:ListItem＞ ＜asp:ListItem＞Design Display Mode＜/asp:ListItem＞ ＜/asp:RadioButtonList＞ |
并且在code-behind的代碼中，寫入如下代碼：
| Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles rblMode.SelectedIndexChanged Select Case rblMode.SelectedIndex Case 0 : WebPartManager1.DisplayMode =WebPartManager.BrowseDisplayMode Case 1 : WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode End Select End Sub |
運行上面代碼，選擇design display mode，則可以象下圖那樣，自由拖動webpart,
 |
要注意的是，當移動各webpart的位置后，即使關掉瀏覽器，下次重新打開時，依然可以看到各個控件保持原來的位置。其實，asp.net 2.0是使用在aspnetdb.mdf中的一個叫aspnet_PersonalizationPerUser的表來保存數據的，表的結構如下所示：
| Field | Value |
| Id | 928e121a-4042-4fb4-9520-21210b9b37c1 |
| PathId | 7c3b5dc0-04d0-48a2-bbb2-2b70286f22fe |
| UserId | 9bff14df-024f-4bda-9a0a-b4a19ab9e387 |
| PageSettings | ＜Binary data＞ |
| LastUpdatedDate | 10/06/2005 4:44:05 AM |
如果想恢復各控件的原來位置，只需要將該數據表中相應的行刪除掉就可以了。但有個問題是，如果使用每一個webpart的關閉按鈕，則很難再將其恢復（當然刪除數據表中的行，但十分麻煩）。在asp.net 2.0中，提供了另一種webpart，叫做catlogzone控件，下面介紹其用法：
1、往窗體中拖拉一個catlogzone控件，如下圖所視。
 |
2、往該catlogzone控件區域中，再拖放三個webpart系列的控件，分別是DeclarativeCatalogPart, PageCatalogPart, and ImportCatalogPart，如下圖所示。其中，DeclarativeCatalogPart控件的作用是，顯示目前頁面上有哪些可以用的webpart控件；PageCatalogPart的作用是，可以讓用戶通過勾選的方式，選定將哪些控件添加轉移到其他webpart區域中去。ImportCatalogPart則可以通過外部磁盤文件的方式，加載其他做好了的webpart部件。
 |
3、在radiobutton區域中，修改以下代碼，增添一個catalog display的顯示模式：
| ＜asp:RadioButtonList ID="rblMode" runat="server" AutoPostBack="True"＞ ＜asp:ListItem＞Browse Display Mode＜/asp:ListItem＞ ＜asp:ListItem＞Design Display Mode＜/asp:ListItem＞ ＜asp:ListItem＞Catalog Display Mode＜/asp:ListItem＞ ＜/asp:RadioButtonList＞ |
然后，在code-behind的代碼中，將代碼修改為如下：
| Protected Sub rblMode_SelectedIndexChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles rblMode.SelectedIndexChanged Select Case rblMode.SelectedIndex Case 0 : WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode Case 1 : WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode Case 2 : WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode End Select End Sub |
4、在DeclarativeCatalogPart任務菜單上，點擊右上角的智能感知按鈕，然后選"edit templates"的鏈接，進入模版編輯狀態，如下圖：
 |
再往其中的webpartstemplate區域中拖拉一個google.ascx控件，如下圖，這將允許用戶在運行時，可以自由地往頁面增加這樣的google搜索控件。
 |
5、然后修改代碼如下：
| ＜ZoneTemplate＞ ＜asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server"＞ ＜WebPartsTemplate＞ ＜uc1:Google title="Google Search" ID="Google2" runat="server" /＞ ＜/WebPartsTemplate＞ ＜/asp:DeclarativeCatalogPart＞ |
6、運行程序，可以看到，當選擇catalog display mode時，會顯示如下圖所示的catalog zone,其中列出了當前可用的有哪些webpart控件，我們可以把這個google的控件加到其他的webpart區域，也可以嘗試將已經存在的webpart控件關閉，然后在catalog zone區域中的控件列表中，把它們再加回到頁面中去。
 |
此外，在運行期間，還可以動態地修改webpart控件的外觀等屬性，如下：
1) 往窗體中添加一個editor zone的區域控件，往其中再拖放一個appearanceEdiotrPart控件，該控件可以在運行時，讓用戶動態改變各webpart控件的屬性。
2) 我們再修改radiobutton選擇框的代碼如下，則加一個編輯模式：
| ＜asp:RadioButtonList ID="rblMode" runat="server" AutoPostBack="True"＞ ＜asp:ListItem＞Browse Display Mode＜/asp:ListItem＞ ＜asp:ListItem＞Design Display Mode＜/asp:ListItem＞ ＜asp:ListItem＞Catalog Display Mode＜/asp:ListItem＞ ＜asp:ListItem＞Edit Display Mode＜/asp:ListItem＞ ＜/asp:RadioButtonList＞ |
3) 修改code-behind代碼如下：
| Protected Sub rblMode_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles rblMode.SelectedIndexChanged Select Case rblMode.SelectedIndex Case 0 : WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode Case 1 : WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode Case 2 : WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode Case 3 : WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode End Select End Sub |
4) 運行程序，選擇edit display mode模式，這時，會發現每個控件的右上角，會多了一個"edit"的按鈕，點該按鈕，彈出如下圖的窗體，用戶可以修改每個控件的外觀等屬性。
 |
最后，我們看下，webpart控件之間還可以進行相互之間的通信，下面的例子中，要實現的是，在一個日歷控件中點選某一個日期，會在已經做好的googlesearch的webpart控件的文本框中顯示其日期，達到通信的目的，下面介紹其實現步驟：
1、為了使兩個webpart控件之間進行通信，必須先聲明一個公共的接口。往工程項目里增加一個叫ISelectedDate.vb的類文件，放在app_code目錄下，寫入如下代碼：
| Imports Microsoft.VisualBasic Public Interface ISelectedDate ReadOnly Property SelectedDate( ) As Date End Interface |
這里，我們返回一個只讀的日期屬性selectedDate.
2、再創建一個日歷控件CalendarUC.ascx，其中拖拉一個普通的日歷控件即可。然后寫入如下代碼：
| Partial Class CalendarUC_ascx Inherits System.Web.UI.UserControl Implements ISelectedDate Public ReadOnly Property SelectedDate( ) As Date Implements ISelectedDate.SelectedDate Get Return Calendar1.SelectedDate.Date End Get End Property ＜ConnectionProvider("SelectedDate", "SelectedDate")＞ _ Public Function GetSelectedDate( ) As ISelectedDate Return Me End Function End Class |
上面的代碼，首先實現了已經聲明了的IselectedDate接口，要留意的是＜ConnectionProvider("SelectedDate", "SelectedDate")＞中的寫法。由于在這個例子中，日歷控件要為其他的控件提供信息，因此，該日歷控件是一個provider（提供者）,而另外的接收信息的控件，是consumer(消費者)。而兩者為了要通信，必須要提供一個通信接入點，就象一個電插頭，要找到合適的電插板一樣。因此，＜ConnectionProvider("SelectedDate", "SelectedDate")＞中的第一個參數，定義了兩者的接口點，第二個參數，則是要傳遞給consumer的參數，本例是selectedDate。
3、接下來，我們在已經做好的google.ascx控件的代碼中，編寫如下代碼：
| Private _selectedDate As ISelectedDate ＜ConnectionConsumer("SelectedDate", "SelectedDate")＞ _ Sub setSearchText(ByVal SearchText As ISelectedDate) Me._selectedDate = SearchText End Sub Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender If _selectedDate IsNot Nothing Then txtSearch.Text = _selectedDate.SelectedDate.ToShortDateString End If End Sub |
可以看到 ＜ConnectionConsumer("SelectedDate", "SelectedDate")＞的定義必須和provider中的定義一樣。
4、再修改如下代碼，將兩個控件的命名變得通俗易懂
| ＜ZoneTemplate＞ ＜uc1:Google title="Google Search" runat="server" ID="Google1" /＞ ＜uc3:CalendarUC title="Calendar Web Part" runat="server" ID="CalendarUC1" /＞ ＜/ZoneTemplate＞ |
5、最后，為了使兩者能互相通信，必須在default.aspx頁中修改如下代碼：
| ＜asp:WebPartManager ID="WebPartManager1" runat="server"＞ ＜StaticConnections＞ ＜asp:WebPartConnection ID="Connection" ProviderID="CalendarUC1" ProviderConnectionPointID="SelectedDate" ConsumerID="Google1" ConsumerConnectionPointID="SelectedDate" /＞ ＜/StaticConnections＞ ＜/asp:WebPartManager＞ |
6、在頁面代碼中，增加一個radiobutton,用作顯示connection模式，并寫入如下代碼：
| Case 4 : WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode |
7、運行程序，選擇connect displaymode模式。再選擇GOOGLE SEARCH的那個webpart控件，點右上角的"conenct"按鈕，此時，會顯示如下圖所示，提示你要選擇從那個控件中得到信息，這里選擇日歷控件，按確定。那么，當點選日歷控件的某個日期值的時候，GOOGLE SEARCH的那個文本框里，就會顯示相應的日期了。
 |
小結：
本文主要介紹了在asp.net 2.0中，如何使用基本的webpart系列控件，以達到改變頁面布局以及如何使頁面的各webpart控件相互之間通信。