.NET MVC:如何为每个用户实现不同的页面外观?

时间:2010-01-07 13:52:56

标签: asp.net-mvc css dynamic c#-3.0 appearance

我的想法已经不多了。也许你可以告诉我使用什么模式或方法。

用户应该能够登录并更改其个人资料的仅外观。 个性化的差异(AFAIK)是仅针对编辑者(他/她自己)看到的个性化布局。 我猜,皮肤之间的区别在于皮肤是预定义的,但用户应该能够自己更改设置。

我需要能够向访问作者页面的每个人显示自定义布局。

好的解决方案是将布局信息保存在数据库表中。它也应该被缓存我想从数据库中加载并在CSS中使用。

由于

修改

好的,我现在做了一些研究。想出了这样的想法。

在视图中从DB获取userId(Guid类型)并将其设置为ViewData: ViewData [“userId”] = profile.userId;

View使用以下称为“Profile.Master”的MasterPage并链接到动态CSS文件:

    <link href="<%= Url.Action("Style", "Profile", 
        ViewData["userId"]) %>" rel="stylesheet" type="text/css" />
</head>

在ProfileController中从DB获取CSS数据并将其返回到动态CSS视图:

public ActionResult Style(Guid userId)
{
    var styles = (from s in Db.UserStyleSet.OfType<UserStyle>()
                  where s.aspnet_Users.UserId == userId
                  select s);

    return View("Style", styles);
}

问题是UserId永远不会传递给动态CSS链接:

参数字典包含非可空类型'System.Guid'的参数'userId'的空条目,用于'Project.Controllers.ProfileController'中方法'System.Web.Mvc.ActionResult Style(System.Guid)'

欢迎任何建议,谢谢。

4 个答案:

答案 0 :(得分:2)

在Rob Conery开发的Kona项目中可以找到非常简洁的布局自定义功能。当您运行you can find here的源代码时,您将看到布局管理UI,它允许您更改屏幕上每个组件的位置。

使用的方法如下:

  1. 当页面呈现时,我们的自定义视图引擎会检查哪个母版页应该出现(这样我们就可以根据当前设置切换主题)

        public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache) {
        ViewEngineResult result = null;
        var request = controllerContext.RequestContext;
        if (controllerContext.Controller.GetType().BaseType == typeof(KonaController)) {
            var orchardController = controllerContext.Controller as KonaController;
            string template = orchardController.ThemeName;
    
  2. 视图引擎使用母版页并呈现由使用路径表解析的特定控制器操作定义的视图。例如,我们键入了指向Home Controller,Index方法的站点的主URL。此方法返回由View引擎呈现的Index.aspx视图。

  3. 当视图引擎呈现Index.aspx页面时,它会启动辅助方法,如

    &LT;%this.RenderWidgets( “sidebar1”); %取代。

  4. 此方法确实负责在aspx页面中为每个div渲染特定的widdgets。这样,如果您的用户更改了小部件的布局,它们将在屏幕上正确显示。

            public static void RenderWidgets(this ViewPage pg,  Kona.Infrastructure.Page page, bool useEditor, string zone) {
            if (page != null) {
                foreach (IWidget widget in page.Widgets.Where(x => x.Zone.Equals(zone, StringComparison.InvariantCultureIgnoreCase))) {
    
                    string viewName = useEditor ? widget.EditorName : widget.ViewName;
    
    
                    if (widget.ViewName != null) {
                        if (widget.IsTyped) {
                            var typedWidget = widget as Widget<IList<Product>>;
                            pg.Html.RenderPartial(viewName, typedWidget);
                        } else {
                            pg.Html.RenderPartial(viewName, widget);
                        }
                    } else if (!string.IsNullOrEmpty(widget.Title)) {
                        pg.Html.RenderPartial("TitleAndText", widget);
    
                    } else {
                        pg.Html.RenderPartial("TextOnly", widget);
                    }
                }
            }
        }
    

    用户如何更改布局? Kona有非常简洁的javascript,它与Ajax一起使用,用户只需将小部件从一个面板拖放到另一个面板即可重新排列布局。

答案 1 :(得分:0)

您可以使用CMS框架。有关建议,请参阅this question

答案 2 :(得分:0)

您可以动态构建CSS文件并将css名称保存在用户的db条目中。

答案 3 :(得分:0)

您需要多少定制?一次将整个css存储在数据库1样式中似乎有点矫枉过正,您确定您的用户真的需要/想要这种级别的自定义吗?

呈现主题列表,允许用户选择他们想要的主题,然后将该信息与用户配置文件一起存储,这样当您检索配置文件详细信息时,您也可以检索主题。然后,可以使用此信息选择适当的主数据,并将其传递给视图以呈现正确的样式表。

如果您真的想要允许极端自定义到单个样式级别,我会使用默认的css,然后当用户自定义其布局时,复制默认值并根据需要更改,为用户创建自定义css。每次用户更新其配置文件布局时,只需使用更改更新css文件。为了绕过css缓存,记录每个更改的递增版本号,并将其附加到css的url的末尾,例如: <link rel="stylesheet" href="user001.css?v=2>