如何在Button Popover中正确加载显示Partial View？

问题表现 #

点击按钮触发Popover弹出框后，内部没有正常渲染多选下拉框组件，而是直接展示了局部视图的HTML源码，异常效果如下：

问题原因 #

• Bootstrap Popover组件默认将data-content属性内的内容作为纯文本解析，不会自动渲染HTML标签，直接写入局部视图的HTML代码会直接把源码当普通文本展示，和上述异常表现完全匹配。
• 直接将渲染后的局部视图HTML写入HTML标签属性时，内容中包含的双引号、换行符、特殊符号会破坏button标签的原有属性结构，进一步引发渲染错乱。

修复方案 #

推荐方案（无转义风险，兼容性最好） #

不要把局部视图内容直接塞到button的data-content属性中，使用独立的隐藏容器预加载局部视图，初始化Popover时动态读取内容：

1. 修改cshtml页面代码，新增隐藏容器存放局部视图，给button添加data-html="true"配置开启HTML渲染：

@* 隐藏容器预加载局部视图，页面加载时默认不显示 *@
<div id="popoverContent" style="display: none">
    @await Html.PartialAsync("_ListBoxPartial")
</div>

<button type="button" class="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="bottom" id="popoverBtn"
        data-html="true">
    Popover on bottom
</button>

2. 添加JS初始化逻辑，手动指定Popover的内容来源：

$(function () {
    $('#popoverBtn').popover({
        content: function () {
            return $('#popoverContent').html();
        }
    });
});

轻量方案（适合结构简单的局部视图） #

如果局部视图结构简单、没有复杂特殊字符和脚本，也可以直接在button属性上配置内容，但必须对输出内容做HTML属性编码，同时开启HTML渲染：

<button type="button" class="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="bottom" id="popoverBtn"
        data-html="true"
        data-content="@Html.AttributeEncode(await Html.PartialAsync("_ListBoxPartial").ToString())">
    Popover on bottom
</button>

注意：该写法存在转义风险，如果局部视图包含复杂脚本、大量双引号/特殊格式字符，优先选择上述推荐方案。

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