asp.net2.0WebParts的使用

介紹
如果說WebParts是web中一個非酷的效果的話，我想沒有人會懷疑。WebParts爲我們提供了對頁中的對象進行拖拽的功能，它也可以在runtime的時候改變對象的標題、邊框樣式等。在WebParts出現之前，要實現這個功能是一項令人非常頭痛的工作，因爲我們必須寫大量的JavaScrip，還要把頁中每個對象的狀態保存到數據庫中。

WebParts有兩個基本的東東
    ·WebPartManager
    ·WebPart Zones

WebPartManager
WebPartManager用來管理所有的webparts。如果你想在你的web站點中使用webparts就必須要使用WebPartManager。它的作用是提供你在頁中進行拖拽的JavaScript代碼

WebPart Zones
WebPart Zones中有4個zone
    ·WebPartZone
    ·EditorZone
    ·CatalogZone
    ·ConnectionZone

WebPartZone
WebPartZone是webparts裏最基本的單位。通過在WebPartZone裏放置不同的內容，我們就能夠允許用戶在頁上對其進行拖拽。你可以在你的頁上增加一個DropDownList以實現使用不同zone的功能，該DropDownList的選項如下
    ·Browse
    ·Design
    ·Edit
    ·Catalog
    ·Connect

在DropDownList的SelectedIndexChanged事件裏粘貼如下代碼（這裏假設DropDownList的id是“cmbOptions”，WebPartManager的id是“WebPartManager1”）

if (cmbOptions.SelectedValue == "Design")

{

WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;

}

else if (cmbOptions.SelectedValue == "Browse")

{

WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;

}

else if (cmbOptions.SelectedValue == "Catalog")

{

WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;

}

else if (cmbOptions.SelectedValue == "Edit")

{

WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;

}

else if (cmbOptions.SelectedValue == "Connect")

{

WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;

}

Browse mode
Browse mode是webparts的默認模式。在Browse mode中雖然我們不能拖拽webpart，但是可以在webpart上看到兩個選項，最小化和關閉。最小化一個webpart會顯示它的最小化狀態，如果選擇關閉的話我們就只能在Catalog mode下重新恢復它，稍後我們會討論它。這裏有一個Browse mode下簡單的webpart的圖例

Design mode
在Design mode中我們就可以在兩個webpart對象間進行拖拽了。我這裏有兩個webpart，分別被命名爲“Links”和“Search”。下圖示例了把“Links”拖拽到“Search”的情況

Edit Mode
Edit Mode允許你在runtime中編輯webpart。編輯webpart是一個比較深層次的應用，它分爲4個類型:Appearance、Behavio、Property和Layout。我們首先來看看如何使用Appearance和LayoutEditorPart

Appearance和LayoutEditorPart
首先在web form上放置一個EditorZone。然後在EditorZone裏放置一個AppearanceEditorPart和LayoutEditorPart。運行這個程序，從DropDownList中選擇編輯模式。在可用的webpart上單擊菜單的編輯按鈕。

你會看到如下圖所示的顯示

你可以在這裏改變webpart的標題。我們也可以看到編輯模式下的一些基本選項。鑲邊類型是邊框和標題的樣式。鑲邊狀態可以讓你設置是否最小化它

PropertyGridEditorPart
通過使用屬性編輯器我們可以改變webpart中對象的屬性。在我們的例子中將示例如何改變對象的CssClass屬性。我們將用與解釋AppearanceEditorPart和LayoutEditorPart相同的方法來說明它

在webform上放置一個EditorZone。然後在EditorZone裏放置一個PropertyGridEditorPart。爲了使用EditorZone我們需要在你的項目裏新增一個用戶控件。在這個用戶控件裏放置一個TextBox，然後再把這個用戶控件放到web form的webpart裏。該用戶控件的後置代碼如下

string _cssClass = "FrmTxtBox";

[WebBrowsable(), Personalizable(true)]

public string CssClass

{

get { return _cssClass; }

set { TextBox1.CssClass= value; }

}

protected void Page_Load(Object sender, EventArgs e)

{

TextBox1.CssClass = CssClass;

}

上面的代碼用於改變TextBox的CssClass屬性。這個屬性可以在webpart的編輯模式中修改，同時我們也可以在runtime的時候改變它。此外我們也給CssClass附加了兩個修飾屬性
·WebBrowsable - 允許webpart在編輯模式中顯示用戶定義的屬性
·Personalizable - 允許屬性是可編輯的

現在運行這個頁。如果我們設置了WebPartManager爲編輯模式的話，就將會看到webpart的菜單選項中出現了編輯按鈕。截屏如下

在webpart的菜單中單擊編輯按鈕，就會看到編輯模式裏有一個CssClass屬性。截屏如下：

我們可以看到TextBox使用FrmTxtBox作爲默認值（樣式表的class）。這個樣式把邊框的顏色定義爲黑色。我們現在可以使用不同的樣式class，比如我們有一個名爲“CustomClass1”的樣式class，它定義爲沒有邊框。輸入這個值後按OK按鈕，你將會看到新的邊框樣式

使用這種方法我們就可以改變webpart裏對象的屬性

Catalog mode
Catalog mode給我們提供了在運行時添加和移除webpart的選項。例如，如果我們有一些模塊，如天氣模塊、新聞模塊、購物模塊和占卜模塊等等。如果想在運行時給用戶提供顯示和隱藏這些模塊的選項，我們就可以使用Catalog mode來完成這項任務。

