Question

我想实现类似于其演示网站上提供的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)

这是如何在他们的网站上完成的。但它又无效。

任何有关这方面的帮助都会有很大帮助。提前谢谢。

Answer 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演示页面的内容

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

从telerik组合框MVC / ASP中选择主题

1 个答案: