從telerik組合框中選擇主題MVC/ASP

我想實現類似於演示站點上提供的telerik主題功能的功能。（我有他們的控制完全許可的副本），但我無法找到任何信息如何做到這一點。我有一個MVC應用程序，並在_Layout.cshtml（它沒有我知道的控制器（我希望我錯了））我試圖添加一個組合框填充可用的樣式列表像這樣：從telerik組合框中選擇主題MVC/ASP

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

上面的函數實際上工作並彈出消息與選定的項目。那裏沒問題。

我遇到的問題是此行的head部分的代碼，如上圖所示：

@(

    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)

這是如何在他們的網站上完成的。但它再次無效。

任何幫助，這將是非常appreicated。提前致謝。

來源

2012-06-27 Francis Rodgers

我添加了一個你可以在javascript函數cbxTheme_onChange（）中做什麼的例子。 – Daniel

@丹尼爾 - 謝謝丹尼爾，我接受了你的回答。 –

Telerik在演示網站上這樣做的方式是重新加載頁面並從查詢字符串獲取主題。選擇在下拉列表中選擇主題導致頁面裝載這樣的網址：

http://demos.telerik.com/aspnet-mvc/[control]?theme=[theme]

例如，在標籤欄的例子，選擇主題森林有這個網址。

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（）函數，你可以通過與有主題名稱的查詢字符串的URL重新加載頁面，然後使用該做類似於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>

來源

2012-06-27 14:18:23 Daniel

從telerik組合框中選擇主題MVC/ASP

回答

相關問題