如何向iframe传入内部视图？下拉选单加载内部表单求助

一、修正现有代码的错误 #

你的JS代码里获取元素用了"Contenedor"，但iframe的ID是"iframe"，先修正这个问题：

function mostrarFormulario(valor) {
    console.log(valor);
    // 修正ID匹配错误
    document.getElementById("iframe").src = valor;
}

二、实现Submit按钮的显示/隐藏逻辑 #

在mostrarFormulario函数中添加按钮的切换逻辑：选中有效选项时隐藏按钮，切回默认选项时重新显示：

function mostrarFormulario(valor) {
    const buttonContainer = document.querySelector('.buttonSubmit');
    const iframe = document.getElementById("iframe");
    
    if (valor) {
        // 选中有效选项，隐藏按钮并显示iframe
        buttonContainer.style.display = 'none';
        iframe.src = `/Home/${valor}`; // 后续需要调整为实际的视图路径
        iframe.style.display = 'block';
    } else {
        // 切回默认选项，显示按钮并清空iframe
        buttonContainer.style.display = 'block';
        iframe.src = '';
        iframe.style.display = 'none';
    }
}

同时给iframe添加初始隐藏样式，避免页面加载时显示空白：

<iframe id="iframe" src="" scrolling="no" style="overflow:hidden; display:none; width:100%; height:600px;"></iframe>

三、两种加载表单的可行方案（推荐方案一） #

方案一：用fetch加载表单HTML（无iframe，样式更统一） #

这种方式不需要iframe，直接把表单的HTML内容插入当前页面的容器，避免iframe的样式隔离问题：

1. 在HTML中添加一个表单容器，放在下拉框下方：

<div class="col-6 mx-auto mb-4 mt-5">
    <label class="form-label" for="formulario">Elija un Formulario:</label>
    <select id="formulario" class="form-select" name="formulario" title="Formulario" onchange="mostrarFormulario(this.value)" required>
        <option value="">Elija una opción</option>
        <option value="DEC">DEC</option> <!-- value对应控制器的Action名称，比如DEC对应/Home/DEC -->
        <option value="lfd">LFD</option>
        <option value="sac">SAC</option>
    </select>
    <div class="col-12 buttonSubmit">
        <input class="btn btn-primary" type="submit" name="submit">
    </div>
    <!-- 新增表单容器 -->
    <div id="formContainer" class="mt-4"></div>
</div>

2. 修改JS函数，通过fetch获取渲染后的表单HTML并插入容器：

function mostrarFormulario(valor) {
    const buttonContainer = document.querySelector('.buttonSubmit');
    const formContainer = document.getElementById('formContainer');
    
    if (valor) {
        buttonContainer.style.display = 'none';
        // 请求控制器对应的视图，获取渲染后的HTML
        fetch(`/Home/${valor}`)
            .then(response => response.text())
            .then(html => {
                formContainer.innerHTML = html;
            })
            .catch(error => {
                console.error('加载表单失败:', error);
                formContainer.innerHTML = '<p>加载表单出错，请重试</p>';
            });
    } else {
        buttonContainer.style.display = 'block';
        formContainer.innerHTML = ''; // 清空容器
    }
}

注意：ASP.NET中无法直接访问.cshtml文件，需要通过控制器的Action返回视图，所以下拉框的value要对应控制器中返回对应视图的方法名称。

方案二：正确使用iframe加载表单 #

如果坚持用iframe，需要确保路径指向可访问的视图地址：

• 直接把.cshtml作为src无效，必须通过控制器访问，比如/Home/DEC
• 调整下拉框的value为完整路径，或者在JS中拼接：

<select id="formulario" ...>
    <option value="">Elija una opción</option>
    <option value="/Home/DEC">DEC</option>
    <option value="/Home/lfd">LFD</option>
    <option value="/Home/sac">SAC</option>
</select>

JS函数简化为：

function mostrarFormulario(valor) {
    const buttonContainer = document.querySelector('.buttonSubmit');
    const iframe = document.getElementById("iframe");
    
    if (valor) {
        buttonContainer.style.display = 'none';
        iframe.src = valor;
        iframe.style.display = 'block';
    } else {
        buttonContainer.style.display = 'block';
        iframe.src = '';
        iframe.style.display = 'none';
    }
}

四、移除不必要的表单提交行为 #

现在不需要点击Submit跳转，可移除form标签的action和method，或者阻止默认提交行为：

<form id="form" class="form" onsubmit="event.preventDefault();">

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