asp.net 2.0教程 Web組件WebPart

尊重作者，請保留 www.it55.com 連結字樣。

用過baidu空間或者msn的朋友可能為其網站強大的個人化定製功能而耳目一新。其實這些東西並不神秘，在asp.net 2.0中依靠WebParts的靈活功能,我們也可以輕鬆實現同樣的功能。
WebPart是vs2005的新控制項,它的作用是可以使使用者在頁面上進行控制項的拖放,調整位置內容,對控制項進行增加,刪除,修改等操作.和上節一樣，WebParts依然需要SQL Server 2005 Express版本支援。
下面我們來建立一個簡單的WebPart執行個體,Let's Go!
首先將左側工具列"WebParts" 工具列表中的"WebPartManager"空間拖曳至網頁中:

WebPartManager是一個WebPart的管理控制中心,通過它可以對WebPart的模式進行調整和操作,包括WebPart之間的通訊.所以必須首先添加WebPartManager到頁面中.WebPartManager在頁面運行後不會在前台佔用任何位置,他是隱藏的,雖然在設計模式下他是看得見的.
這裡需要說說WebPartManager的五種模式(DisplayMode):
(1)BrowseDisplayMode:瀏覽器模式，是預設值．使用者只能看不能對Web Part進行操作．
(2)EditDisplayMode:編輯模式．此模式的運行需要一個EditorZone，然後在EditorZone裡可以放AppearanceEditorPart，BehaviorEditorPart，LayoutEditorPart，PropertyGridEditorPart這些控制項，他們就是對Web Part進行編輯的控制項，可以對Web Part的行為，外觀等進行編輯．
(3)DesignDisplayMode：設計模式．在此模式下，使用者就可以對控制項的位置進行拖放了(在開始定義好的WebPartZone裡)
(4)CatalogDisplayMode：目錄模式．此模式的運行需要一個CatalogZone,CatalogZone有一個模版列，這個模版列裡可以放開發人員預先定義好的控制項，在HTML模式下在次模列裡的控制項加Title="需要顯示的目錄",然後使用者就可以把在CatalogZone裡的控制項放到WebPartZone裡.
(5)ConnectDisplayMode:通訊模式.此模式可以讓Web Part進行通訊.可以有兩種通訊,靜態和動態.需要設定好提供者和監聽者.
然後再拖曳2個WebPartZone控制項到頁面中:

WebPartZone是一個存放WebPart控制項容器,有了它之後我們才能在頁面中放置WebPart控制項.
接著我們在WebPart控制項1中放置一個Calendar日曆控制項(在工具列"標準"工具列表中),系統自動將其封裝為WebPart控制項,這也就是我們網站的內容部分了.當然這裡還可以放置伺服器控制項\使用者自訂控制項\Web自訂控制項等:

上面說了，WebPartZone是一個存放WebPart控制項容器，那麼WebPart編輯時的設定框應該放在哪個容器裡呢？答案是EditorZone。
EditorZone是個容器，本身只提供存放地區，所以我們還需要向EditorZone裡面添加AppearanceEditorPart、BehaviorEditorPart、LayoutEditorPart、PropertyGridEditorPart這些控制項中的一個或多個。他們就是對Web Part進行編輯的控制項，可以對Web Part的行為，外觀等進行編輯．這裡不做細講。
先拖曳進來一個EditorZone，然後向EditorZone中添加一個AppearanceEditorPart：

同理我們還需要一個CatalogZone控制項來顯示和管理頁面中的控制項列表。CatalogZone控制項也是一個容器，所以我們還需要向它裡面添加DeclarativeCatalogPart、PageCatalogPart、ImportCatalogPart控制項中的至少一個.
這裡我們添加一個PageCatalogPart控制項到CatalogZone控制項中:

PageCatalogPart控制項將以列表顯示當前頁面剩餘的可用WebPart控制項並允許將其添加至頁面中.
因為本例中只有1個WebPart控制項,所以不存在WebPart控制項之間的通訊問題,所以WebPartManager的ConnectDisplayMode模式本文就不涉及了.
最後我們需要做一個下拉式功能表,方便我們選擇WebPartManager的幾種模式,以便查看以上各種控制項的應用方式.
在工具列"標準"工具列表中將DropDownList控制項添加至頁面,並為其添加4個Item項,分別對應WebPartManager的4種模式:

 

DropDownList控制項後台事件方法如下:

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        switch (DropDownList1.SelectedValue)
        {
            case "Browse":
                this.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
                break;
            case "Edit":
                this.WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
                break;
            case "Design":
                this.WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;#p#分網頁標題#e#
                break;
            case "Catalog":
                this.WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
                break;
            case "Connect":
                this.WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;
                break;
        }
    }

至此,我們的WebPart之旅就結束了,下面.aspx頁面的部分代碼:

 

    <form id="form1" runat="server">
    <div>
        <asp:WebPartManager ID="WebPartManager1" runat="server">
        </asp:WebPartManager>
   
    </div>
        <asp:WebPartZone ID="WebPartZone1" runat="server">
            <ZoneTemplate>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
            </ZoneTemplate>
        </asp:WebPartZone>
        WebPartZone1
        <br />
        <br />
        <asp:WebPartZone ID="WebPartZone2" runat="server">
        </asp:WebPartZone>
        WebPartZone2&nbsp;<br />
        <br />
        <asp:EditorZone ID="EditorZone1" runat="server">
            <ZoneTemplate>
                <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
            </ZoneTemplate>
        </asp:EditorZone>
        <br />
        <asp:CatalogZone ID="CatalogZone1" runat="server">
            <ZoneTemplate>
                <asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
            </ZoneTemplate>
        </asp:CatalogZone>
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem>Browse</asp:ListItem>
            <asp:ListItem>Edit</asp:ListItem>
            <asp:ListItem>Design</asp:ListItem>
            <asp:ListItem>Catalog</asp:ListItem>
        </asp:DropDownList>
       
    </form>

完整項目原始碼打包：
upload/2007_05/07051600539435.rar

以下是部分運行效果:

 

#p#分網頁標題#e#
 


 

 

通過本節的演練，大家已經感覺到asp.net 2.0的強大了吧？強大的還在後邊呢，嘿嘿。下節學習：成員資格和角色管理