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>

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

这就是在他们的网站上完成的方式。但同样它不起作用。

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

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

将 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>
于 2012-06-27T14:18:23.283 回答