在JavaScript C# UpdatePanel更新之后更新UpdatePanel

Question

我有一个动态创建的JavaScript块，它在页面加载时执行。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

据我所知，您遇到的问题是，通过update面板呈现的javascript没有被执行。我找了一下，这似乎是个常见的问题。浏览器似乎没有执行封装在更新面板中的脚本。

问题是，虽然更新后的脚本被发送到浏览器，但从未执行。drawVisualization永远不会被重新定义.您可以从您的C#代码中尝试这样的方法：

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

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

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

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

<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>