Passing a ViewModel into CSS File

Question

I read up on Dynamic CSS and found a way to do it on Stack Overflow and adapted it to what I needed.

The data gets loaded into the model no problem but as soon as the debugger hits the view I get the error:

Object is not a reference of an object

Base Controller:

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

    page.Css = GetCss(dummyCorpId);

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

Partial View Return

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);
    }
}

The View:

@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;
    }
}

And the _Layout page:

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

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

As far as I understand, you need to create a custom view engine for rendering you css files with razor view engine.

This SO answer has more information about it: Dynamic Stylesheets Using Razor

edited May 23 '17 at 12:23

Community

1
1

answered May 05 '16 at 12:07

Vitor Rigoni

573
4
14

In that example - where would you store the CSSViewEngine class? In Models or Controllers or does it not matter? – Web Develop Wolf May 05 '16 at 12:13
You may create a separate project for this so you can reuse this DLL in other projects, but really it doesn't matter. Put it whenever you feel it'll make more sense. – Vitor Rigoni May 05 '16 at 12:25

Passing a ViewModel into CSS File

1 Answers1