Razor MVC 中的动态 CSS

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

Answer 1

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

Answer 2

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.

Answer 3

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.