如何在JavaScript函数中嵌入ASP.NET Razor代码？引号问题求助

嘿，我看到你在把ASP.NET Razor代码嵌入JavaScript函数时碰到了引号冲突的问题，这确实是个新手常踩的坑！咱们来一步步搞定它。

首先，你当前代码的问题在于：JavaScript字符串用单引号包裹，而Razor表达式里的属性（比如asp-items="@(...)"）又用了双引号，虽然表面看没问题，但Razor解析后生成的HTML字符串里的引号会和JS的字符串边界冲突，导致JS语法错误。

下面给你两种靠谱的解决方案：

方案一：使用ES6模板字符串 + Html.Raw() #

ES6的模板字符串（用反引号`包裹）支持多行文本，而且里面的单双引号都不需要额外转义，配合Razor的Html.Raw()可以直接生成正确的HTML：

<script type="text/javascript">
function GetSelectedValue() {
    var e = document.getElementById('Analitycs');
    var eValue = e.options[e.selectedIndex].value;
    var div = document.getElementById('addedBody');
    
    switch (eValue) {
        case "1":
            // 用反引号作为JS字符串边界，避免引号冲突
            var newContent = `@Html.Raw("<label>Контрагент</label><select class='selectpicker' data-live-search='true' data-size='7' asp-items='${new SelectList(Model.Partners, "Name", "Name")}' asp-for='FilterModel.PartnerName'><option value=''>Выберите контрагента</option></select>")`;
            div.innerHTML += newContent;
            // 动态添加selectpicker后记得刷新组件
            $('.selectpicker').selectpicker('refresh');
            break;
    }
}
</script>

这里的关键是：

• 用反引号`代替单引号作为JS字符串的边界
• 用Html.Raw()确保Razor生成的HTML不会被自动转义
• 把HTML属性里的双引号换成单引号，避免和Razor的表达式引号冲突

方案二：将Razor模板提前渲染到隐藏元素（更推荐） #

这种方法把Razor和JavaScript完全分离，代码更清晰易维护，也彻底避免了引号冲突：

<!-- 先在页面里用Razor渲染好需要的HTML模板，隐藏起来 -->
<div id="partnerSelectTemplate" style="display: none;">
    <label>Контрагент</label>
    <select class="selectpicker" 
            data-live-search="true" 
            data-size="7" 
            asp-items="@(new SelectList(Model.Partners, "Name", "Name"))" 
            asp-for="FilterModel.PartnerName">
        <option value="">Выберите контрагента</option>
    </select>
</div>

<script type="text/javascript">
function GetSelectedValue() {
    var e = document.getElementById('Analitycs');
    var eValue = e.options[e.selectedIndex].value;
    var div = document.getElementById('addedBody');
    
    switch (eValue) {
        case "1":
            // 直接从隐藏元素中获取预渲染好的HTML
            var templateHtml = document.getElementById('partnerSelectTemplate').innerHTML;
            div.innerHTML += templateHtml;
            // 必须刷新selectpicker，否则动态添加的组件不会生效
            $('.selectpicker').selectpicker('refresh');
            break;
    }
}
</script>

这个方案的优势：

• Razor代码和JS逻辑完全分离，可读性更强
• 不需要处理任何引号转义问题
• 动态添加组件后，记得调用selectpicker('refresh')来初始化新添加的下拉框，否则它不会显示正确的样式和搜索功能

内容的提问来源于stack exchange，提问作者Oscar Dominguez Navarrete