ASP.NET Core 6.0 MVC：根据Yes/No选项动态显示更多字段

我有一个需要用户选择「是（Sim）」或「否（Não）」的字段，希望根据用户的选择动态展示更多需要填写的字段。现有代码如下：

<div class="col-6">
    <label for="Renda Bruta">Demonstrativo do Ano</label>
    <div class="col-3">
        <select asp-for="servidorPublico">
            <option value="Sim">Sim</option>
            <option value="Não">Não</option>
        </select>
    </div>
</div>

两种选择都会导向更多需填写的字段，其中一种还包含另一个Yes/No验证。请问该如何实现？是否需要使用JavaScript，还是要调用另一个视图来显示这些字段？

方案一：用JavaScript实现前端动态展示（推荐） #

这种方案不用页面刷新，用户体验更好，完全匹配你的场景，步骤如下：

1. 先把要动态显示的字段用容器包起来，默认设为隐藏：

<div class="col-6">
    <label for="Renda Bruta">Demonstrativo do Ano</label>
    <div class="col-3">
        <select asp-for="servidorPublico" id="servidorPublicoSelect">
            <option value="Sim">Sim</option>
            <option value="Não">Não</option>
        </select>
    </div>
</div>

<!-- 选Sim时显示的字段 -->
<div id="simFields" style="display: none;" class="mt-3">
    <div class="col-6">
        <label for="salarioBruto">Salário Bruto</label>
        <input type="number" asp-for="salarioBruto" class="form-control" />
    </div>
    <!-- 带嵌套Yes/No验证的字段 -->
    <div class="col-6 mt-3">
        <label for="temBeneficios">Possui benefícios adicionais?</label>
        <select asp-for="temBeneficios" id="temBeneficiosSelect">
            <option value="Sim">Sim</option>
            <option value="Não">Não</option>
        </select>
    </div>
    <!-- 选temBeneficios为Sim时显示的字段 -->
    <div id="beneficiosFields" style="display: none;" class="mt-3">
        <div class="col-6">
            <label for="valorBeneficios">Valor dos Benefícios</label>
            <input type="number" asp-for="valorBeneficios" class="form-control" />
        </div>
    </div>
</div>

<!-- 选Não时显示的字段 -->
<div id="naoFields" style="display: none;" class="mt-3">
    <div class="col-6">
        <label for="rendaOutras">Renda de Outras Fontes</label>
        <input type="number" asp-for="rendaOutras" class="form-control" />
    </div>
</div>

2. 加一段JS监听下拉框变化，控制字段的显示/隐藏：

// 获取主下拉框和对应字段容器
const servidorSelect = document.getElementById('servidorPublicoSelect');
const simFields = document.getElementById('simFields');
const naoFields = document.getElementById('naoFields');
// 获取嵌套的Yes/No下拉框和对应字段
const beneficiosSelect = document.getElementById('temBeneficiosSelect');
const beneficiosFields = document.getElementById('beneficiosFields');

// 主下拉框的切换逻辑
servidorSelect.addEventListener('change', function() {
    const selectedValue = this.value;
    // 先隐藏所有字段
    simFields.style.display = 'none';
    naoFields.style.display = 'none';
    
    // 根据选择显示对应内容
    if (selectedValue === 'Sim') {
        simFields.style.display = 'block';
        // 初始化嵌套字段为隐藏
        beneficiosFields.style.display = 'none';
    } else if (selectedValue === 'Não') {
        naoFields.style.display = 'block';
    }
});

// 嵌套下拉框的切换逻辑
beneficiosSelect.addEventListener('change', function() {
    beneficiosFields.style.display = this.value === 'Sim' ? 'block' : 'none';
});

// 页面加载时触发一次，确保初始状态正确
window.addEventListener('load', function() {
    servidorSelect.dispatchEvent(new Event('change'));
});

方案二：调用后端视图渲染 #

这种方案需要页面刷新（或AJAX加载），适合需要从后端动态获取字段内容的场景，比如根据用户权限加载不同字段，实现思路如下：

以ASP.NET Core为例：

1. 创建两个部分视图：_SimFields.cshtml和_NaoFields.cshtml，分别存放对应字段。
2. 主视图中通过判断或AJAX加载对应视图：

<div class="col-6">
    <label for="Renda Bruta">Demonstrativo do Ano</label>
    <div class="col-3">
        <select asp-for="servidorPublico" id="servidorPublicoSelect" onchange="loadFields()">
            <option value="Sim">Sim</option>
            <option value="Não">Não</option>
        </select>
    </div>
</div>

<div id="dynamicFieldsContainer">
    <!-- 初始加载对应字段 -->
    @if (Model.servidorPublico == "Sim")
    {
        <partial name="_SimFields" model="Model" />
    }
    else if (Model.servidorPublico == "Não")
    {
        <partial name="_NaoFields" model="Model" />
    }
</div>

<script>
function loadFields() {
    const selectedValue = document.getElementById('servidorPublicoSelect').value;
    // 发起AJAX请求获取部分视图
    fetch(`/YourController/LoadFields?value=${selectedValue}`)
        .then(response => response.text())
        .then(html => {
            document.getElementById('dynamicFieldsContainer').innerHTML = html;
        });
}
</script>

3. 后端Controller添加对应方法：

public IActionResult LoadFields(string value)
{
    var model = new YourModel();
    if (value == "Sim")
    {
        return PartialView("_SimFields", model);
    }
    else
    {
        return PartialView("_NaoFields", model);
    }
}

总结 #

• 只是简单显示/隐藏固定字段的话，优先用JavaScript方案，无刷新、实现简单、用户体验好。
• 需要从后端动态获取字段内容的场景，再考虑后端视图方案，可选择页面刷新或AJAX加载的方式。

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