0

概要

asp.net 4.0 でボタン イベントを介してマスター ページをめくると、スタイルの問題が発生します。新しいマスターは切り替わりますが、古いマスターの CSS は残ります。古いマスターのヘッド内でスタイルが定義されているため、これがどのように発生するのか理解できません。マークアップを介して、まったく異なるスタイルのセットであるはずの新しいマスターが表示されていることがはっきりとわかります。また、ソースを表示すると、head にすべての新しい 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 Mobile Scripts に関連していることがわかりました。JQuery Mobile には、ページを結合するこの方法があります。私はそれを完全には理解していません。彼らはそれをページ遷移に使用していると思いますが、それが私の新しい CSS の登録を妨げています。オフにすると、css が含まれているマスターページが正常に反転します。リダイレクトの前に JQuery Mobile をオフにする方法を検討しています。まだ方法を確認してください。

4

1 に答える 1

1

この問題は、ページ遷移のための JQuery Mobile AJAX に関連していました。JQuery Mobile は、最初のページ以降の追加のページ リクエストでドキュメントのヘッドをロードしません。

そのため、モバイル マスターをデスクトップ マスターに切り替えると、ドキュメントのヘッドがロードされず、スタイルが取り込まれませんでした。これを修正するには、いくつかの方法があります。

この方法では、AJAX を完全にオフにして問題を解決できますが、その恩恵を受けることはできません。

<form data-ajax="false">

これは問題のある方法ですが、JQuery Mobile の初期化後はイベント経由では機能しないため、これを利用することはできません。

$.mobile.ajaxEnabled = false;

onclick イベントとイベント ハンドラーを使用する必要がある場合、最初にページをリダイレクトすると、私がサポートする上記の 2 つのソリューションが機能する可能性があります。

より良い解決策は、リンクに rel="external" を追加して、それが発信リンクであることを JQM に伝えることです。

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

しかし、Cookie を変更するために必要なコードを実行できなかったため、クエリ文字列パラメーターを渡し、preinit で確認してから、ページが preinit で参照する Cookie を設定し、主人。

誰かがまったく同じことをしている場合に備えて、以下に私の完全な解決策を示します。私のウェブサイトはエイリアシングを使用しているため、Request.RawUrl オブジェクトに渡した値が含まれていなかったため、Request.RawUrl を読み取って自分で解析する必要がありました。

    // 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 は単なる bool プロパティであり、私が使用するページ インターフェイスを介して、すべてのページ、ユーザーコントロールなどと対話できます。

        // 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;
    }
于 2013-03-08T20:04:26.620 に答える