ASP.NET MVC 5：根据DropDownList选项生成不同表单的问题

针对下拉选单切换不同表单的需求，有两种主流实现方式，可对应解决你遇到的客户端验证失效问题：

方案一：修复Ajax加载后的客户端验证 #

你当前的思路没问题，验证失效的核心原因是jQuery Unobtrusive Validation仅在页面首次加载时解析DOM元素的验证规则，动态加载的表单不会被自动绑定验证逻辑。只需在加载完成后重新初始化验证即可：

修改后的JS代码：

let dropDown = $("#SelectedExpenseType")
let expenseFormContainer = $("#ExpenseCreationForm")

dropDown.change(function () {
    let url = dropDown.val();
    if ($.isEmptyObject(url)) {
        expenseFormContainer.empty()
        return;
    }
    
    expenseFormContainer.load(url, function() {
        // 重新解析新表单的验证规则
        const targetForm = expenseFormContainer.find('form');
        // 清除可能残留的旧验证数据
        targetForm.removeData('validator').removeData('unobtrusiveValidation');
        // 重新初始化Unobtrusive Validation
        $.validator.unobtrusive.parse(targetForm);
    });
})

关键说明： #

• 后端返回的局部视图必须包含完整的表单结构，且字段带有data-val、data-val-required等验证属性（后端模型验证特性会自动生成这些属性）。
• 每次加载完成后，先移除表单上的旧验证数据，再调用$.validator.unobtrusive.parse让验证框架识别新字段的规则。

方案二：预加载所有表单，切换显示隐藏 #

如果表单数量不多、结构固定，这种方式更高效，还能避免Ajax请求的延迟，且天然不存在验证失效问题：

实现步骤： #

1. 在Create视图中预定义所有类型的表单，给每个表单添加标识属性（比如data-expense-type），初始状态全部隐藏。
2. 下拉选单变更时，隐藏所有表单，只显示对应类型的表单。

示例代码：

HTML部分：

<select id="SelectedExpenseType">
    <option value="">请选择费用类型</option>
    <option value="travel">差旅费用</option>
    <option value="office">办公费用</option>
</select>

<div id="ExpenseCreationForm">
    <!-- 差旅费用表单 -->
    <form class="expense-form" data-expense-type="travel" style="display: none;">
        <input type="text" name="TravelDestination" data-val="true" data-val-required="请填写目的地" />
        <span data-valmsg-for="TravelDestination" data-valmsg-replace="true" class="text-danger"></span>
        
        <input type="number" name="TravelAmount" step="0.01" data-val="true" data-val-required="请填写金额" />
        <span data-valmsg-for="TravelAmount" data-valmsg-replace="true" class="text-danger"></span>
        
        <button type="submit">提交</button>
    </form>

    <!-- 办公费用表单 -->
    <form class="expense-form" data-expense-type="office" style="display: none;">
        <input type="text" name="OfficeItem" data-val="true" data-val-required="请填写物品名称" />
        <span data-valmsg-for="OfficeItem" data-valmsg-replace="true" class="text-danger"></span>
        
        <input type="number" name="OfficeAmount" step="0.01" data-val="true" data-val-required="请填写金额" />
        <span data-valmsg-for="OfficeAmount" data-valmsg-replace="true" class="text-danger"></span>
        
        <button type="submit">提交</button>
    </form>
</div>

JS部分：

let dropDown = $("#SelectedExpenseType")
let expenseForms = $(".expense-form")

dropDown.change(function () {
    const selectedType = $(this).val();
    // 隐藏所有表单
    expenseForms.hide();
    // 显示选中类型的表单
    if (selectedType) {
        expenseForms.filter(`[data-expense-type="${selectedType}"]`).show();
    }
})

方案选择建议 #

• 若表单需动态生成（比如依赖后端权限、配置），或表单数量多、结构差异大，选方案一。
• 若表单数量少、结构固定，选方案二，代码更简洁，用户体验更流畅。

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