问题
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.
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>
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>
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.
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()"
))
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.
Any help with this would be much appreicated. Thanks in advance.
回答1:
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
The _Layout.cshtml file has this line (like you mentioned).
.Add("telerik." + Html.GetCurrentTheme() + ".css")
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";
}
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.
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>
来源：https://stackoverflow.com/questions/11224163/select-the-theme-from-a-telerik-combobox-mvc-asp