C# 在 Razor 视图中有条件地更改 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11785166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conditionally change CSS class in Razor view
提问by dright
I need to change the CSS class of the <div>tag with the 'forumChild' class. It has to change every 3 loops of the foreach loop.
我需要<div>使用“forumChild”类更改标签的 CSS类。它必须更改 foreach 循环的每 3 个循环。
Is there a way to do this from within the control?
有没有办法从控件中做到这一点？
<div class="Forum">
<p>The Forum</p>
@foreach (var item in Model)
{
<div class="ForumChild">
<img src="@item.Blog.Image.img_path" alt="Not Found" />
<br />
@foreach (var comment in item.Blog.comment)
{
var db = new ACapture.Models.ACaptureDB();
var Name = from p in db.Profile.AsEnumerable()
where (p.AccountID == comment.AccountID)
select p;
<section>
<div>
<a href="@Url.Action("Index", "Home")">@foreach (var y in Name)
{ @(y.FirstName + " " + y.LastName + ":");
}</a>
</div>
<div>
@comment.Commentation
</div>
</section>
}
</div>
}
</div>
Thanks in advance
提前致谢
采纳答案by Shyju
@{
int counter=0;
}
@foreach (var item in Model)
{
counter++;
<div class="@(counter<=3 ? "classRed":"classBlue")">
<img src="@item.Blog.Image.img_path" alt="Not Found" />
//other markup also here
</div>
if (counter == 6)
{
counter = 0;
}
}
Where classRedand classBlueare the CSS classes
凡classRed和classBlue是CSS类
回答by user854301
How we handle this issue:
我们如何处理这个问题：
1) you need to create helper method that will return css class by some code.
1）您需要创建帮助方法，该方法将通过一些代码返回 css 类。
string GetDivClass(int code)
{
var classes = new [] {"first", "second", "third"};
return classes[code];
}
2) create counter/index and increment it in the loop each time.
2）创建计数器/索引并每次在循环中递增。
3) invoke helper method like GetDivClass(index % 3)at the divelement.
3) 像GetDivClass(index % 3)在div元素一样调用辅助方法。
PS
聚苯乙烯
It is only POC, so don't use it in a real application (you need to add a validation logic and move 'classes' initialization to another place).
它只是POC，所以不要在真正的应用程序中使用它（您需要添加验证逻辑并将“类”初始化移动到另一个地方）。
回答by Steve Czetty
You can write any code you like into a Razor view, so to do what you're thinking of, you could do something like this (I left out most of the inner stuff):
您可以将您喜欢的任何代码写入 Razor 视图，因此要按照您的想法进行操作，您可以执行以下操作（我省略了大部分内部内容）：
@{
var className = "ForumChild";
}
<div>
@for (int i = 0; i < Model.Count; i++)
{
var item = Model[i];
if (i % 3 == 0)
className = GetNewClassName(); // Or whatever
<div class="@className">
</div>
}
</div>
回答by HatSoft
You can add a counter variable to will start with 1 and increment in loop. Check with if statement is true by % and change the class name
您可以添加一个计数器变量，以从 1 开始并在循环中递增。通过 % 检查 if 语句是否为真并更改类名
@{ int counter = 1;}
@foreach (var item in Model)
{
if( (counter % 3) ==0 )
{
<div class="ChangedName">
}
else
{
<div class="ForumChild">
}
i++;
