Razor MVC中的动态CSS

Question

我正在尝试在使用自定义Razor视图引擎时为输入获取不同的CSS。如果只从一个集合中的数据库中取数据，那么它是有效的。但是我想要为不同的用户交替使用CSS。

我使用自定义的Foo.CSCSS作为视图，在其中保存我的Razor CSS。而MyViewModel从数据库获取数据。

就像这样。

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>

将CSS作为视图返回，而不仅仅将其插入为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;
}

有没有解决方法？

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

这样它可以从数据库中获取数据并将其用作CSS。它使用的不是正常的CSS，而是自定义扩展Foo.CSCSS，我将其解析并作为View提供。

我以此为例动态使用 Razor 的样式表

- Vladimir Laktionov

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>

- Aikansh Mann

Answer 2

我认为您需要将动态CSS部分包含在<style>属性中。从我的角度来看，我尝试了类似下面的内容，并且它奏效了：

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

请在下方留言，如果问题仍未解决。

- Saket Kumar

---

没起作用。我认为问题在控制器端。如果我使用“在主要问题中编辑”它就可以工作。 - Vladimir Laktionov

你是想说你没有从数据库本身获取数据吗？ - Saket Kumar

有点复杂，很难解释我正在使用这种方法：https://dev59.com/Q2kv5IYBdhLWcg3w40wY 但是我正在以一种复杂的方式从数据库获取数据。 - Vladimir Laktionov

Answer 3

在MVC中，您可以根据条件、代码和HTML轻松混合来使您的部分呈现，因此只需将样式移动到CSS文件中，并根据条件呈现文件即可。

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

你也可以把它放在你的布局页面中，这些条件可以是任何东西，比如你说的用户类型检查广告等。

- Vinay Pratap Singh Bhadauria

---

但是CSS不接受数据库数据，我认为这就是我使用这种奇怪方法的原因。我尝试过使用.Less，但无法使其运行。 - Vladimir Laktionov