【问题标题】:Is there a better way to dynamically add css in razor than with @if()有没有比 @if() 更好的方法在剃刀中动态添加 css
【发布时间】:2012-04-09 13:09:54
【问题描述】:

我可以在这里优化课堂作业吗?我必须在很多不同的地方这样做,并试图弄清楚如何减少它......复制粘贴/内联。

@foreach(var m in Model.ObjectList)
{
 <td @if(m.RandomObject.isFlagged){
     <text>class="flagged"</text>
     }
 >
  @m.RandomObject.Name @m.RandomObject.Description
 </td>
}

注意不同地方的每个ObjectList都有不同的RandomObjects。

我想这也可以,但似乎仍然不是最佳实践:

<td class="flagged@(m.RandomObject.isFlagged)">...

然后将 css 定义为 .flaggedtrue

【问题讨论】:

    标签: css optimization razor


    【解决方案1】:

    我通常用?ternary operator来做这种事情

    <td class="@(m.RandomObject.isFlagged ? "flagged" : "")">
      ...
    </td>
    

    【讨论】:

    • 虽然很高兴阅读:),但我希望有一种更通用的方法,以避免将每个包含 RandomObject 的 td 标记为条件
    • @TravisJ:无法绕过逻辑;为安德鲁的整洁答案+1。可以抽象成一个辅助方法来增加“整洁”
    • 我想我明白了,所以不是检查每个td 的条件,而是您的第二个建议 - 即输出条件本身并创建包含它的 css 类:&lt;td class="flagged-@(m.RandomObject.isFlagged)"&gt; 会导致 .flagged-true.flagged-false css 类
    • @Andrew - 我提出的这些选项中的任何一个在我看来都过于内联并将视图与一些逻辑混合在一起。我希望以某种方式将逻辑分离回帮助者或类似的东西。也许包含在视图模型中。构建视图后,可能会使用一些 jQuery 或 javascript。我不确定其他人是如何做到这一点的,并且无法找到一个好的示例搜索,所以我问了这个问题。对不起,如果它太模糊了,但我不知道如何表达它。
    • @TravisJ - 在这种情况下,我会使用Razor helperRandomObject 作为参数来保持文档的主要部分干净。但是,在助手中,我想我仍然会使用 ? 三元运算符来插入 css 类
    猜你喜欢
    • 2020-04-09
    • 1970-01-01
    • 2020-03-13
    • 2011-10-19
    • 1970-01-01
    • 1970-01-01
    • 2010-10-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多