MVC网站提交表单后保留分类下拉框选中值的问题求助

问题根源 #

提交表单后页面回发，服务器返回的视图中分类下拉框会重置为初始状态（仅默认选项），且未自动恢复之前选中的部门和分类值；同时切换部门时需清空旧选项避免重复添加，这两点需要结合后端传值和前端逻辑优化来解决。

步骤1：后端传递回发后的选中值 #

在处理搜索请求的Action中，将用户选中的部门ID和分类ID存入ViewBag，供视图回发后读取：

public ActionResult Search(int depId, int catId)
{
    // 执行你的搜索逻辑
    ViewBag.SelectedDepId = depId;
    ViewBag.SelectedCatId = catId;
    return View();
}

同时优化分类接口（去掉冗余的Join操作）：

public ActionResult FillDDLCategory(int depId)
{
    var categories = _context.Categories
        .Where(c => c.DepID == depId)
        .Select(c => new 
        {
            title = c.CategoryDescription,
            id = c.CatID
        });
    // MVC5及以下版本需添加JsonRequestBehavior.AllowGet，允许GET请求返回JSON
    return Json(categories, JsonRequestBehavior.AllowGet);
}

步骤2：视图中设置部门下拉框的回发选中状态 #

确保部门下拉框在回发后自动选中之前提交的部门：

<select id="departments" name="depId" class="form-control">
    @foreach(var dep in ViewBag.Departments)
    {
        <option value="@dep.DepID" @(ViewBag.SelectedDepId == dep.DepID ? "selected" : "")>@dep.DepartmentName</option>
    }
</select>

<div style="display:inline-block;">
    <select id="CatID" name="CatID" class="form-control col-lg-12">
        <option value="0">-Select a Category-</option>
    </select>
</div>

步骤3：优化前端JS逻辑，处理初始化和回发状态 #

封装分类加载逻辑，在页面初始化时自动根据后端传递的选中值恢复状态，同时保留清空旧选项的逻辑避免重复：

$(document).ready(function () {
    const $catDropdown = $("#CatID");
    const $deptDropdown = $("#departments");
    // 从后端获取回发后的选中值，无值则默认0
    const selectedDepId = @(ViewBag.SelectedDepId ?? 0);
    const selectedCatId = @(ViewBag.SelectedCatId ?? 0);

    // 页面初始化时的状态处理
    if (selectedDepId > 0) {
        $catDropdown.prop("disabled", false);
        loadCategories(selectedDepId, selectedCatId);
    } else {
        $catDropdown.prop("disabled", true);
        resetCatDropdown();
    }

    // 部门下拉框切换事件
    $deptDropdown.on("change", function () {
        const depId = $(this).val();
        if (depId > 0) {
            $catDropdown.prop("disabled", false);
            loadCategories(depId, 0);
        } else {
            $catDropdown.prop("disabled", true);
            resetCatDropdown();
        }
    });

    // 重置分类下拉框为初始状态
    function resetCatDropdown() {
        $catDropdown.empty().append('<option value="0" selected>-Select a Category-</option>');
    }

    // 加载分类并设置选中值的通用函数
    function loadCategories(depId, targetCatId) {
        $.ajax({
            url: '/Tickets/FillDDLCategory',
            type: "GET",
            dataType: "JSON",
            data: { depId: depId },
            success: function (categories) {
                $catDropdown.empty();
                $catDropdown.append('<option value="0">-Select a Category-</option>');
                
                // 遍历添加分类选项，自动选中目标值
                $.each(categories, function (_, item) {
                    const selectedAttr = item.id === targetCatId ? 'selected' : '';
                    $catDropdown.append(`<option value="${item.id}" ${selectedAttr}>${item.title}</option>`);
                });

                // 若没有指定选中值，默认选中第一个分类（可选）
                if (targetCatId === 0 && categories.length > 0) {
                    $catDropdown.find('option:eq(1)').prop('selected', true);
                }
            }
        });
    }
});

核心优化点 #

1. 封装loadCategories函数，避免重复代码，同时统一处理清空旧选项的逻辑
2. 页面初始化时读取后端传递的选中值，自动恢复分类下拉框的状态
3. 使用$.each替代for循环，代码更简洁易读
4. 保留empty()确保切换部门时不会重复添加旧分类

内容的提问来源于stack exchange，提问作者touinta