MVC技术问题：如何根据DropDownList值生成表单并获取选中选项

嘿，从Web Form转MVC确实有不少小细节要适应，我来帮你搞定这个需求！

第一步：获取DropDownList的选中值 #

不管是要前端联动生成文本框，还是后端提交时获取值，都得先拿到选中的数字，这里分两种场景说：

1. 前端（JavaScript/jQuery）获取 #

如果你用jQuery（MVC项目通常会自带），可以这样写：

// 监听下拉框的change事件
$('#numOfPPl').on('change', function() {
    // 获取选中值
    var selectedNum = $(this).val();
    // 这里就可以根据selectedNum做后续的文本框生成逻辑了
    console.log('选中了：' + selectedNum);
});

如果用原生JS的话：

document.getElementById('numOfPPl').addEventListener('change', function() {
    var selectedNum = this.value;
    console.log('选中了：' + selectedNum);
});

2. 后端（MVC控制器）获取 #

当用户提交表单时，你可以通过两种方式拿到这个值：

• 模型绑定：如果你的ViewModel里有public int NumOfPpl { get; set; }，直接在Action参数里接收：

[HttpPost]
public ActionResult YourAction(YourViewModel model)
{
    // model.NumOfPpl就是选中的数值
    int count = model.NumOfPpl;
    // 后续逻辑...
    return View(model);
}

• 直接从Request获取：如果没用ViewModel，也可以这样：

[HttpPost]
public ActionResult YourAction()
{
    string selectedStr = Request.Form["numOfPpl"];
    if(int.TryParse(selectedStr, out int selectedNum))
    {
        // 成功转换为数字，处理逻辑
    }
    return View();
}

第二步：根据选中值动态生成对应数量的Name文本框 #

结合上面的change事件，我们可以动态添加/移除文本框，还要注意让后端能正确接收这些文本框的值：

<div class="form-group">
    <select class="form-control" id="numOfPPl" name="numOfPpl">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>
<!-- 用来放动态生成的文本框 -->
<div id="nameInputsContainer"></div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$(function() {
    $('#numOfPPl').on('change', function() {
        var selectedNum = parseInt($(this).val());
        var container = $('#nameInputsContainer');
        // 先清空容器里的旧内容
        container.empty();
        
        if(selectedNum === 1 || selectedNum === 2) {
            // 循环生成对应数量的文本框
            for(var i = 0; i < selectedNum; i++) {
                var inputHtml = `<div class="form-group">
                                    <label>Name ${i+1}</label>
                                    <input type="text" class="form-control" name="Names[${i}]" />
                                 </div>`;
                container.append(inputHtml);
            }
        }
    });
});
</script>

这样生成的文本框name属性是Names[0]、Names[1]，后端ViewModel里只要定义public List<string> Names { get; set; }，提交时就能自动绑定到这个集合里，非常方便！

小提示 #

• 记得给下拉框的option加上value属性，这样获取的值才是正确的数字，之前你的示例里option没写value，最好补上（比如<option value="1">1</option>）。
• 如果要做表单验证，可以给动态生成的文本框加上验证属性，或者用jQuery Validate做前端验证。

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