ASP.NET MVC 三級聯動下拉選單：AJAX 級聯綁定車型、年代、款式、顏色

需求：選擇「車型」→ 異步載入「年代」→ 選擇「年代」→ 載入「款式」→ 選擇「款式」→ 載入「顏色」。典型三級聯動場景。

後端 Controller 設計

public class CarController : Controller {
    // 1. 獲取車型列表 (頁面初始載入)
    public ActionResult GetModels() {
        var list = db.CarModels.Select(m => new { id = m.Id, name = m.Name }).ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }
    // 2. 根據車型獲取年代
    public ActionResult GetYears(int modelId) {
        var list = db.CarYears.Where(y => y.ModelId == modelId)
                              .Select(y => new { id = y.Id, name = y.Year }).ToList();
        return Json(list);
    }
    // 3. 根據年代獲取款式
    public ActionResult GetStyles(int yearId) { ... }
    // 4. 根據款式獲取顏色
    public ActionResult GetColors(int styleId) { ... }
}

前端 View (Razor + jQuery)

<select id="ddlModel"><option value="">--請選擇車型--</option></select>
<select id="ddlYear" disabled><option value="">--請選擇年代--</option></select>
<select id="ddlStyle" disabled><option value="">--請選擇款式--</option></select>
<select id="ddlColor" disabled><option value="">--請選擇顏色--</option></select>

<script>
$(function() {
    // 初始載入車型
    $.getJSON('/Car/GetModels', function(data) {
        $('#ddlModel').append($.map(data, function(item) {
            return $('').val(item.id).text(item.name);
        }));
    });

    // 通用聯動函數
    function cascade(sourceSelector, targetSelector, url, paramName) {
        $(sourceSelector).change(function() {
            var val = $(this).val();
            var $target = $(targetSelector);
            $target.empty().append('--請選擇--').prop('disabled', !val);
            if (!val) return;
            $.getJSON(url, { [paramName]: val }, function(data) {
                $.each(data, function(i, item) {
                    $target.append($('').val(item.id).text(item.name));
                });
            });
        });
    }

    // 綁定三級聯動
    cascade('#ddlModel', '#ddlYear', '/Car/GetYears', 'modelId');
    cascade('#ddlYear', '#ddlStyle', '/Car/GetStyles', 'yearId');
    cascade('#ddlStyle', '#ddlColor', '/Car/GetColors', 'styleId');
});
</script>

關鍵優化點

• 通用 cascade 函數：消除重複代碼，參數化 URL、參數名、選擇器。
• 狀態管理：選擇上級時清空下級、禁用下級、顯示「請選擇」。
• 錯誤處理：.fail() 提示用戶、記錄日志。
• 緩存：車型列表可 OutputCache 或前端 localStorage 緩存。

此模式清晰實現 MVC 三級聯動，代碼可維護、擴展性強 (增減級別只需增減 cascade 調用)。