asp.net 移动/桌面站点切换按钮，切换母版页，但样式“卡住”

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

我在底部有一个“完整站点”按钮，可让您在移动视图和桌面视图之间来回切换。单击它时，我更改了 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 移动脚本有关。 JQuery Mobile 有这种将页面绑定在一起的方式。我不完全理解它，我认为他们将它用于页面转换，并且它阻止了我的新 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 的代码，所以我必须传递一个查询字符串参数，在 preinit 上检查它，然后设置我的页面也在 preinit 上查看的 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。一些代码显然被遗漏了，但是从角度来看， base._iPage.QueryStringParams 保存了我返回的字典对象，而 base._iPage.IsMobile 只是一个布尔属性，我也通过我使用的页面接口拥有我所有的页面，和用户控件等可以交谈。

        // 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，以及我的接口 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;
    }