Dynamic CSS in Razor MVC

Question

I am trying to get different css on input. using Custom razor view Engine. and it works if I just take data from Database from 1 collction. but I want to alternate the CSS for lets say different users.

I was using custom Foo.CSCSS as view where my razor CSS was held. And MyViewModel gets data from DB.

Like this.

public MongoDatabase Mongo;
    [HttpPost]
            public ActionResult Foo(string Input)
            {
                var collection = Mongo.GetCollection<MyViewModel>(Input);
                var model = collection.FindAll().ToList<MyViewModel>().FirstOrDefault();
    return View(model);

    @using (Html.BeginForm("Foo", "Styles", FormMethod.Post))
    {
        <fieldset>
            <label for="sub">Get you CSS.</label>
            <br />
            <input id="txtEmail" type="text" name="Input" placeholder="Type in an CSS collection" required>
            <input type="submit" name="submit" value="Press">
        </fieldset>

Returns me a CSS as view instead of just inserting it as CSS.

@model CustomViewEngine.Models.MyViewModel

body {
    background-color: red;
}

div.col-md-4 {
    background-color: @Model.BGColor;
    text-decoration: @Model.TextDec;
    border-style: @Model.BRDStyle;
    border-width: @Model.BRDWidth;
}
div.yo {
background-color: blue;
}

Is there a fix for that?

public ActionResult Foo()
        {
            var collection = Mongo.GetCollection<MyViewModel>("CollectionName");
            var model = collection.FindAll().ToList<MyViewModel>().FirstOrDefault();
return View(model);

Like this it works and gets data from DB. And uses it as CSS. I probably failed to explain the CSS is not exactly CSS it's a custom extension Foo.CSCSS, I parse and feed as View.

I took This as Example Dynamic Stylesheets Using Razor

score 2 · Answer 1 · answered Dec 18 '19 at 05:15

2

@{
  var thiscss="by default class name";
  if(@model.css=="css1"){
    thiscss = "css1";
  }
  if(@model.css == "css2")
  {
    thiscss ="css2";
  }
}
<div class="@thiscss">
   Help
</div>

answered Dec 18 '19 at 05:15

Aikansh Mann

606
6
12

score 0 · Answer 2 · answered Sep 22 '15 at 06:32

0

I think you need to wrap your dynamic css section inside <style> attribute. From my end, I tried something like below and it worked:

<style>
    div.col-md-4 {
       background-color: @Model.BGColor;
       text-decoration: @Model.TextDec;
       border-style: @Model.BRDStyle;
       border-width: @Model.BRDWidth;
     }
</style>

Please comment if issue is still not fixed.

answered Sep 22 '15 at 06:32

Saket Kumar

4,363
4
32
55

Didn't work. I think the problem is controller side. It works if I use "See edited in main question". – Vladimir Laktionov Sep 22 '15 at 06:44
Are you trying to say that you are not getting your data from database itself? – Saket Kumar Sep 22 '15 at 06:52
It's kinda complected to explain I am using this method: http://stackoverflow.com/questions/10279873/dynamic-stylesheets-using-razor But I am getting Data from database. just in a complicated way. – Vladimir Laktionov Sep 22 '15 at 06:55

score 0 · Answer 3 · answered Sep 22 '15 at 06:55

0

In MVC you can make your sections render based on condition, code and be mixed with html eaisly, so just move your styles in the css files and render the files based on conditions.

if(some condition is true)
{
render a style here
}
else if(other condition)
{
render other style
}
else
{
default style
}

you can also put this in your layout page, these condition can be anything, like you said user type checks ad all.

answered Sep 22 '15 at 06:55

Vinay Pratap Singh Bhadauria

9,829
3
28
49

But CSS doesn't accept DB data, I think. That is why I am using this strange method. I tried this with .Less but couldn't make it run. – Vladimir Laktionov Sep 22 '15 at 07:00

Dynamic CSS in Razor MVC

3 Answers3