将ViewModel传递给CSS文件

时间:2016-05-05 11:22:10

标签: c# css asp.net-mvc-4 razor

我阅读了动态CSS,并找到了一种方法在Stack Overflow上完成它,并根据我的需要进行调整。

数据加载到模型中没有问题,但是一旦调试器点击视图我就会收到错误:

  

对象不是对象的引用

基础控制器:

public ActionResult CssDynamic()
{
    Layout page = new Layout();
    var dummyCorpId = 80;

    page.Css = GetCss(dummyCorpId);

    var model = page;
    return new CssViewResult(model);
}

部分视图返回

public class CssViewResult : PartialViewResult
{
    private readonly object model;

    public CssViewResult(object model)
    {
        this.model = model;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        context.HttpContext.Response.ContentType = "text/less";
        base.ExecuteResult(context);
    }
}

观点:

@model SpecCheck.Portals.Web.UI.ViewModels.Layout 

//BRAND COLOURS///////////////////////////////////////////////////////////
//One---------------------------------------------------------------------
@@brand1: #@Model.Css.CssBrandColor1;
@@brand1dark: darken(@@brand1, 25%);
@@brand1darker: darken(@@brand1, 50%);
@@brand1light: lighten(@@brand1, 25%);
@@brand1lighter: lighten(@@brand1, 50%);
//Two--------------------------------------------------------------------
@@brand2: #@Model.Css.CssBrandColor2;
@@brand2dark: darken(@@brand2, 25%);
@@brand2darker: darken(@@brand2, 50%);
@@brand2light: lighten(@@brand2, 25%);
@@brand2lighter: lighten(@@brand2, 50%);

//ADDITIONAL COLORS//////////////////////////////////////////////////////
//Mono--------------------------------------------------------------------
@@blk: #000000;
@@wht: #FFFFFF;
//Additional Bobcat Colours (Non-Brand)-----------------------------------
@@addColour1: #@Model.Css.CssAddColor1;
@@addColour2: #@Model.Css.CssAddColor2;
@@addColour3: #@Model.Css.CssAddColor3;
//Feedback Colors---------------------------------------------------------
@@success: #00cc00;
@@warning: #ffdb4d;
@@danger: #ff4d4d;

//TEXT////////////////////////////////////////////////////////////////////
//Properties--------------------------------------------------------------
@@fontcolour: @Model.Css.CssFontColor;
@@fontsize: @Model.Css.CssFontSize px;
@@fontfamily: @Model.Css.CssFontFamily;
@@fontweight: @Model.Css.CssFontWeight;

//BUTTONS/////////////////////////////////////////////////////////////////
.button {
    border: 0 none;
    border-radius: 2px 2px 2px 2px;
    color: @@brand1;
    cursor: pointer;
    display: inline-block;
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
    padding: 7px 10px;
    text-transform: none;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    width: auto;
    background: none repeat scroll 0 0 @@brand2;
    white-space: nowrap;
    font-variant: small-caps;
    &:hover {
    background-color: @@brand2darker;
    color: @@brand1lighter;
    text-decoration:underline;
    }
}

和_Layout页面:

<link href="@Url.Action("CssDynamic", "Base")" rel="stylesheet" type="text/less"/>

1 个答案:

答案 0 :(得分:1)

据我了解,您需要创建一个自定义视图引擎,以便使用剃刀视图引擎呈现css文件。

这个SO答案提供了更多相关信息:Dynamic Stylesheets Using Razor