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

Question

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

当他们单击按钮向转发器添加新行时，代码隐藏看起来像这样:

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，它会平滑地直接滚动到用户新添加的行。

但是，有两个问题:

1. 我需要找到合适的行，以便为其获取 ClientID。
2. 我需要从我的代码隐藏中执行 jQuery 片段，这将使我新更新的转发器滚动到正确的行。

我已经解决了#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？

Answer 1

如果您需要处理的内容在更新面板中，那么您需要在该面板加载后运行您的 JS。我为此使用 add_endRequest。下面是从更复杂的东西中破解出来的。它在文档准备就绪时运行一次，但会安装“结束 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.
}

显然，如果需要，您可以从代码隐藏中注入(inject)它。