Welcome to Professional ASP.NET - Chris Love's Official Blog Sign in | Join | Help

Chris Love's Official ASP.NET Blog

Chris Love's Helpful tips, tricks and pragmatic development knowledge for the ASP.NET world.
Add to Technorati Favorites


ASP Insider Follow Me On Twitter
Having Problems Registering Client Scripts with The ClientScript Object, Try the ScriptManager

This morning I was trolling the ASP.NET Forums and saw this question about registering the Virtual Earth control (it is really not a control, but that is not relevant to this post) and realized I had the same issue just the other day. The person posting the question said things worked fine in FireFox, but not IE, which I was not aware was the case, I know I have had issues using the ClientScriptManager controls in the past, but never thought to see about FireFox, which only adds to the mystery.

My solution to the problem is to use the ScriptManager control to register scripts. If you are using a MasterPage it works just as well as it does without a MasterPage. The ScriptManagerProxy control also works. Since just about every page these days is going to be using the ScriptManager anyway this is a great way to solve the problem. You can register just about any script you want.

<asp:ScriptManagerProxy ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" />
        <asp:ScriptReference Path="Default.aspx.js" />
    </Scripts>
</asp:ScriptManagerProxy>

I will caution, there are times where this has not worked with other AJAX frameworks, like JQuery or Scriptaculous. I know there are many Blogs popping up going over how to include JQuery, etc. I have not read any of them yet, but I solved the issue to include an effect built on Scriptaculous last week in a Nested Master Page situation where I only wanted the script present on the one page. The default MasterPage template includes a ContentPlaceHolder control in the <Header>, so I included a nested ContentPlaceHolder control in the nester MasterPage’s Content control and then included the traditional script reference in the actual page’s Content control, whew!

Master Master Page:

<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Nested Master Page:

<asp:Content ID="headContent" ContentPlaceHolderID="head" runat="Server">
    <asp:ContentPlaceHolder ID="cphMainHeader" runat="server">
    </asp:ContentPlaceHolder>
</asp:Content>

Content Page:

<asp:Content ID="headContent" ContentPlaceHolderID="cphMainHeader" runat="Server">
    <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/prototype.js"></script>
   1:  
   2:     <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder">
   1: </script>
   2:     <script type="text/javascript" src="js/lightbox.js">
</script> </asp:Content>

So I hope this gives you a couple of viable solutions to solve your client-side scripting include needs in ASP.NET!

Share this post :
Posted: Sunday, December 07, 2008 9:16 AM

by Chris Love

Comments

Luigi Gaeta said:

I'm not able to replicate your nested Master page to include the prototype.js with ScriptManager without getting error. Can you extend your code to better clarify how it work? Help...!
# December 9, 2008 6:48 AM

Chris Love said:

That is exactly how I have it working. You need the prototype.js script in the same folder as the scriptaculous scripts, etc.

# December 9, 2008 7:33 PM

Jerry Kurata said:

This does not work for me. As soon as I add the references to the scriptaculous library the divs and other elements on my page disappear. Could you post a simple page that has elements the are referenced by the scriptaculous routines?
# March 9, 2009 11:26 AM
Leave a Comment

(required) 

(required) 

(optional)

(required) 

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS