从 Telerik 组合框 MVC/ASP 中选择主题答案

【问题标题】：Select the theme from a telerik combobox MVC/ASP从 Telerik 组合框 MVC/ASP 中选择主题
【发布时间】：2012-06-27 10:29:03
【问题描述】：

我想实现一个类似于他们演示网站上提供的 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>

按照 Telerik 的指示。我们必须在视图的开头和结尾包括以下几行：

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

上面的功能确实有效，并弹出一条带有所选项目的消息。没问题。

我遇到的问题是头部中的这行代码，如上所示：

@(

  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 函数应该放置一个字符串（其中包含要使用的telerik 样式表的名称。它应该可以工作，但不是。

我什至试图通过以下方式直接解决组合框：

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

这是在他们的网站上完成的。但是还是不行。

对此的任何帮助将不胜感激。提前致谢。

【问题讨论】：

我添加了一个示例，说明您可以在 javascript 函数 cbxTheme_onChange() 中执行哪些操作。
@Daniel - 谢谢丹尼尔，我已经接受了你的回答。

标签： asp.net-mvc asp.net-mvc-3 razor telerik telerik-mvc

【解决方案1】：

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 重新加载页面，然后使用它来设置样式.

将 window.location.href 添加到您的 javascript 函数 cbxTheme_onChange()。

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

【讨论】：