使用Html.DropDownListFor实现分页时绑定失效问题求助

使用Html.DropDownListFor实现分页功能时，下拉框选择25/50/100后，ViewModel的SelectedPageOption始终保持默认值25，无法传递选中值到控制器，导致页面始终加载25行数据。已尝试将SelectedPageOption改为int类型、取消ViewModel单例模式，均无效。下拉框默认值显示正常，但反向绑定失效。

代码示例 #

ViewModel代码 #

public IEnumerable<SelectListItem> DisplayPageOptions { get; set; }
public string SelectedPageOption { get; set; }
            
private static SelectListItem item1 = new SelectListItem() { Text = "25", Value = "25" };
private static SelectListItem item2 = new SelectListItem() { Text = "50", Value = "50" };
private static SelectListItem item3 = new SelectListItem() { Text = "100", Value = "100" };
public SelectList selectList = new SelectList(new[] { item1, item2, item3 }, "Value", "Text", item1);

Razor视图代码 #

@Html.DropDownListFor(m => m.SelectedPageOption, Model.DisplayPageOptions, "Pages to display", new { onchange = @"submit()" })

控制器代码（异步方法） #

SymbolViewModel vm = SymbolViewModel.Instance;
if (vm.SelectedPageOption == null)
{
    vm.SelectedPageOption = "25";
}
vm.DisplayPageOptions = vm.selectList;
SymbolDataService service = new();
vm.Load(service);
return View(vm);

解决方案 #

1. 移除静态SelectList实例，动态创建分页选项 #

静态SelectList会导致状态残留，每次请求复用同一个实例，无法正确更新选中值。修改ViewModel，改用方法动态生成选项：

public IEnumerable<SelectListItem> DisplayPageOptions { get; set; }
public string SelectedPageOption { get; set; }

// 动态生成分页选项，避免静态实例残留
public static IEnumerable<SelectListItem> GetPageOptions()
{
    return new List<SelectListItem>
    {
        new SelectListItem { Text = "25", Value = "25" },
        new SelectListItem { Text = "50", Value = "50" },
        new SelectListItem { Text = "100", Value = "100" }
    };
}

2. 取消ViewModel单例，每次请求新建实例 #

单例模式会保留之前的请求状态，无法接收新的提交值。控制器中每次请求都创建新的ViewModel实例：

public async Task<IActionResult> YourActionName(string selectedPageOption)
{
    // 新建ViewModel实例，不再使用单例
    SymbolViewModel vm = new SymbolViewModel();
    // 接收提交的选中值，默认25
    vm.SelectedPageOption = string.IsNullOrEmpty(selectedPageOption) ? "25" : selectedPageOption;
    // 动态加载分页选项
    vm.DisplayPageOptions = SymbolViewModel.GetPageOptions();
    
    SymbolDataService service = new();
    // 根据SelectedPageOption加载对应行数的数据
    vm.Load(service);
    return View(vm);
}

3. 确保下拉框在表单内，正确提交表单 #

submit()需要在表单上下文执行，否则无法传递参数。修改视图，将下拉框包裹在表单中：

<form method="get" asp-action="YourActionName">
    @Html.DropDownListFor(m => m.SelectedPageOption, Model.DisplayPageOptions, "Pages to display", new { onchange = "this.form.submit();" })
</form>

4. 检查ModelState绑定状态 #

如果仍有问题，在控制器中检查ModelState.IsValid，排查是否存在绑定错误：

if (!ModelState.IsValid)
{
    // 输出绑定错误信息排查问题
    var errors = ModelState.SelectMany(x => x.Value.Errors.Select(e => e.ErrorMessage));
    // 处理错误逻辑
}

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