当更新面板刷新后，我该如何运行一些JavaScript？

Question

我有一个pageLoad函数，用于设置一些CSS样式在一个我无法更改的.ascx控件上。在页面加载时一切正常，但当更新面板更新该控件后，我的CSS不再被应用。如何在页面更新后重新运行我的函数？

 $(function() {
        $("textarea").attr("cols", "30");
        $("input.tbMarker").css({ "width": "100px" }).attr("cols","25");
    });

这显然只在初始页面加载时运行。我该如何在更新后运行它？

- Hcabnettek

---

在客户端侧与MSAjax的pageLoad事件绑定：https://dev59.com/xWox5IYBdhLWcg3wsGaC - dotnettex

https://dev59.com/rXRC5IYBdhLWcg3wUfN2#339114 - Frank Myat Thu

Answer 1

最简单的方法是在您的JavaScript代码中使用MSAjax pageLoad事件：

<script> 
   ///<summary>
   ///  This will fire on initial page load, 
   ///  and all subsequent partial page updates made 
   ///  by any update panel on the page
   ///</summary>
   function pageLoad(){ alert('page loaded!') }  
</script>

我已经使用过它很多次，它的效果非常好。最重要的是不要将它与document.ready函数混淆（该函数只会在页面文档对象模型（DOM）准备好执行JavaScript代码后执行一次），而pageLoad事件将在每次更新面板刷新时执行。

来源：在Update Panel AJAX asp.net之后运行脚本

- Kartikay Tripathi

---

太棒了！我一直在寻找一种方法，在更新面板刷新时保持JavaScript的执行，感谢你的回答！ - Sebastien H.

我刚在一个项目中处理了这种情况 - 这对我来说是最简单和最可靠的。使用 add_pageLoaded 和 RegisterStartupScript 方法更难通过回调跟踪和调试，但 pageLoad 就可以正常工作。 - brichins

var firstload = 0; function pageLoad() { if (firstload == 0) firstload = 1; else { alert('Postback!'); } } - mjb

Answer 2

添加一个add_pageLoaded处理程序也可以起作用。

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

注意：处理程序将对任何回调触发，但您可以使用sender._postBackSettings.panelID来筛选您希望调用函数的时间。

更多示例：

• http://blog.jeromeparadis.com/2007/03/01/1501/
• http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

- brianng

---

太好了！此外，如果没有显式的面板（例如，您可能正在使用一些使用UpdatePanels的Telerik控件），您还可以使用sender._postBackSettings.asyncTarget来验证当前的postback是否是您要查找的那个。 - Protector one

Answer 3

请将代码添加到与您放置Script Manager相同的表单中。

后台代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (ScriptManager1.IsInAsyncPostBack)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<script language='javascript' type='text/javascript'>");
        sb.Append("Sys.Application.add_load(func);");
        sb.Append("function func() {");
        sb.Append("Sys.Application.remove_load(func);");
        sb.Append("alert('I am Batman!');");
        sb.Append("}");
        sb.Append("</script>");
        ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false);
    }
}

- Marco Ramires

Answer 4

在更新面板的回发过程中，可以在服务器端代码中使用ClientScriptManager向页面添加一些新的脚本，就像这样：

ClientScriptManager.RegisterStartupScript(
       typeof(page1), 
       "CssFix", 
       "javascriptFunctionName()", 
        true);

将你的JavaScript封装在一个与第三个参数匹配的命名函数中，它应该在postback返回时执行。

- womp

Answer 5

您还可以通过客户端代码（JavaScript）绑定事件，以便在每次UpdatePanel完成时执行以下操作：

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){myFunction();});

因此，在这种情况下，每当发生UpdatePanel回传时，myFunction()函数都会被调用。如果你在页面加载时执行此代码，则会在正确的时间调用该函数。

- Peter Eysermans