.NET MVC Partial View模态框重复加载JS报错求解决方案

以下是几种可行的解决办法：

1. 将JS逻辑移出Partial View，放到全局公共区域 #

把JavascriptLogicModal.js的引用从Partial View的cshtml文件中删除，转而放到主布局页（比如_Layout.cshtml）的脚本加载区域，或者项目的公共JS文件集合里。这样JS只会被加载一次，不会随Partial View的重复渲染反复执行。

2. 给JS添加重复定义检查 #

在JavascriptLogicModal.js内部，定义变量或函数前先判断是否已存在，避免重复声明：

// 变量定义前检查
if (typeof modalData === 'undefined') {
    let modalData = {};
}

// 函数定义前检查
if (typeof initModal !== 'function') {
    function initModal() {
        // 你的模态框业务逻辑
    }
}

或者用立即执行函数表达式（IIFE）封装逻辑，形成独立作用域，避免全局变量冲突：

(function() {
    // 内部变量和函数仅在当前作用域有效，重复加载也不会触发重复定义
    let modalData = {};
    function initModal() {
        // 模态框初始化逻辑
    }

    // 如需全局调用，可挂载到window对象
    window.initClaimModal = initModal;
})();

3. 加载Partial View前检查并避免重复加载脚本 #

修改模态框的调用逻辑，在加载Partial View前先判断目标脚本是否已存在，不存在才加载：

function checkAndLoadScript(scriptUrl) {
    // 检查页面中是否已有该脚本的引用
    if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
        const script = document.createElement('script');
        script.src = scriptUrl;
        document.body.appendChild(script);
    }
}

// 调用模态框前先执行脚本检查
checkAndLoadScript('/path/to/JavascriptLogicModal.js');
$(buttonCharge).ModalPersonalize('show', urlController, 'rebuild title');

如果Partial View里是内联脚本，可以给脚本标签加唯一ID，加载前判断该ID是否存在，存在则跳过。

4. 缓存Partial View内容，复用模态框 #

第一次打开模态框时加载Partial View并缓存内容，后续打开直接复用缓存的HTML，不再重复请求控制器和加载JS：

let cachedClaimModal = null;

$(buttonCharge).on('click', function() {
    if (!cachedClaimModal) {
        // 首次请求并缓存Partial View内容
        $.get(urlController, function(htmlContent) {
            cachedClaimModal = htmlContent;
            $('#modalContainer').html(cachedClaimModal);
            $('#modalContainer').modal('show');
        });
    } else {
        // 直接复用缓存内容
        $('#modalContainer').html(cachedClaimModal);
        $('#modalContainer').modal('show');
    }
});

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