ASP.NETMVC：其他人如何应用条件CSS类？

假设我有两种CSS样式，分别是

一月

和

周二

。我想将它们应用于视图中的一些文本字段，这取决于是否是一月和星期二

选项A：在控制器中执行逻辑，并将样式放入ViewData。

在控制器中：

if( month == Month.January) 
  ViewBag.UserNameCssStyles = "january";
if( today == Day.Tuesday )
  ViewBag.UserNameCssStyles += " tuesday";

ViewBag.IsJanuary = (month == Month.January);
ViewBag.IsTuesday = (today == Day.Tuesday);

并且认为：

@Html.TextBoxFor(model => model.UserName, new { @class = ViewBag.UserNameCssStyles }

选项B：在控制器中执行逻辑并在视图中指定样式？

在控制器中：

ViewBag.IsJanuary = (month == Month.January);
ViewBag.IsTuesday = (today == Day.Tuesday);

并且认为：

@if (ViewBag.IsJanuary && !ViewBag.IsTuesday) 
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "january" })
}
else if (!ViewBag.IsJanuary && ViewBag.IsTuesday)
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "tuesday" })
}
else if(ViewBag.IsJanuary && ViewBag.IsTuesday)
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "january tuesday" })
}
else
{
  @Html.TextBoxFor(model => model.UserName)
}

@string userNameClass = string.Empty;
@userNameClass += ViewBag.IsJanuary ? "january " : "";
@userNameClass += ViewBag.IsTuesday ? "tuesday " : "";

@Html.TextBoxFor(model => model.UserName, new { @class = userNameClass })

我觉得两种方法都不对。第一个选项有一个与显示相关的控制器，并且还锁定了样式，这样处理视图的人就不能更改它们，比如说，添加第三个类。但第二种选择似乎逻辑性很强，因为它只是一种“愚蠢”的观点

---

其他人通常是如何做到这一点的？

选项A-当然

所有逻辑都应放在控制器中。控制器负责通过模型将所有必要的数据传递给视图

---

使用

switch

或创建

和

的静态字典来存储映射，而不是使用多个

if

语句（这有点异味）。

选项C:在控制器中执行逻辑，并在视图中指定样式，但方法更简单：

在控制器中：

if( month == Month.January) 
  ViewBag.UserNameCssStyles = "january";
if( today == Day.Tuesday )
  ViewBag.UserNameCssStyles += " tuesday";

ViewBag.IsJanuary = (month == Month.January);
ViewBag.IsTuesday = (today == Day.Tuesday);

他认为：

@if (ViewBag.IsJanuary && !ViewBag.IsTuesday) 
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "january" })
}
else if (!ViewBag.IsJanuary && ViewBag.IsTuesday)
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "tuesday" })
}
else if(ViewBag.IsJanuary && ViewBag.IsTuesday)
{
  @Html.TextBoxFor(model => model.UserName, new { @class = "january tuesday" })
}
else
{
  @Html.TextBoxFor(model => model.UserName)
}

@string userNameClass = string.Empty;
@userNameClass += ViewBag.IsJanuary ? "january " : "";
@userNameClass += ViewBag.IsTuesday ? "tuesday " : "";

@Html.TextBoxFor(model => model.UserName, new { @class = userNameClass })

---

否则，您的控制器将被视图问题所污染。空类通常是无害的，除非你是google，每个字节都计数。

你考虑过使用jQuery附加css类吗？控制器应该不知道css类名，因为它打破了关注点分离的设计原则

您试图做的是根据日期改变样式，只要您对客户端浏览器上的日期感兴趣，而不是对托管网站的服务器上的日期感兴趣，就可以使用jQuery轻松完成

e、 g.在站点main.js文件中输入以下内容

$(document).ready(function () {
    var today = new Date();
    if (today.getMonth() == 0) $(".dateStyle").addClass("january");
    if (today.getDay() == 2) $(".dateStyle").addClass("tuesday");
});

那么在你看来使用

@Html.TextBoxFor(model => model.UserName, new { @class = "dateStyle" }

---

如果您真的需要它根据服务器上的日期而变化，那么如果您想采用这种方法，您需要通过JSON对象将存储在ViewBag中的值传递给javascript。

我知道这已经很旧了，但我也有同样的问题，发现所有这些选项都非常丑陋——特别是考虑到如果第一个条件为假，第二个条件为真，你会得到类似的结果

class=" className"

（注意类名前的空格）

我创建了一个HtmlHelper来解决我的问题：

public static IHtmlString ClassString(this HtmlHelper helper, Dictionary<string, bool> classes)
{
    return new HtmlString(string.Join(" ", classes.Where(c => c.Value).Select(c => c.Key)));
}

然后可以按如下方式使用这些参数：

@{
    var classes = new Dictionary<string, bool>() {
        { "january", month == Month.January },
        { "tuesday", today == Day.Tuesday }
    }
}
<div class="@Html.ClassString(classes)">...</div>
// OR
@Html.TextBoxFor(model => model.UserName, new { @class = Html.ClassString(classes) })
// OR (for a single condition)
<div class="@Html.ClassString("january", month == Month.January)">...</div>
// OR
@Html.TextBoxFor(model => model.UserName, new { @class = Html.ClassString("january", month == Month.January) })

@{
var classes=newdictionary（）{
{“一月”，月==一月}，
{“星期二”，今天==天。星期二}
}
}
...
//或
@Html.TextBoxFor（model=>model.UserName，新的{@class=Html.ClassString（classes）}）
//或（针对单一条件）
...
//或
@TextBoxFor（model=>model.UserName，新的{@class=Html.ClassString（“一月”，月==month.january）}）

date只是我提出的一个简单的例子，可以将这个问题归结为一个小问题。实际的问题是：有条件地将类应用于HTML元素：最好的方法是什么？好的，那么更多的问题是如何根据模型数据的变化来改变CSS。然后我会将显示逻辑放在视图中，即选项B，但构建css类名的方式与Todd建议的类似。对我来说，重要的是控制器不知道css类名。这是正确的答案，IMHO。UI类的选择是视图的责任，而不是控制器的责任。当控制器承担这一责任时，很快就会导致代码膨胀。让视图确定哪些类将应用于其上存在的控件。。。这就是我的工作。