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

Aikansh Mann · Accepted Answer · 2019-12-18 05:15:25Z

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, 2019 at 5:15

Aikansh Mann

6666 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saket Kumar · Accepted Answer · 2015-09-22 06:32:41Z

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, 2015 at 6:32

Saket Kumar

4,8816 gold badges38 silver badges61 bronze badges

3 Comments

Vladimir Laktionov Over a year ago

Didn't work. I think the problem is controller side. It works if I use "See edited in main question".

Saket Kumar Over a year ago

Are you trying to say that you are not getting your data from database itself?

Vladimir Laktionov Over a year ago

It's kinda complected to explain I am using this method: stackoverflow.com/questions/10279873/… But I am getting Data from database. just in a complicated way.

Vinay Pratap Singh Bhadauria · Accepted Answer · 2015-09-22 06:55:44Z

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, 2015 at 6:55

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

1 Comment

Vladimir Laktionov Over a year ago

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.

Collectives™ on Stack Overflow

Dynamic CSS in Razor MVC

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related