1

デモ サイトで利用できる Telerik テーマ機能に似た機能を実装したいと考えています。（私は彼らのコントロールの完全にライセンスされたコピーを持っています）が、これを行う方法に関する情報を見つけることができません.

私は MVC アプリケーションを持っており、_Layout.cshtml (私が知っているコントローラーがありません (私が間違っていることを願っています)) に、次のような使用可能なスタイルのリストが入力されたコンボ ボックスを追加しようとしています:

    <section id="Login">
        @if (Request.IsAuthenticated)
           {
                <section id="loginImage">
                    <img src="../../Content/Images/BlankPerson.jpg" />
                </section>
                <section id="loginText">
                    [ @Html.ActionLink("Log Off", "LogOff", "Account") ]
                    <br />
                    @User.Identity.Name!

                    @(
                        /* TELERIK COMBOBOX */

                        Html.Telerik().ComboBox()
                        .Name("cbxTheme")
                        .Placeholder("Select Theme...")
                        .SelectedIndex(0)
                        .ClientEvents(events => events.OnChange("cbxTheme_onChange"))
                        //.BindTo((IEnumerable<DropDownItem>)ViewData["Files"])
                        .Items(item =>
                            {
                                item.Add().Text("black");
                                item.Add().Text("common");
                                item.Add().Text("default");
                                item.Add().Text("forest");
                                item.Add().Text("hay");
                                item.Add().Text("metro");
                                item.Add().Text("office2007");
                                item.Add().Text("office2010black");
                                item.Add().Text("office2010blue");
                                item.Add().Text("office2010silver");
                                item.Add().Text("outlook");
                                item.Add().Text("rtl");
                                item.Add().Text("simple");
                                item.Add().Text("sitefinity");
                                item.Add().Text("sunset");
                                item.Add().Text("telerik");
                                item.Add().Text("transparent");
                                item.Add().Text("vista");
                                item.Add().Text("web20");
                                item.Add().Text("webblue");
                                item.Add().Text("windows7");
                            })
                    )
                </section>                  
           }
    </section>

テレリックの指示通り。次のように、ビューの最初と最後に次の行を含める必要があります。

<head>
@(

  Html.Telerik().StyleSheetRegistrar()
                .DefaultGroup(group => group
                .Add("telerik.common.css")
                .Add("telerik.black.css").Combined(true).Compress(true)
                .Add("telerik." +   + ".css", ).Combined(true).Compress(true)
                //.Add("telerik." + Html.GetCurrentTheme() + ".css").Combined(true).Compress(true)


                //"javascript:cbxTheme_onChange()"
                ))

</head>

.
.
.
.


<body>
@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))
</body>

また、動作するJQueryが少しありますが、必要な方法でアクセスできません。これが私の問題です。

<script>
    function cbxTheme_onChange()
    {
        var selectedItemText = $("#cbxTheme").data("tComboBox").text();
        var selectedItemValue = $("#cbxTheme").data("tComboBox").value();
        alert(selectedItemValue);

        return selectedItemText;
    }

</script>

上記の関数は実際に機能し、選択したアイテムを含むメッセージをポップアップ表示します。問題ありません。

私が抱えている問題は、上記のように head セクションの次のコード行にあります。

@(

  Html.Telerik().StyleSheetRegistrar()
                .DefaultGroup(group => group
                .Add("telerik.common.css")
                .Add("telerik.black.css").Combined(true).Compress(true)
                .Add("telerik." + "SELECTED ITEM FROM COMBOBOX.TEXT HERE"  + ".css", ).Combined(true).Compress(true)
                //.Add("telerik." + Html.GetCurrentTheme() + ".css").Combined(true).Compress(true)


                //"javascript:cbxTheme_onChange()"
                ))

「ここにcombobox.textから選択されたアイテム」と表示されているところに、javascript関数が文字列を配置する必要があります(これには、使用するテレリックスタイルシートの名前が含まれています。動作するはずですが、動作していません.

次のように言って、コンボボックスに直接対処しようとさえしました：

 .Add("telerik." + cbxTheme.SelectedItem.text  + ".css", ).Combined(true).Compress(true)

これは彼らのサイトで行われている方法です。しかし、やはりうまくいきません。

これに関するヘルプは大歓迎です。前もって感謝します。

4

1 に答える 1

3

Telerik がデモ サイトでこれを行う方法は、ページをリロードして、クエリ文字列からテーマを取得することです。ドロップダウンでテーマを選択すると、次のような URL でページが読み込まれます。

http://demos.telerik.com/aspnet-mvc/[control]?theme=[theme]

たとえば、タブ ストリップの例で、テーマ フォレストを選択すると、この URL が表示されます。

http://demos.telerik.com/aspnet-mvc/tabstrip?theme=forest

_Layout.cshtml ファイルにはこの行があります (前述のように)。

.Add("telerik." + Html.GetCurrentTheme() + ".css")

Html.GetCurrentTheme() は、クエリ文字列からテーマ名を取得する拡張メソッドを呼び出します。

public static string GetCurrentTheme(this HtmlHelper html)
{
    return html.ViewContext.HttpContext.Request.QueryString["theme"] ?? "vista";
}

JavaScript の cbxTheme_onChange() 関数を使用する場合は、Telerik のデモ ページと同様に、テーマの名前を持つクエリ文字列を持つ URL でページをリロードし、それを使用してスタイルを設定できます。

javascript 関数 cbxTheme_onChange() に window.location.href を追加します。

<script>
  function cbxTheme_onChange() {
    var selectedItemValue = $("#cbxTheme").data("tComboBox").value();
    window.location.href = window.location.protocol + '//' 
      + window.location.host + window.location.pathname 
      + '?theme=' + selectedItemValue;
  }
</script>
于 2012-06-27T14:18:23.283 に答える