ASP.NET 伺服器端控制網頁可見度：Panel 與 LinkButton 實戰

ASP.NET WebForm 讓開發者以伺服器端物件操控網頁元素。本文示範使用 Panel 控制項包裹 HTML 區塊，搭配 LinkButton 切換可見度，實現條件式顯示/隱藏。

核心概念

• Panel：對應 <div>，Visible 屬性控制整個區塊輸出與否。
• LinkButton：外觀為超連結，實為伺服器端按鈕，觸發 Click 事件回傳。
• 狀態保持：ViewState 自動維護控制項屬性跨回傳不遺失。

步驟與程式碼

1. 設計檔 (.aspx)

<asp:Panel ID="TestPanel" runat="server" Width="398px" Height="171px" Visible="false">
    <h2>此區塊可動態顯示/隱藏</h2>
    <asp:DropDownList ID="ADropDownListBox" runat="server"></asp:DropDownList>
</asp:Panel>

<asp:LinkButton ID="ToggleLink" runat="server" Text="切換顯示" OnClick="ToggleLink_Click" />

2. 後端程式碼 (.aspx.cs)

protected void ToggleLink_Click(object sender, EventArgs e)
{
    TestPanel.Visible = !TestPanel.Visible;
    ToggleLink.Text = TestPanel.Visible ? "隱藏區塊" : "顯示區塊";
}

進階：依使用者角色控制

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        TestPanel.Visible = User.IsInRole("Admin");
    }
}

優缺點分析

現代替代方案

• UpdatePanel + Panel.Visible：局部更新，無整頁重整。
• jQuery/AJAX 呼叫 WebMethod 回傳 HTML 片段，客戶端替換 DOM。
• ASP.NET Core / Blazor：元件化、狀態管理更靈活。