C# MVC中JavaScript动态添加下拉框：HTML字符串转换问题求助

你遇到的核心问题是把服务器端的Razor语法直接写到客户端JS字符串里——@Html.DropDownList是ASP.NET MVC在服务器端执行的代码，浏览器只会把它当成普通文本，不会帮你转换成对应的<select>元素。下面给你两种靠谱的解决方案：

方案一：提前渲染模板（推荐） #

这种方法最稳妥，先在页面里把下拉列表的完整HTML用Razor渲染好，隐藏起来当模板，点击按钮时直接克隆模板再添加到目标位置：

步骤1：在页面中添加隐藏的模板 #

<!-- 隐藏的下拉列表模板，服务器端会先把Razor代码转换成HTML -->
<div id="dropdown-template" style="display: none;">
    <div class="input-group">
        @Html.DropDownList("Data", new List<SelectListItem>{ 
            new SelectListItem{ Text="Custom Range", Value ="Custom Range" }, 
            new SelectListItem{ Text="Last 30 minutes", Value ="Last 30 minutes" }, 
            new SelectListItem{ Text="Last 1 hour", Value ="Last 1 hour" } 
        }, "Select Data", new { @ng_model = "fileterparameter", @id = "Data", @class = "form-control" })
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" id="filterlink"><i class="glyphicon glyphicon-filter"></i></button>
        </span>
    </div>
</div>

<!-- 触发添加的按钮 -->
<button id="add-dropdown-btn">添加下拉列表</button>
<!-- 要把下拉列表添加到的容器 -->
<div id="target-container"></div>

步骤2：编写点击事件的JS代码 #

// 给按钮绑定点击事件
document.getElementById('add-dropdown-btn').addEventListener('click', function() {
    // 获取模板并克隆它的内容
    const template = document.getElementById('dropdown-template');
    const newDropdown = template.firstElementChild.cloneNode(true);
    
    // 重要：修改克隆后的下拉列表id，避免DOM中id重复（会影响ng-model和JS选择器）
    const selectElement = newDropdown.querySelector('#Data');
    selectElement.id = `Data-${Date.now()}`;
    
    // 把新的下拉列表添加到目标容器
    document.getElementById('target-container').appendChild(newDropdown);
});

方案二：在服务器端生成HTML字符串后传给JS #

如果一定要在JS里拼接HTML，可以让服务器先把@Html.DropDownList生成的HTML转换成JS安全的字符串，再传给客户端：

// 服务器端先执行Razor代码生成HTML，再转成JS可识别的字符串
var dropDownHtml = @Html.Raw(Json.Encode(
    Html.DropDownList("Data", new List<SelectListItem>{ 
        new SelectListItem{ Text="Custom Range", Value ="Custom Range" }, 
        new SelectListItem{ Text="Last 30 minutes", Value ="Last 30 minutes" }, 
        new SelectListItem{ Text="Last 1 hour", Value ="Last 1 hour" } 
    }, "Select Data", new { @ng_model = "fileterparameter", @id = "Data", @class = "form-control" }).ToString()
));

// 组装完整的输入组HTML
var dropDownTime = `<div class="input-group">${dropDownHtml}
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button" id="filterlink"><i class="glyphicon glyphicon-filter"></i></button>
    </span>
</div>`;

// 添加下拉列表的函数
function addDropdown() {
    const target = document.getElementById('target-container');
    // 先把字符串转成DOM元素，方便修改id
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = dropDownTime;
    const newDropdown = tempDiv.firstElementChild;
    
    // 同样要修改id避免重复
    newDropdown.querySelector('#Data').id = `Data-${Date.now()}`;
    
    target.appendChild(newDropdown);
}

关键注意点 #

• 为什么原来的写法不行？因为@Html.DropDownList是服务器端代码，当页面发送到浏览器时，这段代码不会被执行，只会以纯文本的形式出现在JS字符串里，所以浏览器无法识别成下拉列表。
• 一定要处理id重复问题：如果每次添加的下拉列表id都是Data，会导致DOM中id冲突，不仅影响AngularJS的ng-model绑定，还会让JS选择器（比如document.getElementById）只能找到第一个元素。

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