ASP.NET DropDownList 聯動 Label 即時更新的兩種實作

場景

DropDownList 綁定學生姓名，選擇不同姓名時，Label 即時顯示對應資料（如學號、班級）。

方案一：AutoPostBack + 伺服端事件（傳統 WebForms）

<asp:DropDownList ID="ddlStudent" runat="server" AutoPostBack="true"
    OnSelectedIndexChanged="ddlStudent_SelectedIndexChanged"></asp:DropDownList>
<asp:Label ID="lblInfo" runat="server"></asp:Label>

protected void ddlStudent_SelectedIndexChanged(object sender, EventArgs e) {
    string name = ddlStudent.SelectedValue;
    // 查詢資料庫或快取
    var info = GetStudentInfo(name);
    lblInfo.Text = $"{info.Id} - {info.Class}";
}

優點：程式碼在伺服端，安全、易除錯。缺點：每次切換觸發完整 PostBack，頁面閃爍、體驗較差。

方案二：jQuery AJAX / 前端綁定（推薦，無刷新）

<asp:DropDownList ID="ddlStudent" runat="server" ClientIDMode="Static"></asp:DropDownList>
<span id="lblInfo"></span>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
$('#ddlStudent').on('change', function() {
    var name = $(this).val();
    $.get('api/student/' + encodeURIComponent(name), function(data) {
        $('#lblInfo').text(data.id + ' - ' + data.className);
    });
});
</script>

後端提供 Web API：[HttpGet("api/student/{name}")] public StudentDto Get(string name)。
優點：無刷新、回應快、前後端分離。缺點：需額外寫 API、處理 CORS/驗證。

方案三：純前端資料嵌入（資料量小、無敏感資訊）

<script>
var studentMap = {
    '小明': { id: '001', class: 'A班' },
    '小華': { id: '002', class: 'B班' }
};
$('#ddlStudent').on('change', function() {
    var info = studentMap[$(this).val()];
    if (info) $('#lblInfo').text(info.id + ' - ' + info.class);
});
</script>

將資料序列化為 JSON 嵌入頁面，完全離線運作，效能最佳。

選擇建議

現代 ASP.NET 專案建議採用方案二，配合 ASP.NET Core Web API 或 ASP.NET Web API 2，體驗與架構皆優。