ASP.NET 使用者控件 實作省市區三級聯動下拉選單

ASCX 使用者控件封裝優勢

將可重用的 UI 邏輯封裝為 .ascx，提升開發效率與維護性。以省市區三級聯動為例：

前端標籤結構

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <asp:DropDownList ID="ddlProvince" runat="server" Width="100px" 
          AutoPostBack="True" OnSelectedIndexChanged="ddlProvince_SelectedIndexChanged" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
        <ContentTemplate>
          <asp:DropDownList ID="ddlCity" runat="server" Width="100px" 
              AutoPostBack="True" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged" />
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="ddlProvince" EventName="SelectedIndexChanged" />
        </Triggers>
      </asp:UpdatePanel>
      <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline">
        <ContentTemplate>
          <asp:DropDownList ID="ddlDistrict" runat="server" Width="100px" />
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="ddlCity" EventName="SelectedIndexChanged" />
        </Triggers>
      </asp:UpdatePanel>
    </td>
  </tr>
</table>

後端邏輯要點

• 省份變更觸發 ddlProvince_SelectedIndexChanged，重新綁定城市列表。
• 城市變更觸發 ddlCity_SelectedIndexChanged，重新綁定區縣列表。
• 使用 UpdatePanel 實現局部異步回發，避免整頁重整。
• 控件對外暴露 SelectedProvince、SelectedCity、SelectedDistrict 屬性供父頁面取值。

此模式適用於所有層級聯動場景，體現「封裝變化、複用邏輯」的控件開發思想。