CatalogZone
CatalogZone分爲3個類型，分別是PageCatalogPart、DeclarativeCatalogPart和ImportCatalogPart。在webform上增加一個CatalogZone，然後在CatalogZone內添加之前提到的3個類型。當webpart被關閉後我們可以用PageCatalog來幫我們來顯示webpart，截屏如下：

PageCatalogPart用於顯示被關閉的webpart列表。DeclarativeCatalogPart用於顯示該聲明下的webpart列表。圖例如下：

ImportCatalog
ImportCatalog用來顯示導入的webpart列表。我們可以導入擴展名爲.WebPart的文件。如果要導出類型爲.WebPart的文件你需要在web.config增加如下元素

然後我們有兩種方法可以實現導出功能
設置控件的屬性ExportMode的值爲All。如果你的控件繼承自WebPart就可以這麼做，代碼如下

<aspSample:CustomWebPart id="Sample" runat="server" ExportMode="All" />

或者在Page_Load裏寫如下代碼

GenericWebPart gwp = WebUserControl2_1.Parent;

gwp.ExportMode = WebPartExportMode.All;

通過導入功能我們就可以增加任何webpart了，圖例如下

Connect mode
Connect mode允許各個webpart之間可以互相通信。用戶可以依照他們的需要在運行時創建他們的連接。這個連接並不是讓webpart連接到數據庫，而是webpart之間的互相連接。例如，如果有一個webpart裏包含一個grid，它要根據用戶的輸入顯示相應的記錄，而用戶使用的TextBox在另一個webpart裏，此時就要使用Connect mode發送數據。

在我們的例子裏，我們將在一個頁裏放置兩個webpart。一個負責用戶輸入，另一個負責顯示。在你的web站點裏新建兩個用戶控件，分別命名爲“Provider”和“Consumer”，並把它們放到相應的webpart裏。在App_Code文件夾裏新建一個名爲“ITextProvicer”的類。代碼如下：

public interface ITextToPass

{

string GetText();

}

我們會在Provider和Consumer兩個用戶控件中使用這個接口，以實現在這兩個實體之間傳送數據

在Provider用戶控件裏放置一個TextBox，並輸入如下後置代碼

public partial class ProviderWebPart : System.Web.UI.UserControl, ITextToPass

{

[ConnectionProvider("TextToPass", "TextProvider")]

public ITextToPass GetTextTransferInterface()

{

return ((ITextToPass)(this));

}

public string GetText()

{

return TextBox1.Text;

}

你可以看到它實現了我們剛剛創建的ITextToPass接口。通過使用這個接口，我們可以返回用戶輸入的文本並傳遞給Consumer用戶控件。

下一步在Consumer用戶控件裏放置一個Label，並在.cs文件裏添加如下代碼

[ConnectionConsumer("Text", "TextConsumer")]

public void GetTextTransferInterface(ITextToPass provider)

{

Label1.Text = provider.GetText();

}

現在選擇WebPartManager的Connection mode，我們就可以在webpart的菜單上看到“連接”選項

當我們單擊了webpart菜單的“連接”的時候，會看到如下圖所示的情況

單擊“創建提供者連接”，你會看到如下所示。然後從DropDownList裏選擇“Consumer”選項。

一旦創建完連接，就允許你在“Provider”中輸入文本，如下圖所示

單擊按鈕後“Consumer”的Label控件就會顯示你輸入的值

通過這種方法我們就可以在webpart之間傳輸數據。

保存頁面狀態
在運行我們的項目之前，有一個問題就是如何保存不同用戶的不同頁面狀態呢？爲了保存用戶對頁的修改，我們就需要把這些設置保存到數據庫裏。在我的例子中使用到了註冊和登錄控件。

首先你要在你的web.config設置驗證模式爲“Forms”。然後在你的項目中新建一個webform並取名爲Login.aspx。拖拽一個Login控件到頁上，設置它的DestinationPageUrl屬性爲Default.aspx。在你的項目中再新建另一個webform，取名爲Signup.aspx，拖拽一個CreateUserWizard控件在此頁上。如此用戶就可以註冊和登錄了。另外你還要確保SqlExpress服務正在運行中。我們使用asp.net自動在App_Data文件夾內創建的ASPNETDB.mdf爲默認數據庫。這個數據庫已經提供了保存不同用戶的不用頁設置的相關表和存儲過程。其在Visual Studio環境中的截圖出示如下

“PersonalizationPerUser”表就用於保存每個用戶的不用頁設置狀態。它將一個序列化的值保存到PageSettings字段裏。幸運的是我們不用接觸這個表，因爲asp.net 2.0給我們提供了必需的API

創建數據庫
爲了創建一個數據庫來保存我們的頁設置狀態，需要運行“aspnet_regsql.exe”工具。這個工具在本地的/Windows/Framework/v2.0.50727文件夾裏。它可以幫助我們創建所需的表和存儲過程。該工具嚮導的截屏如下

該工具會創建如下這些表

最後我們要做的工作就是在web.config裏做一些配置。下面將告訴你如何做，基本上就是要確保啓動Membership和Profile特性。請注意其中的<Clear />標籤，它將移除machine.config中的相應標籤。我們還要增加一個連接字符串以指向我們的數據庫，我把它命名爲“Database1”