2009-12-23 70 views
10

我遇到了从UpdatePanel内部的外部javascript文件运行javascript的问题。我试图让一个颜色选择器在ListView中工作。 ListView位于UpdatePanel中。我正在使用this color pickerASP.Net - AJAX中的Javascript UpdatePanel

以下是我已经把范围缩小到:

  • 如果我使用颜色选择上UpdatePanel之外的文本框,它通过所有回传工作完全正常。

  • 如果我在UpdatePanel的文本框中使用颜色选择器,它会工作,直到我做异步回发(单击ListView中的“编辑”按钮)。一旦UpdatePanel完成回发,文本框将不再显示单击时的颜色选择器。当文本框位于ListView的InsertItemTemplateEditItemTemplate中时,也会发生同样的情况。

如果你想复制它,只需下载颜色选择器(它是免费的),然后加入这一个网页...

<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> 

页面加载时,拾色器作品精细。当你点击该按钮(进行回发)时,颜色选择器将不再工作。

任何想法?

回答

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(...)。要做到这一点,只需创建一个基本页面类并将其包含在其中(确保将受保护的页面标记为非私人页面或继承页面类将无法访问它)。

通过上面的代码,我可以放心地注册客户端脚本,而不管页面是做回发还是回调。意识到您正在使用外部脚本文件,您可能可以修改上述方法来注册外部脚本而不是内联脚本。有关更多详细信息,请参阅ScriptManager类,因为有几种脚本注册方法...

+0

谢谢。我使用了这个方法,并将'jscolor.init()'方法称为'scriptText',现在它可以工作。 – 2009-12-23 15:12:57

+0

没问题:)很高兴它解决了这个问题。 – 2009-12-23 15:57:09

+0

我比较喜欢创建基页类的扩展方法,而不是页面类。非常感谢。 +1 – IsmailS 2010-05-12 10:30:18

0

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

1

您是否试过ScriptManager.RegisterStartupScript,它允许您“在执行异步回发时从服务器向页面添加JavaScript”?

2

看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(); 
} 
+0

“if(window.Sys ...”,not“if(Sys ...” – thorn 2010-01-06 18:10:25