首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 2.0 WebPart 系列控制項入門:WebPartManager、WebPartZone、個人化佈局完整實作指南

     編輯:關於ASP.NET

ASP.NET 2.0 WebPart 架構賦予使用者自訂網頁版面配置的能力:拖曳區域、最小化/關閉/還原區塊、編輯屬性、連接部件間資料流。本文介紹核心控制項 WebPartManager、WebPartZone、WebPart 基礎用法與簡易範例。

核心控制項介紹

控制項角色關鍵特性
WebPartManager頁面級單一實例,管理所有 WebPart 生命週期、個人化狀態、連接、顯示模式DisplayMode:Browse/Design/Edit/Catalog/Connect
WebPartZone版面區域容器,定義 WebPart 可放置區域,提供區域層級佈局控制Layout:Vertical/Horizontal,ZoneTemplate 內容模板
WebPart (基底)可個人化的內容單元,標準屬性:Title、ChromeState、ChromeType、Description、Icon繼承自 Panel,支援任意子控制項
GenericWebPart自動包裝普通控制項(如 Calendar、GridView)成為 WebPart動態建立,Title 屬性自動對應

簡易範例:三欄可拖曳版面

頁面標記

<asp:WebPartManager ID="WebPartManager1" runat="server" />

<table><tr>
  <td><asp:WebPartZone ID="WebPartZone1" runat="server" HeaderText="左欄"></asp:WebPartZone></td>
  <td><asp:WebPartZone ID="WebPartZone2" runat="server" HeaderText="中欄"></asp:WebPartZone></td>
  <td><asp:WebPartZone ID="WebPartZone3" runat="server" HeaderText="右欄"></asp:WebPartZone></td>
</tr></table>

加入內容:行事曆控制項

  1. 拖曳 Calendar 至 WebPartZone1 內部。
  2. 切換原始碼檢視,設定 Title="今天的日期"(GenericWebPart 自動產生的屬性)。
  3. 選擇行事曆「自動格式化」套用樣式。

執行效果

瀏覽模式下,各區域右上角顯示「最小化」「關閉」「還原」動詞按鈕。使用者可拖曳區域標題列移動 WebPart 位置(跨區域)。

顯示模式與個人化

模式用途啟用方式
BrowseDisplayMode一般瀏覽,可最小化/關閉/移動預設
DesignDisplayMode拖曳移動 WebPart 位置WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode
EditDisplayMode編輯 WebPart 屬性(標題、外觀等)需 EditorZone + AppearanceEditorPart 等
CatalogDisplayMode從目錄加入新 WebPart需 CatalogZone + PageCatalogPart/DeclarativeCatalogPart
ConnectDisplayMode建立 WebPart 間連接需 ConnectionsZone

個人化儲存設定

<webParts>
  <personalization defaultProvider="SqlPersonalizationProvider">
    <providers>
      <add name="SqlPersonalizationProvider"
           type="System.Web.UI.WebControls.WebParts.SqlPersonalizationProvider"
           connectionStringName="LocalSqlServer"
           applicationName="/MyApp" />
    </providers>
    <authorization>
      <allow verbs="enterSharedScope" users="Admin" />
      <allow verbs="modifyState" users="*" />
    </authorization>
  </personalization>
</webParts>
  • 預設使用 SqlPersonalizationProvider 儲存於 SQL Express aspnetdb.mdf。
  • 可改用自訂 Provider 儲存於 Oracle、XML、雲端儲存等。

進階:宣告式 WebPart 定義

<asp:WebPartZone ID="Zone1" runat="server">
  <ZoneTemplate>
    <asp:Calendar ID="Cal1" runat="server" Title="行事曆" />
    <asp:GridView ID="GvNews" runat="server" Title="最新消息" DataSourceID="sdsNews" />
  </ZoneTemplate>
</asp:WebPartZone>

設計時放入 ZoneTemplate 的控制項執行時自動包裝為 GenericWebPart。

最佳實務建議

  • 每頁僅一個 WebPartManager,置於 <form> 內最上層。
  • WebPartZone 建議使用 CSS 版面(display: flex 或 grid)替代表格。
  • 生產環境必須設定 personalization Provider,預設檔案系統 Provider 不支援多伺服器陣列。
  • 結合 EditorZone 讓使用者自訂 WebPart 標題、圖示、說明等屬性。
  • 大型入口網站採用 DeclarativeCatalogPart 定義可用 WebPart 清單,PageCatalogPart 管理已關閉 WebPart 回收筒。

WebPart 架構將「門戶個人化」從複雜客製開發轉為標準控制項組合,大幅降低企業入口網站建置門檻。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved