选择从Telerik的组合框的MVC / ASP主题 [英] Select the theme from a telerik combobox MVC/ASP
问题描述
我要实现类似对他们的演示上提供的Telerik的主题特征的特征。 （我有自己的控件的完全许可副本），但我不能找到如何做到这一点的任何信息。
I want to implement a feature similar to the telerik theme feature available on their demo site. (I have a fully licenced copy of their controls), but I cant find any info on how to do this.
我有一个MVC应用程序，并在_Layout.cshtml（没有控制，我知道（我希望我是错的））我尝试添加填充的可用样式像这样的列表组合框：
I have an MVC application, and in the _Layout.cshtml (which has no controller that I know of (i hope I am wrong)) I am trying to add a combo box populated with a list of available styles like this:
<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的。我们必须包括在开始和我们的观点月底以下行如下：
As directed by Telerik. We must include the following lines at the start and end of our view as follows:
<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的一点点其中工程，但我不能访问它，我需要的方式，这是我的问题是：
Also I have a little bit of JQuery which works but I cant access it the way I need to and this is where my problem is:
<script>
function cbxTheme_onChange()
{
var selectedItemText = $("#cbxTheme").data("tComboBox").text();
var selectedItemValue = $("#cbxTheme").data("tComboBox").value();
alert(selectedItemValue);
return selectedItemText;
}
</script>
其实上面的功能不工作并弹出一条消息，与选定的项目。这里没有问题。
The function above actually does work and pops a message up with the selected item. No problem there.
我遇到的问题是该行的头一节code的如上图所示：
The problem I am having is with this line of code in the head section as shown above:
@(
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的样式表使用的名称。它应该是工作，但事实并非如此。
Where it says "Selected Item from combobox.text here" the javascript function should be placing a string (which contains the name of the telerik style sheet to use. It should be working but it is not.
我甚至想直接说解决组合框：
I even tried to address the combo box directly by saying:
.Add("telerik." + cbxTheme.SelectedItem.text + ".css", ).Combined(true).Compress(true)
这是它是如何在其网站上完成的。但同样它不工作。
which is how it is done on their site. But again it doesnt work.
任何帮助，这将是picated多少AP $ P $。先谢谢了。
Any help with this would be much appreicated. Thanks in advance.
推荐答案
Telerik的做这在演示现场的方法是重新加载页面，并获得来自查询字符串的主题。选择在下拉主题导致页面加载像这样一个网址：
The way Telerik does this on the demo site is by reloading the page and getting the theme from the querystring. Selecting a theme in the dropdown causes the page to be loaded with a url like this:
http://demos.telerik.com/aspnet-mvc/[control]?theme=[theme]
例如，在标签栏的例子，选择主题林中有这个网址。
For example, in the tab strip examples, choosing the theme forest has this url.
http://demos.telerik.com/aspnet-mvc/tabstrip?theme=forest
该_Layout.cshtml文件中有这一行（如你所提到的）。
The _Layout.cshtml file has this line (like you mentioned).
.Add("telerik." + Html.GetCurrentTheme() + ".css")
该Html.GetCurrentTheme（）调用从查询字符串获取主题名称的扩展方法。
The Html.GetCurrentTheme() calls an extension method that gets the theme name from the querystring.
public static string GetCurrentTheme(this HtmlHelper html)
{
return html.ViewContext.HttpContext.Request.QueryString["theme"] ?? "vista";
}
如果你想使用你的JavaScript cbxTheme_onChange（）函数，可以通过重装与具有主题名称的查询字符串的URL页面，然后使用该设置样式做类似于Telerik的演示页的东西
If you wanted to use your javascript cbxTheme_onChange() function, you could do something similar to the Telerik demo page by reloading the page with a url that has a querystring with the name of the theme and then using that to set the style.
在window.location.href添加到您的JavaScript函数cbxTheme_onChange（）。
Add the window.location.href to your javascript function 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主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
