c# - 在 C# UpdatePanel 更新后更新 JavaScript

Question

我有一个动态创建的 JavaScript block ，它在页面加载时执行。 JS 在 UpdatePanel 中。

更新 UpdatePanel 时，我需要更新动态创建的 JavaScript。这一切都很好，因为当我查看页面生成的源代码时，我可以看到更新后的 JS。

我的问题是页面更新后，我需要手动重新执行 JavaScript 函数(因为这通常在页面加载时自动完成)。

我试过很多方法:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();

    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "PageContent_TabContent_UpdatePanel1") {
            drawVisualization();
            break;
        }
    }
}

或者:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);

function handleEndRequest(sender, args) {
    drawVisualization();
}

但这两种方法都只是执行旧版本的 JavaScript，根据生成的源代码，它已经发生了变化。

有没有我遗漏的东西，或者我可以尝试的另一种方法？

更新:

使用@Mehdi Maujood 的评论，我整理了一个可行的解决方案:

function handleEndRequest(sender, args)
{
    var updatedPanels = args.get_panelsUpdated();
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "PageContent_TabContent_UpdatePanel1") {

            var scripts = updatedPanels[idx].getElementsByTagName('script');
            for(var i=0;i<scripts.length;i++) {
                eval(scripts[i].innerHTML);
            }

            drawVisualization();
            break;
        }
    }
}

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(handleEndRequest);

这结合了来自 How can I recall a javascript function after updatepanel update 的答案以及@shatl 对 Rebinding events in jQuery after Ajax update (updatepanel) 的评论.

Answer 1

据我所知，您遇到的问题是未执行通过更新面板呈现的 javascript。我搜索了一下，这似乎是常见问题。浏览器似乎不执行包装在更新面板中的脚本。

问题是，虽然您更新的脚本已发送到浏览器，但它永远不会执行。 drawVisualization 永远不会被重新定义。你可以从你的 C# 代码中尝试这样的事情:

string script = "function drawVisualization() { alert('Drawing code here') }";

ScriptManager.RegisterClientScriptBlock(this.Page, typeof(SomeClass), Guid.NewGuid().ToString(), script, true);

对 RegisterClientScriptBlock 的调用可能需要修复一些参数；我只是从某个地方复制的。

编辑:我从另一个问题中找到了更好的方法。请参阅评论。下面是一段执行更新面板渲染的脚本的代码(之前的代码可以忽略):

<script type="text/javascript">
    function handleEndRequest(sender, args)
    {
        var panel = document.getElementById(sender._postBackSettings.panelID);
        var scripts = panel.getElementsByTagName('script');
        for(var i=0;i<scripts.length;i++) {
            eval(scripts[i].innerHTML);
        }
    }

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);
</script>