Asp.Net Core如何向Partial View（分部视图）传递JavaScript函数

你遇到的Uncaught SyntaxError: Unexpected token '&'错误是Razor默认HTML编码机制导致的：Razor会自动将输出的字符串内容中的特殊字符（比如引号、尖括号）转义为HTML实体（比如双引号"会被转成"），转义后的内容直接放到script标签中时，JS解析器无法识别这些HTML实体，就会抛出语法错误。

以下是几种安全、可落地的复用方案：

方案1：改造弹窗支持传入回调函数（最常用） #

修改PopUp.cshtml的逻辑，不要把删除操作写死，改为支持调用时传入自定义回调：

<div class="popUpDeleteBackground" hidden>
    <div class="popUpDelete">
        <h3>你确定要删除该内容吗？</h3>
        <p>该操作不可逆</p>
        <div class="popUpDeleteButtonDiv">
            <button class="btn deleteConfirm">是</button>
            <button class="btn" onclick="PopUpRemove()">否</button>
        </div>
    </div>
</div>
<script>
// 存储当前确认操作的回调
let currentConfirmCallback = null;

// 调用弹窗时传入对应页面的删除逻辑
function PopUpShow(confirmCallback) {
    $(".popUpDeleteBackground").attr("hidden", false);
    currentConfirmCallback = confirmCallback;
}

function PopUpRemove() {
    $(".popUpDeleteBackground").attr("hidden", true);
    currentConfirmCallback = null;
}

// 统一绑定确认按钮事件，避免重复绑定
$(() => {
    $(".deleteConfirm").on("click", () => {
        if (typeof currentConfirmCallback === 'function') {
            currentConfirmCallback();
        }
        PopUpRemove();
    });
})
</script>

在不同父页面调用时，直接传入对应页面的删除逻辑即可，无需修改分部视图：

// 例：车牌管理页面的删除逻辑
$(".deletePlateBtn").on("click", function() {
    const licensePlate = $(this).data("plate");
    PopUpShow(() => {
        // 写当前页面专属的删除逻辑
        Delete(licensePlate);
    });
})

// 例：文章管理页面的删除逻辑
$(".deleteArticleBtn").on("click", function() {
    const articleId = $(this).data("id");
    PopUpShow(() => {
        DeleteArticle(articleId);
    });
})

方案2：使用Html.Raw避免编码（仅推荐无用户输入场景） #

如果你坚持要通过Model传递函数，只需要在分部视图中用@Html.Raw()禁止Razor自动编码即可：

<script>
$(".deleteConfirm").on("click", () => {
    @Html.Raw(Model)
    PopUpRemove();
});
</script>

注意：该方案存在XSS风险，仅当你完全确定传入的函数字符串没有用户可控内容时使用。

方案3：自定义事件实现解耦 #

你也可以通过全局自定义事件实现逻辑隔离，分部视图触发事件，父页面监听事件处理自身逻辑：
分部视图内的确认按钮逻辑改为：

$(".deleteConfirm").on("click", () => {
    // 触发全局确认事件，可通过detail传递参数
    window.dispatchEvent(new CustomEvent('popUpConfirm', {
        detail: { /* 可放需要传递的公共数据 */ }
    }));
    PopUpRemove();
});

父页面监听事件即可：

window.addEventListener('popUpConfirm', () => {
    // 执行当前页的删除逻辑
    DeleteCurrentItem();
});

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