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

ASP.NET 2.0 Web Parts 完整入門:區域佈局、模式切換、個人化客製化

     編輯:關於ASP.NET

ASP.NET 2.0 將 SharePoint 成熟的 Web Parts 架構引入標準 ASP.NET,提供網頁區域劃分、拖曳佈局、編輯/目錄/連線模式、使用者個人化儲存等功能。本文系統介紹核心控制項、頁面結構、模式切換與實作範例。

核心概念:頁面區域劃分

Web Parts 頁面由 區域 組成,每個區域可包含一或多個 WebPart 控制項。使用者可在執行時拖曳調整位置、隱藏/最大化/編輯屬性,設定自動儲存至個人化資料庫(預設 SQL Express)。

核心控制項階層

控制項層級功能可見性
WebPartManager最上層(每頁僅一個)管理個人化狀態、協調 WebParts 與區域通訊、模式切換不可見
WebPartZone區域容器承載 WebPart 控制項,定義版面區域(可多個)可見(設計時)
WebPart / 任意 Server Control內容單元實際功能單元(GridView、Calendar、自訂 UserControl)可見
CatalogZone目錄區域「目錄模式」顯示,讓使用者從預定清單新增 WebPart僅目錄模式可見
ConnectionZone連線區域「連線模式」顯示,建立 WebPart 間資料傳遞(Provider/Consumer)僅連線模式可見
EditorZone編輯區域「編輯模式」顯示,編輯 WebPart 屬性(Appearance、Behavior、Custom)僅編輯模式可見

基本頁面結構範例

<%@ Page Language="C#" MasterPageFile="~/Site.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

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

<table style="width:100%;">
  <tr>
    <td style="width:70%;">
      <asp:WebPartZone ID="MainZone" runat="server" HeaderText="主要區域">
        <ZoneTemplate>
          <asp:Calendar ID="Calendar1" runat="server" Title="行事曆" />
          <asp:BulletedList ID="BulletList1" runat="server" Title="待辦事項" 
              DisplayMode="HyperLink" DataSourceID="SqlDataSource1" DataTextField="Title" DataValueField="Url" />
        </ZoneTemplate>
      </asp:WebPartZone>
    </td>
    <td style="width:30%;">
      <asp:WebPartZone ID="SideZone" runat="server" HeaderText="側邊欄">
        <ZoneTemplate>
          <asp:LoginView ID="LoginView1" runat="server" Title="登入狀態" />
        </ZoneTemplate>
      </asp:WebPartZone>
    </td>
  </tr>
</table>

<!-- 模式切換 UI -->
<asp:DropDownList ID="ddlMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlMode_SelectedIndexChanged">
  <asp:ListItem Text="瀏覽模式" Value="Browse" />
  <asp:ListItem Text="設計模式" Value="Design" />
  <asp:ListItem Text="編輯模式" Value="Edit" />
  <asp:ListItem Text="目錄模式" Value="Catalog" />
  <asp:ListItem Text="連線模式" Value="Connect" />
</asp:DropDownList>

</asp:Content>

模式切換程式碼後置

protected void ddlMode_SelectedIndexChanged(object sender, EventArgs e)
{
    WebPartDisplayMode mode = WebPartManager1.SupportedDisplayModes
        .Cast<WebPartDisplayMode>()
        .FirstOrDefault(m => m.Name == ddlMode.SelectedValue);
    
    if (mode != null)
        WebPartManager1.DisplayMode = mode;
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        ddlMode.SelectedValue = WebPartManager1.DisplayMode.Name;
}

五種顯示模式詳細說明

  1. 瀏覽模式:預設,使用者僅能最小化/關閉/還原 WebPart,無法移動位置。
  2. 設計模式:允許拖曳 WebPart 在區域間移動,標題列顯示移動控制桿。
  3. 編輯模式:設計模式擴充,顯示 EditorZone 中的編輯控制項(AppearanceEditorPart、LayoutEditorPart、PropertyGridEditorPart、自訂 EditorPart)。
  4. 目錄模式:顯示 CatalogZone,使用者可從 DeclarativeCatalogPart、PageCatalogPart、ImportCatalogPart 選擇新增 WebPart。
  5. 連線模式:顯示 ConnectionZone,建立 Provider(資料來源)與 Consumer(資料消費者)WebPart 間連線,實現主從聯動。

個人化儲存設定

<system.web>
  <webParts>
    <personalization defaultProvider="SqlPersonalizationProvider">
      <providers>
        <add name="SqlPersonalizationProvider"
             type="System.Web.UI.WebControls.WebParts.SqlPersonalizationProvider"
             connectionStringName="LocalSqlServer" />
      </providers>
      <authorization>
        <allow users="*" verbs="enterSharedScope" /> <!-- 允許匿名用戶進入共享範圍 -->
        <allow users="*" verbs="modifyState" />       <!-- 允許修改個人化狀態 -->
      </authorization>
    </personalization>
  </webParts>
</system.web>

建立自訂 WebPart 控制項

using System.Web.UI.WebControls.WebParts;

public class MyCustomWebPart : WebPart
{
    [Personalizable(PersonalizationScope.User)]
    [WebBrowsable(true)]
    [WebDisplayName("顯示筆數")]
    [WebDescription("設定列表顯示幾筆資料")]
    public int DisplayCount { get; set; } = 10;

    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write($"
顯示前 {DisplayCount} 筆資料...
"); // 實際資料繫結邏輯 } }

註冊至頁面:<%@ Register TagPrefix="custom" Namespace="MyControls" Assembly="MyAssembly" %>,再放入 ZoneTemplate。

靜態連線與動態連線

  • 靜態連線:在宣告式標記中定義 <asp:WebPartConnection>,編譯期決定,效能佳。
  • 動態連線:執行時透過 ConnectionZone 由使用者建立,彈性高。

遷移至 ASP.NET Core 建議

ASP.NET Core 無內建 Web Parts。現代替代方案:

  • Blazor 組件:可拖曳、狀態保留、元件化程度高。
  • JavaScript Widget Library:如 GridStack.js、Vue Grid Layout、React Grid Layout 實現儀表板拖曳。
  • SignalR + Client-side State:即時同步多使用者佈局變更。

結語

Web Parts 是 ASP.NET 2.0 時代極具野心的功能,雖未如 SharePoint 般普及,但其「區域化佈局、模式化操作、個人化持久化」設計思想深影響後來的入口網站、儀表板開發框架。維護舊專案時理解其生命週期與個人化提供者機制至關重要。

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