ASP.NET 實現聯動下拉列表（學年-學期-分院-教師）並自動生成表格

需求分析

需要建立一組四級聯動的 DropDownList 控制項：學年 → 學期 → 分院 → 教師。當使用者選擇完最後一級「教師」後，自動觸發事件生成對應的資料表格，且不需整頁重新整理（Postback）以提升效能。

核心實現思路

1. 資料繫結順序： Page_Load 中判斷 !IsPostBack，僅繫結第一級（學年）。
2. SelectedIndexChanged 事件鏈： 每一級 DropDownList 設定 AutoPostBack="true"，在伺服器端事件中根據選值查詢資料庫，繫結下一級並清空後續級別。
3. 最終觸發機制： 最後一級（教師）的 SelectedIndexChanged 事件中呼叫繫結 GridView/Repeater 的方法，或使用 UpdatePanel 實現局部更新。

關鍵程式碼範例 (C#)

前端 .aspx

<asp:DropDownList ID="ddlYear" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlYear_SelectedIndexChanged"></asp:DropDownList>
<asp:DropDownList ID="ddlTerm" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlTerm_SelectedIndexChanged" Enabled="false"></asp:DropDownList>
<asp:DropDownList ID="ddlDept" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlDept_SelectedIndexChanged" Enabled="false"></asp:DropDownList>
<asp:DropDownList ID="ddlTeacher" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlTeacher_SelectedIndexChanged" Enabled="false"></asp:DropDownList>

<asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="true"></asp:GridView>

後端 .aspx.cs 邏輯

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        BindYears(); // 初始化學年
    }
}

private void BindYears() {
    // 查詢資料庫獲取學年列表
    ddlYear.DataSource = GetYears(); 
    ddlYear.DataBind();
    ddlYear.Items.Insert(0, new ListItem("--請選擇學年--", ""));
}

// 學年變更 -> 繫結學期
protected void ddlYear_SelectedIndexChanged(object sender, EventArgs e) {
    ddlTerm.Enabled = !string.IsNullOrEmpty(ddlYear.SelectedValue);
    if (ddlTerm.Enabled) {
        ddlTerm.DataSource = GetTerms(ddlYear.SelectedValue);
        ddlTerm.DataBind();
        ddlTerm.Items.Insert(0, new ListItem("--請選擇學期--", ""));
    }
    ClearLowerLevels(ddlTerm);
}

// 學期變更 -> 繫結分院
protected void ddlTerm_SelectedIndexChanged(object sender, EventArgs e) {
    ddlDept.Enabled = !string.IsNullOrEmpty(ddlTerm.SelectedValue);
    if (ddlDept.Enabled) {
        ddlDept.DataSource = GetDepts(ddlYear.SelectedValue, ddlTerm.SelectedValue);
        ddlDept.DataBind();
        ddlDept.Items.Insert(0, new ListItem("--請選擇分院--", ""));
    }
    ClearLowerLevels(ddlDept);
}

// 分院變更 -> 繫結教師
protected void ddlDept_SelectedIndexChanged(object sender, EventArgs e) {
    ddlTeacher.Enabled = !string.IsNullOrEmpty(ddlDept.SelectedValue);
    if (ddlTeacher.Enabled) {
        ddlTeacher.DataSource = GetTeachers(ddlDept.SelectedValue);
        ddlTeacher.DataBind();
        ddlTeacher.Items.Insert(0, new ListItem("--請選擇教師--", ""));
    }
    ClearLowerLevels(ddlTeacher);
}

// 教師選定 -> 生成表格 (核心需求)
protected void ddlTeacher_SelectedIndexChanged(object sender, EventArgs e) {
    if (!string.IsNullOrEmpty(ddlTeacher.SelectedValue)) {
        BindResultGrid(ddlTeacher.SelectedValue);
    } else {
        gvResult.DataSource = null;
        gvResult.DataBind();
    }
}

private void BindResultGrid(string teacherId) {
    // 根據教師ID查詢詳細數據
    gvResult.DataSource = GetTeacherSchedule(teacherId);
    gvResult.DataBind();
}

// 輔助方法：清空並禁用後續下拉框
private void ClearLowerLevels(DropDownList current) {
    // 這裡需根據實際控制項ID鏈式清空
    // 例如 current 為 ddlTerm 時，清空 ddlDept, ddlTeacher
}

進階優化：使用 UpdatePanel 減少閃爍

將所有 DropDownList 和 GridView 包裹在 <asp:UpdatePanel> 中，可實現無刷新的局部回傳，大幅提升使用者體驗，避免整頁重載造成的效能消耗。

總結

透過 AutoPostBack 事件鏈實現多級聯動，最終在教師選擇事件中繫結數據表格。搭配 UpdatePanel 可達到「不改變教師選擇下減少重新刷新 table 造成的效能消耗」的最佳效果。