.NET Core MVC中AJAX加载含JS的CSHTML后函数未定义问题求解

问题原因 #

1. 用innerHTML插入HTML时，浏览器不会自动执行其中引用外部资源的<script>标签，仅部分浏览器能执行内联脚本，外部脚本完全不会加载。
2. AJAX返回的是局部视图，@section Scripts不会被_Layout.cshtml的@RenderSection处理——局部视图不走完整的布局渲染流程，该区块内容直接被忽略。

可行解决方案 #

方案一：手动提取并动态加载脚本

在AJAX回调中，先提取返回HTML里的所有脚本，逐个创建<script>元素加载，确保脚本加载完成后再调用初始化函数：

$.ajax({ 
    url: "/controller/method", 
    data: {}, 
    method: "POST", 
    async: true, 
    cache: false, 
    timeout: 300000000 
}).done(function(htmlPage){
    // 插入页面HTML内容
    var fragment = document.createElement('div');
    fragment.innerHTML = htmlPage;
    ej.base.append(fragment.children, document.getElementById('containerGerarchiaAgenti'), true);

    // 提取并加载所有脚本
    var scripts = $(htmlPage).filter('script');
    var loadedCount = 0;
    var totalScripts = scripts.length;

    // 所有脚本加载完成后执行初始化
    function initAfterLoad() {
        if (loadedCount === totalScripts) {
            initPageGerarchiaAgenti();
        }
    }

    scripts.each(function() {
        var scriptSrc = $(this).attr('src');
        if (scriptSrc) {
            // 处理外部脚本
            var script = document.createElement('script');
            script.src = scriptSrc;
            script.onload = () => {
                loadedCount++;
                initAfterLoad();
            };
            script.onerror = () => {
                loadedCount++;
                initAfterLoad();
                console.error('脚本加载失败:', scriptSrc);
            };
            document.body.appendChild(script);
        } else {
            // 处理内联脚本
            eval($(this).text());
            loadedCount++;
            initAfterLoad();
        }
    });

    // 无脚本时直接初始化
    if (totalScripts === 0) {
        initPageGerarchiaAgenti();
    }
})

方案二：提前加载固定脚本

如果initPageGerarchiaAgenti()对应的脚本是固定资源，直接在主页面的@section Scripts或_Layout.cshtml中全局引入，AJAX加载页面后直接调用函数即可：

@section Scripts {
    <script src="~/path/to/your/script-file.js"></script>
}

这种方式不需要在AJAX返回的局部视图中重复引入脚本，避免加载重复问题。

方案三：使用jQuery的load方法（自动处理脚本）

jQuery的load方法会自动解析并执行加载内容中的脚本，代码更简洁：

// 直接加载内容到目标容器，自动处理脚本
$('#containerGerarchiaAgenti').load('/controller/method', function() {
    // 内容加载完成后直接调用初始化函数
    initPageGerarchiaAgenti();
});

注意：load默认是GET请求，若需POST，可配合$.post先获取内容再插入，但load的脚本自动处理逻辑更省心。

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