在我的 UpdatePanel 完成加载其 DOM 元素后，如何从我的代码隐藏中执行 JavaScript？

Posted 2023-02-22

【中文标题】在我的 UpdatePanel 完成加载其 DOM 元素后，如何从我的代码隐藏中执行 JavaScript？

【英文标题】：How can I execute JavaScript from my code-behind after my UpdatePanel has finished loading its DOM elements?

【发布时间】：2011-03-12 15:05:38

【问题描述】：

我有一个带有中继器的 UpdatePanel，它在用户通过模式弹出窗口向其中添加项目后重新绑定。

当他们单击按钮向转发器添加新行时，代码隐藏如下所示：

protected void lbtnAddOption_Click(object sender, EventArgs e)
               
    SelectedOption = new Option()
    
        Account = txtAddOptionAccountNumber.Text,
        Margin = chkAddOptionMargin.Checked,
        Symbol = txtAddOptionSymbol.Text,
        Usymbol = txtAddOptionUsymbol.Text,
     ;

     Presenter.OnAddOption(); // Insert the new item
     RefreshOptions(); // Pull down and re-bind all the items
     mpeAddOptionDialog.Hide(); // Hide the modal 

     // ... Make call to jQuery scrollTo() method here?

这很好用，新行将通过 UpdatePanel 快速显示。

但是，通常有数百行，添加新行的位置取决于当前使用的排序列。

所以，我想借此机会使用甜蜜的jQuery ScrollTo plugin。我知道如果我给它我溢出的容器 div 的 ID 和其中一个元素的 ID，它会平滑地直接滚动到用户新添加的行。

但是，有两个问题：

我需要找到合适的行，以便为它获取 ClientID。 我需要从我的代码隐藏中执行 jQuery sn-p，这将导致我新更新的转发器滚动到正确的行。

我已经解决了#1。我有一个可靠的方法可以生成新添加的行的 ClientID。

但是，问题 #2 被证明是棘手的。我知道我可以在我的代码隐藏中调用ScriptManager.RegisterStartupScript()，它会在我的页面上执行 javascript。

我遇到的问题是，它似乎在（我猜）新刷新的 DOM 元素完全加载之前执行了那段 JavaScript。所以，即使我传入了适当的 jQuery 行来滚动到我想要的元素，它对我来说也是错误的，因为它还找不到那个元素。

这是我在上面发布的方法末尾使用的行：

     string clientID = getClientIdOfNewRow();  
     ScriptManager.RegisterStartupScript(this, typeof(Page), "ScrollScript", String.Format("$(\"#optionContainer\").scrollTo(\"0\", 800);", clientID), true);

我需要做什么才能确保在带有 UpdatePanel 的页面真正准备好之前不会调用这行 JavaScript？

【问题讨论】：

您是否尝试过添加 $(document).ready(function() // 如果合适，将滚动条运行到此处 );到您的页面顶部（更新面板之外的页面的一部分）？这可能会满足您的需要

【参考方案1】：

您可以使用Sys.Application.load 事件，该事件在所有脚本已加载且应用程序中的对象已创建和初始化后引发。

所以你的代码是：

string clientID = getClientIdOfNewRow();         
ScriptManager.RegisterStartupScript(this, typeof(Page)
    ,"ScrollScript"
    ,String.Format("Sys.Application.add_load(function()$(\"#optionContainer\").scrollTo(\"0\", 800););"
    , clientID)
    , true);

【参考方案2】：

如果您需要处理的内容在更新面板中，那么您需要在该面板加载后运行您的 JS。我为此使用 add_endRequest 。下面的内容是从更复杂的东西中窃取的。它在文档准备好时运行一次，但会安装每次更新面板更新时触发的“end ajax”处理程序。等它开火时，一切都为你准备好了。

var prm = Sys.WebForms.PageRequestManager.getInstance();
jQuery(document).ready(function () 
    prm.add_endRequest(EndRequestHandler);
);

function EndRequestHandler(sender, args) 
  // do whatever you need to do with the stuff in the update panel.

显然，如果您愿意，您可以从代码隐藏中注入。