3

一般的なアイデア

私の一般的な考えは、私のサイトのモバイル版とデスクトップ版を用意することです。ユーザーはページ下部のボタンでバージョンを切り替えることができます。サイトの必要なバージョンに応じてテーマを簡単に切り替えることができるように、ASP テーマを使用しています。

問題

テーマを切り替えるのは素晴らしいことですが、マスター ページJavaScriptの次のプロジェクトに既にファイルが含まれているためです。ScriptManager

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

jquery.mobile-1.3.1.min.jsユーザーがデスクトップ バージョンに切り替えると、とが原因で問題が発生しjQueryMobileBehaviour.jsます。2 つの ScriptManagers を使用する方法はありますか (ある種のテーマですが、js ファイル用)?

成功せずに試したこと

私の最初のアプローチは、モバイルJavaScriptファイルを から削除しScriptManager、そのようにモバイル バージョンに切り替えるボタンのクリック イベントに手動で含めることでしたsm.Scripts.Add。

2 番目のアプローチは、JavaScriptそのようなモバイル ファイルをプログラムで削除することでした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);
    }

どちらのアプローチもうまくいきませんでした。

質問を要約すると

  • 私のコードに何か問題がありますか - パスが問題ないと仮定しますか?
  • JavaScriptテーマで行われるように、ファイルを切り替えることができるより良いアプローチはありますか?
4

1 に答える 1

2

私はついに解決策を思いつきました。@Aristosが提案したように、サイトのバージョンに応じて2つ追加<asp:ScriptManager runat="server" ID="sm">して作成してみました。sm.Visible = true/falseただしScriptManager、同じページで 2 つの を使用できませんでした。また、 のプロパティ Visible もありませんScriptManager。

だからここに私がやったことです。

まず、2 つのスクリプト セットを切り替える必要があるため、2 つの別々のスクリプトを作成しましたScriptManagerProxy(2 つの を使用できないためScriptManager)。

デスクトップ版の場合:

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

モバイル版の場合:

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

重要な部分はここから始まります

次に、それらを 2 つの個別のユーザー コントロールに配置し、マスター ページに登録しました。

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

次に、マスター ページの本文に ContentPlaceHolder を挿入しました。これを使用して、必要なバージョンに応じてユーザー コントロールの 1 つを挿入します。

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

最後に、マスター ページの分離コードで、必要なユーザー コントロールをプレースホルダーに追加します。

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

これで、ScriptManagerスイッチャーの準備が整いました。

これが誰かを助けることを願っています。

于 2013-08-20T12:15:05.553 に答える