在UpdatePanel完成加載DOM元素后，如何從代碼隱藏中執行JavaScript？

Question

我有一個帶有轉發器的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插件的機會。 我知道如果我給它溢出的容器div的ID和其中元素的ID，它將平滑地直接滾動到用戶新添加的行。

但是，有兩個問題：

1. 我需要找到合適的行，以便我可以為其捕獲ClientID。
2. 我需要從我的代碼隱藏執行jQuery代碼段，這將導致我新更新的轉發器滾動到右側行。

我已經解決了＃1。 我有一個可靠的方法，將產生新添加的行的ClientID。

然而，問題＃2被證明是棘手的。 我知道我可以調用ScriptManager.RegisterStartupScript()構成我的代碼隱藏，它將在我的頁面上執行JavaScript。

我遇到的問題是它似乎正在執行那段JavaScript（我猜）新刷新的DOM元素已經完全加載。 所以，即使我傳入適當的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。 以下內容是從更復雜的東西入侵的。 它在文檔就緒時運行一次，但安裝了“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.
}

顯然，如果你願意，你可以從代碼隱藏中注入它。

Answer 2

您可以使用在加載所有腳本並創建並初始化應用程序中的對象后引發的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);