Issue with Master Page Styles
I am facing an issue with the styles when switching master pages via a button event in asp.net 4.0. Even though the new master page is displayed, the CSS from the old master page seems to persist. The styles are defined within the head of the old master page, and I can see that the new master page should have a different set of styles based on the markup. Viewing the source also shows all the new CSS declarations in the head. How can I force a "refresh" or "reload" to apply the correct styles?
Implementation Details
I am working on implementing a mobile version for my asp.net site. When a mobile device is detected, a cookie is set to switch the master page to a mobile-friendly one in the preinit method. This functionality works correctly:
protected virtual void Page_PreInit(Object sender, EventArgs e)
{
if (IsMobile)
this.Page.MasterPageFile = "m-" + this.Page.MasterPageFile;
}
There is a button at the bottom of the page that allows users to toggle between the mobile and desktop view by changing the value in the cookie. Upon redirecting back to the page, the relevant master page is rendered based on the cookie value. However, even though the correct master page is displayed in the markup, the styles from the mobile version persist when switching to the desktop view. Redirecting was intended to solve this issue.
// Event handler for desktop/mobile site toggle button click
protected void viewMobileButton_Click(Object sender, EventArgs e)
{
HttpCookie isMobileCookie = Cookies.snatchCookie("isMobile");
if (bool.Parse(isMobileCookie.Value))
Cookies.bakeCookie("isMobile", "false");
else
Cookies.bakeCookie("isMobile", "true");
Response.Redirect(Request.RawUrl);
}
This is my first attempt at such implementation, and I am unsure if I am approaching it correctly, or how to troubleshoot further. Any assistance would be greatly appreciated.
Update
After some investigation, I discovered that the issue is related to the JQuery Mobile scripts. It appears that JQuery Mobile links pages together in a way that affects CSS registration. Disabling it allows the master page to switch correctly with the CSS included. I am currently exploring ways to disable JQuery Mobile before the redirect, although I am not sure how to achieve this yet.