asp.net 移动/桌面站点切换按钮，切换主页，但样式 "stuck"

Question

总结

我在 asp.net 4.0 中通过按钮事件翻转母版页时遇到样式问题。新的 master 切换了，但旧 master 的 css 仍然存在。我不明白这是怎么发生的，因为样式是在旧大师的头脑中定义的，而且我可以通过标记清楚地看到新大师正在显示应该是一组完全不同的样式。此外，查看源代码会在头部显示所有新的 css 声明。我怎样才能让它“刷新”或“重新加载”？

一些细节

我正在实现我的 asp.net 网站的移动版本。如果检测到移动设备，我会设置一个 cookie，并将 preinit 中的母版页切换为适合移动设备的母版页。这很好用:

protected virtual void Page_PreInit(Object sender, EventArgs e)
{
    if (IsMobile)
        this.Page.MasterPageFile = "m-" + this.Page.MasterPageFile;
}

我在底部有一个“完整站点”按钮，可让您在移动和桌面 View 之间来回切换。单击它时，我更改了 cookie 中的值。然后当页面重定向到自身时，检查该值，并给出相应的母版页。这也“有效”，我可以告诉正确的母版页是通过标记呈现的。除了移动版本的样式，即使在显示桌面母版时也会保留。我做了重定向，认为它会阻止这种情况。

// desktop/mobile site toggle button click event
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);
}

这是我第一次做这样的事情，我不确定我是否以正确的方式去做，或者如何从这里进行调试。在此先感谢您的帮助。

编辑

好的，所以我发现它与 JQuery Mobile 脚本有关。 JQuery Mobile 有这种将页面绑定(bind)在一起的方式。我不完全理解它，我认为他们将它用于页面转换，并且它阻止了我的新 CSS 注册。当我关闭它时，我的母版页可以很好地翻转，包括 css。我正在研究一种在重定向之前关闭 JQuery Mobile 的方法。请注意，尽管如此。

Answer 1

问题最终与用于页面转换的 JQuery Mobile AJAX 有关。 JQuery Mobile 不会在第一个页面请求之后加载文档的头部。

因此，当我将移动母版切换到桌面母版时，文档的头部不会加载以引入我的样式。有几种方法可以解决这个问题:

这种方式只是完全关闭 AJAX，并解决了问题，但是您无法从中受益:

<form data-ajax="false">

这是一种有问题的方法，但提醒您，它不会在 JQuery Mobile 初始化后通过事件工作，因此您也无法从中受益:

$.mobile.ajaxEnabled = false;

如果您必须使用 onclick 事件和事件处理程序，首先通过页面重定向，我支持的上述两种解决方案都可以使用。

更好的解决方案是将 rel="external"添加到链接以告诉 JQM 它是传出链接。

<a href="myself.com?mobile=true" rel="external" >

但是因为我无法运行一些我想要的代码来更改 cookie，我不得不传递一个查询字符串参数，在预初始化时检查它，然后设置我的页面也在预初始化时查看的 cookie并翻转母版。

下面是我的完整解决方案，以防有人在那里做完全相同的事情。请注意，因为我的网站使用别名，所以我必须阅读 Request.RawUrl 并自己解析它，因为 Request.QueryString 对象不包含我传递的值。

    // reusable function that parses a string in standard query string format(foo=bar&dave=awesome) into a Dictionary collection of key/value pairs
    // return the reference to the object, you have to assign it to a local un-instantiated name
    // will accept a full url, or just a query string
    protected Dictionary<string, string> parseQueryString(string url)
    {
        Dictionary<string, string> d = new Dictionary<string, string>();

        if (!string.IsNullOrEmpty(url))
        {
            // if the string is still a full url vs just the query string
            if (url.Contains("?"))
            {
                string[] urlArray = url.Split('?');
                url = urlArray[1]; // snip the non query string business away
            }

            string[] paramArray = url.Split('&');

            foreach (string param in paramArray)
            {
                if (param.Contains("="))
                {
                    int index = param.IndexOf('=');
                    d.Add(param.Substring(0, index), param.Substring(++index));
                }
            }
        }
        return d;
    }

然后我只使用我的字典对象来评估和重建我的 url 与相反的移动值，动态设置切换链接上的 href。有些代码显然被遗漏了，但从 Angular 来看，base._iPage.QueryStringParams 保存我返回的字典对象，而 base._iPage.IsMobile 只是一个 bool 属性，我也通过我使用的页面接口(interface)拥有它，我的所有页面，和用户控件等可以与之交谈。

        // get the left side fo the url, without querystrings
        StringBuilder url = new StringBuilder(Request.RawUrl.Split('?')[0]);

        // build link to self, preserving query strings, except flipping mobile value
        if (base._iPage.QueryStringParams.Count != 0)
        {
            if (base._iPage.QueryStringParams.ContainsKey("mobile"))
            {
                // set to opposite of current
                base._iPage.QueryStringParams["mobile"] = (!base._iPage.IsMobile).ToString();
            }

            int count = 0;
            url.Append('?');

            // loop through query string params, and add them back on
            foreach (KeyValuePair<string, string> item in base._iPage.QueryStringParams)
            {
                count++;
                url.Append(item.Key + "=" + item.Value + (count == base._iPage.QueryStringParams.Count ? "" : "&" )); 
            }
        }

        // assign rebuild url to href of toggle link
        viewMobileButton.HRef = url.ToString();
    }

然后在我的 pageinit 这是我实际检查的地方，首先是查询字符串，然后是 cookie，如果两者都不存在，我运行我的移动检测方法，并设置一个 cookie 和我的接口(interface) bool 属性以便于访问到依赖于它的条件。

        QueryStringParams = base.parseQueryString(Request.RawUrl);

        if (QueryStringParams.ContainsKey("mobile") ? QueryStringParams["mobile"].ToLower().Equals("true") : false)
        {
            Cookies.bakeCookie("isMobile", "true"); // create a cookie
            IsMobile = true;
        }
        else if (QueryStringParams.ContainsKey("mobile") ? QueryStringParams["mobile"].ToLower().Equals("false") : false)
        {
            Cookies.bakeCookie("isMobile", "false"); // create a cookie
            IsMobile = false;
        }
        else
        {
            IsMobile = base.mobileDetection();
        }

        if (IsMobile)
            this.Page.MasterPageFile = "m-" + this.Page.MasterPageFile;
    }