Telerik样式在ASP.NET MVC中具有多个视图

时间:2012-06-28 17:03:43

标签: c# asp.net-mvc asp.net-mvc-3 telerik telerik-mvc

previous post中,我无法通过从下拉列表中选择样式,在telerik demo site上设置样式上的样式。这回答了,但我现在有一个新的但相关的问题。

我的网站上有多个页面(这是MVC常见的),每个页面上都有许多telerik控件。允许用户使用为我完成的预定义css为网站设置样式非常棒,这为我节省了大量工作。

问题在于,当我从一个页面移动到另一个页面时,telerik使用的组合框会重置为其默认值,因此每次用户更改页面时都会重置网站上的样式(不理想)。

我尝试使用会话来存储状态,但是无法像标准的aspx开发一样检测回发。所以我不能这样做:

if(isPostBack)
{
    if(string.isNullOrEmpty(Session["MyTheme"]+""))
    {
        Session["MyTheme"]="black";
    }
    else
    {
        Session["myTheme"]=//Some combo box selected value
    }
}

即使我可以,组合框onChange事件也是通过JavaScript处理的,但Telerik控件需要C#Razor并尝试我的格式,我不能让他们说话并分享一个简单的价值。

最终,我想要做的就是让用户从组合框中选择一个主题,从那时起,该主题将在整个网站中被记住,直到他们下次更改为止。

我已经尝试过查询字符串和会话,但由于我无法在JavaScript中访问它们,因此无法正常工作。显然它们只在服务器端使用。

我尝试过Cookie,但这不起作用,因为我无法在C#Razor中访问它们。显然他们只是客户方。

以下是我的代码:

<head>
@(
  Html.Telerik().StyleSheetRegistrar()
                .DefaultGroup(group => group
                .Add("telerik.common.css")
                .Add(string.IsNullOrEmpty(@Html.ViewContext.HttpContext.Request.QueryString["theme"]) ? "telerik.black.css" : "telerik."+@Html.ViewContext.HttpContext.Request.QueryString["theme"]+".css").Combined(true).Compress(true)
                ))
</head>


<body>
                    @(
                        /* TELERIK COMBOBOX */

                        Html.Telerik().ComboBox()
                        .Name("cbxTheme")
                        .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");
                            })
                    )

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))

</body>

<script type="text/javascript">
function cbxTheme_onChange()
{
    var selectedItemText = $("#cbxTheme").data("tComboBox").text();
    //var selectedItemValue = $("#cbxTheme").data("tComboBox").value();
    window.location.href = window.location.protocol
                         + '//'
                         + window.location.host
                         + window.location.pathname
                         + '?theme='
                         + selectedItemText;
}
</script>

正如我所解释的那样,它在大多数情况下都能正常工作。当我点击likn到另一页时执行。然后一切都恢复到预设的默认值。

理想情况下,我在寻找的是在组合框中选择新项目时进行回发的方法(如在JavaScript中)。样式已更改,因此无论如何都需要刷新整个页面。这有效。但是当我移动到另一个页面时,它会重置为默认样式。所以我需要一种方法来存储客户端或服务器端的所选样式(首选,因为我的页面以这种方式加载)。

我已经读过这可以通过使用控制器来完成,但目前尚不清楚如何。如果可能的话我想要控制器方法,因为我将使用控制器动态加载CSS样式列表,允许用户下载其他样式,它们将自动添加到列表中。所以沿着这条线的任何东西都会很棒。

1 个答案:

答案 0 :(得分:2)

您可以使用静态属性创建一个静态类,该静态属性将充当全局属性。

public static class MyTheme
{
    public static string MyGlobalTheme { get; set; }
}

或者你可以使用Application类。

Application["MyTheme"] = "black";

您可以将此代码放在_Layout.cshtml中。如果您的项目名称是TProj并且您的静态类位于名为Objects的文件夹中,则它看起来像这样。

_Layout.cshtml

@{
  if (@Html.ViewContext.HttpContext.Request.QueryString["theme"] != null)
  {
    TProj.Objects.MyTheme.MyGlobalTheme = Html.ViewContext.HttpContext.Request.QueryString["theme"];
  }
  else
  {
    if (TProj.Objects.MyTheme.MyGlobalTheme == null)
    {
      TProj.Objects.MyTheme.MyGlobalTheme = "black";
    }
  }
}

现在在_Layout.cshtml之后,您可以使用字符串@ TreasuryReportsMvc.Objects.MyTheme.MyGlobalTheme,即使您转到另一个页面也应该保持不变。 _Layout.cshtml可能不是这个逻辑的最佳位置。你应该考虑它对你的项目最有意义的地方。

请注意,许多人不赞成全局变量。 This question对Asp.Net MVC全局变量进行了很好的讨论。