ASP: Switch between two ScriptManagers. Or how to remove a script link

Question

General idea

My general idea is to have a mobile and working version of my site. Users can switch versions using the buttons at the bottom of the page. I use ASP themes, so I can easily switch themes depending on the version of the site I want.

Problem

Switching topics is great, but since I have JavaScript files already included in my project, in the following ScriptManager on my main page:

 <asp:ScriptManager runat="server" ID="sm"> <Scripts> <asp:ScriptReference Path="~/Scripts/jquery-2.0.2.min.js" /> <asp:ScriptReference Path="~/Scripts/jQueryMobileBehaviour.js" /> <asp:ScriptReference Path="~/Scripts/Master.js" /> <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.3.1.min.js" /> </Scripts> </asp:ScriptManager> 

When the user switches to the desktop version, problems arise caused by jquery.mobile-1.3.1.min.js and jQueryMobileBehaviour.js . Is there a way to use two ScriptManagers (some themes, but for js files)?

What I tried without success

My first approach was to remove the mobile JavaScript files from the ScriptManager , and then manually include them in the click event of the button, which switches to the mobile version, such as sm.Scripts.Add .

The second approach was to programmatically delete JavaScript files for mobile devices, such as sm.Scripts.Remove .

  protected void CommandBtn_Click(Object sender, CommandEventArgs e) { switch (e.CommandName) { case "Desktop": HttpContext.Current.Response.Cookies["theme"].Value = "Desktop"; //sm.Scripts.Remove(new ScriptReference("~/Scripts/jquery.mobile-1.3.1.min.js")); break; case "Mobile": HttpContext.Current.Response.Cookies["theme"].Value = "Mobile"; //sm.Scripts.Add(new ScriptReference("~/Scripts/jquery-2.0.2.min.js")); //Response.Redirect(Request.RawUrl); break; default: break; } Page.Response.Redirect(Page.Request.Url.ToString(), true); } 

Both approaches did not work.

To summarize

• Is there something wrong in my code - assuming paths should be okay?
• Is there a better approach that will allow me to switch JavaScript files, how is this done with themes?

Answer 1

I finally came up with a solution. I tried adding two <asp:ScriptManager runat="server" ID="sm"> and making them sm.Visible = true/false depending on the version of the site as @Aristos suggested. However, I could not use two ScriptManager on the same page, and also there is no Visible property from ScriptManager .

So here is what I did.

First, since I need to switch between two sets of scripts, I made two separate ScriptManagerProxy (because I did not have two ScriptManager s).

For Desktop version:

  <asp:ScriptManagerProxy runat="server" ID="smDesktop"> <Scripts> <asp:ScriptReference Path="~/Scripts/jquery-2.0.2.min.js" /> <asp:ScriptReference Path="~/Scripts/Modernizr.js" /> <asp:ScriptReference Path="~/Scripts/Modernizr_full.js" /> <asp:ScriptReference Path="~/Scripts/Master.js" /> </Scripts> </asp:ScriptManagerProxy> 

and for the mobile version:

 <asp:ScriptManagerProxy runat="server" ID="smMobile"> <Scripts> <asp:ScriptReference Path="~/Scripts/jquery-2.0.2.min.js" /> <asp:ScriptReference Path="~/Scripts/jQueryMobileBehaviour.js" /> <asp:ScriptReference Path="~/Scripts/Modernizr.js" /> <asp:ScriptReference Path="~/Scripts/Modernizr_full.js" /> <asp:ScriptReference Path="~/Scripts/Master.js" /> <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.3.1.min.js" /> </Scripts> </asp:ScriptManagerProxy> 

IMPORTANT PART OF THE START HERE

Then I put them in two separate user controls that I registered on the main page:

 <%@ Register Src="~/UserControl/ScriptManagerDesktop.ascx" TagName="smDesktop" TagPrefix="uc" %> <%@ Register Src="~/UserControl/ScriptManagerMobile.ascx"TagName="smMobile" TagPrefix="uc" %> 

Then, in the body of the main page, I inserted a ContentPlaceHolder, which I will use to insert one of the user controls, depending on which version is required.

  <asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager> <asp:ContentPlaceHolder ID="cphScripts" runat="server"> </asp:ContentPlaceHolder> 

and finally, in the codebehind main page, I add the necessary user control to the placeholder:

  if (HttpContext.Current.Request.Cookies["theme"] != null) { switch (HttpContext.Current.Request.Cookies["theme"].Value) { case "Desktop": cphScripts.Controls.Add(Page.LoadControl("~/UserControl/ScriptManagerDesktop.ascx")); break; case "Mobile": cphScripts.Controls.Add(Page.LoadControl("~/UserControl/ScriptManagerMobile.ascx")); break; default: cphScripts.Controls.Add(Page.LoadControl("~/UserControl/ScriptManagerDesktop.ascx")); break; } } 

And voila I have your ScriptManager switch ready to go.

Hope this helps someone.