代码之家 › 专栏 › 技术社区 › Ryan Alford

ajax updatepanel中的asp.net-javascript

jscolor ajax asp.net javascript

Ryan Alford · 技术社区 · 15 年前

我遇到了从updatepanel内部的外部javascript文件运行javascript的问题。我想让一个颜色选择器在列表视图中工作。ListView位于UpdatePanel的内部。

我正在使用 this color picker .

我把范围缩小到:

如果我在 UpdatePanel ,它在所有回邮中都工作得很好。
如果我在 小精灵 ,它可以工作,直到我执行异步回发(单击列表视图中的“编辑”按钮)。一旦 UpDATEPANEL 已完成回发,单击时文本框将不再显示颜色选择器。当文本框位于 InsertItemTemplate 或 EditItemTemplate 列表视图的。

如果你想复制它,只需下载颜色选择器(它是免费的),然后添加到网页…

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<div>
    <asp:UpdatePanel ID="panel1" runat="server">
        <ContentTemplate>
            <asp:TextBox runat="server" ID="textbox" CssClass="color" />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

加载页面时,颜色选择器工作正常。当你点击按钮(它做回发)时,颜色选择器将不再工作。

有什么想法吗?

4 回复 | 直到 13 年前

KP. 15 年前

异步往返之后,将不会运行任何启动脚本,这可能是在ajax回调之后启动脚本不起作用的原因。颜色选择器可能有需要在页面加载时执行的函数。

我遇到过很多次这样的问题,所以我编写了一个小方法来在代码后面注册我的脚本,它处理异步和非异步往返。以下是基本概要:

private void RegisterClientStartupScript(string scriptKey, string scriptText)
{
    ScriptManager sManager = ScriptManager.GetCurrent(this.Page);

    if (sManager != null && sManager.IsInAsyncPostBack)
    {
        //if a MS AJAX request, use the Scriptmanager class
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), scriptKey, scriptText, true);
    }
    else
    {
        //if a standard postback, use the standard ClientScript method
        scriptText = string.Concat("Sys.Application.add_load(function(){", scriptText, "});");
        this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), scriptKey, scriptText, true);
    }
}

实际上,我将上面的内容烘焙到了一个基页类中,这样我使用的任何页面都可以调用 this.RegisterClientStartupScript(...) . 为此,只需创建一个基页类并将其包含在其中(确保将protected标记为not private,否则继承的页类将无法访问它)。

通过上面的代码,我可以自信地注册客户端脚本,而不管页面是执行回发还是回调。意识到您正在使用外部脚本文件,您可能可以修改上面的方法来注册外部脚本,而不是内联脚本。查阅 ScriptManager 类获取更多详细信息,因为有几个脚本注册方法…

FlashXSFX 15 年前

在查看了jscolor源代码之后,我注意到它在窗口加载时初始化了所有内容。因此,您可能需要使用以下内容(在updatepanel中)重新初始化:

function yourInit(){
   /* keep in mind that the jscolor.js file has no way to determine
      that the script has already been initialized, and you may end
      up initializing it twice, unless you remove jscolor.install();
   */

   if (typeof(jscolor) !== 'undefined'){
      jscolor.init();
   }
}
if (typeof(Sys) !== 'undefined'){
   Sys.UI.DomEvent.addHandler(window, "load", yourInit);
}
else{
   // no ASP.NET AJAX, use your favorite event
   // attachment method here
}

如果决定将jscolor脚本放在updatepanel中,还需要在jscolor.js的末尾添加如下内容:

if(Sys && Sys.Application){
   Sys.Application.notifyScriptLoaded();
}

Pablo 15 年前

您是否尝试过scriptmanager.registerstartupscript,它允许您“在执行异步回发时将javascript从服务器添加到页面”?

bwarner 15 年前

我猜,运行以设置颜色选择器的js color.js代码只有在页面首次加载时才被调用,因此当在服务器上重新生成控件时,将丢失jscolor所做的更改。你能注册一些javascript在你的代码后面调用吗,这样当你的异步调用完成时,它就可以在jscolor上调用in it方法了?