ASP.NET Core动态视图保存问题：下拉框提交后重置默认值

嘿，我刚帮几个开发者搞定过一模一样的问题，咱们一步步来解决它！

这个问题的核心是：表单提交后，咱们没有把用户之前选择的下拉框值重新传递回视图，导致下拉框回到默认选项，连带文本框类型也跟着重置了。下面是具体的解决步骤：

1. 完善你的ViewModel #

首先要确保ViewModel里同时包含下拉框的选中值和下拉框选项列表两个属性，这样提交后能把用户的选择状态带回视图：

public class UserQueryViewModel
{
    // 存储用户选中的输入类型（比如"Id"、"Email"、"Phone"）
    public string SelectedInputType { get; set; } = "Id"; // 默认值和下拉框默认选项一致

    // 下拉框的选项集合
    public IEnumerable<SelectListItem> InputTypeOptions { get; set; } = new List<SelectListItem>
    {
        new SelectListItem { Value = "Id", Text = "按ID查询" },
        new SelectListItem { Value = "Email", Text = "按邮箱查询" },
        new SelectListItem { Value = "Phone", Text = "按手机号查询" }
    };

    // 用户输入的查询值
    public string QueryValue { get; set; }

    // 查询到的用户数据（用于返回视图展示）
    public UserData? FoundUser { get; set; }
}

2. 修正Controller的POST方法 #

在处理表单提交的POST方法里，必须保留用户选中的SelectedInputType值，并且确保下拉框选项列表没有被清空，最后把完整的ViewModel传递回视图：

[HttpPost]
public IActionResult QueryUser(UserQueryViewModel model)
{
    if (ModelState.IsValid)
    {
        // 这里写你的查询逻辑，根据选中类型和输入值获取用户数据
        model.FoundUser = _userService.GetUserByType(model.SelectedInputType, model.QueryValue);
    }

    // 关键！重新填充下拉框选项（如果是动态生成的，这里要重新获取；固定选项也可以直接赋值）
    model.InputTypeOptions = new List<SelectListItem>
    {
        new SelectListItem { Value = "Id", Text = "按ID查询" },
        new SelectListItem { Value = "Email", Text = "按邮箱查询" },
        new SelectListItem { Value = "Phone", Text = "按手机号查询" }
    };

    // 返回带ViewModel的视图，下拉框会自动绑定选中状态
    return View(model);
}

3. 视图里正确绑定并处理动态文本框 #

在Razor视图里，用asp-for绑定下拉框的选中值，asp-items绑定选项列表，同时用JavaScript监听下拉框变化切换文本框类型，页面加载时也要根据当前选中值初始化文本框类型：

@model UserQueryViewModel

<form method="post">
    <!-- 下拉框绑定 -->
    <div class="form-group">
        <label>查询类型</label>
        <select asp-for="SelectedInputType" asp-items="Model.InputTypeOptions" class="form-control" id="inputTypeSelect">
            <option value="">请选择查询类型</option>
        </select>
    </div>

    <!-- 动态文本框 -->
    <div class="form-group">
        <label>查询值</label>
        <input asp-for="QueryValue" type="text" class="form-control" id="queryInput">
    </div>

    <button type="submit" class="btn btn-primary">查询</button>
</form>

<!-- 查询结果展示 -->
@if (Model.FoundUser != null)
{
    <div class="mt-3">
        <h4>查询结果</h4>
        <p>ID: @Model.FoundUser.Id</p>
        <p>邮箱: @Model.FoundUser.Email</p>
        <p>手机号: @Model.FoundUser.Phone</p>
    </div>
}

<script>
    // 页面加载时初始化文本框类型
    document.addEventListener('DOMContentLoaded', function() {
        updateInputType();
    });

    // 下拉框变化时切换文本框类型
    document.getElementById('inputTypeSelect').addEventListener('change', function() {
        updateInputType();
    });

    function updateInputType() {
        const selectedType = document.getElementById('inputTypeSelect').value;
        const queryInput = document.getElementById('queryInput');
        
        switch(selectedType) {
            case 'Id':
                queryInput.type = 'number'; // ID用数字类型输入框
                break;
            case 'Email':
                queryInput.type = 'email'; // 邮箱类型自带格式验证
                break;
            case 'Phone':
                queryInput.type = 'tel'; // 手机号专用输入类型
                break;
            default:
                queryInput.type = 'text';
        }
    }
</script>

4. 额外注意点 #

• 如果下拉框选项是从数据库/配置动态获取的，记得在POST方法里重新查询一次，不要让选项列表为空。
• 即使ModelState有验证错误（比如邮箱格式不对），SelectedInputType依然会保留用户的选择，因为ASP.NET Core会自动从表单提交数据里绑定这个值，只要你返回视图时传递了完整的ViewModel。

这样处理后，表单提交后下拉框就会保持用户之前选择的选项，对应的文本框类型也会正确显示，同时查询值和结果也能正常展示啦！

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