C# Razor View 动态表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9198549/
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
Razor View dynamic table rows
提问by esastincy
I want have a table in my view that is going to put 3 elements from my Model in each row. So the way I was going to do this is to loop through the model and inside of the foreach loop do a check on a count variable I have set up. If count mod 3 == 0 I would do something like </tr><tr>to start a new row. This isn't working the way I want it to because I would have a }following the <tr>. So basically my question is, how would I create a dynamic table inside of a razor view based on the elements in the model where each row has 3 items?
我想在我的视图中有一个表格，它将在每行中放置我模型中的 3 个元素。所以我打算这样做的方法是遍历模型并在 foreach 循环内部检查我设置的计数变量。如果 count mod 3 == 0 我会做一些类似</tr><tr>开始新行的事情。这不是我想要的方式，因为我会}关注<tr>. 所以基本上我的问题是，我将如何根据模型中每行有 3 个项目的元素在剃刀视图中创建一个动态表？
@{
int count = 0;
<div>
<table>
<tr>
@foreach (var drawing in Model)
{
<td style="width:240px;margin-left:30px; margin-right:30px;">
<img src="@Url.Action("GetImage", "Home", new { id = drawing.drw_ID })" alt="drawing" />
</td>
count++;
if(count%3==0)
{
</tr>
<tr>
}
}
</tr>
</table>
</div>
}
Maybe there is a much easier way of doing this that I am not thinking of
也许有一种更简单的方法可以做到这一点，我没有想到
采纳答案by eouw0o83hf
How about using two loops - this will make your document be setup much more nicely and make it a bit more readable. Also, it takes care of the problems that occur if the number of rows is not divisible by three:
如何使用两个循环 - 这将使您的文档设置得更好，并使其更具可读性。此外，如果行数不能被 3 整除，它会处理出现的问题：
<div>
<table>
@for(int i = 0; i <= (Model.Count - 1) / 3; ++i) {
<tr>
for(int j = 0; j < 3 && i + j < Model.Count; ++j) {
<td style="width:240px;margin-left:30px; margin-right:30px;">
<img src="@Url.Action("GetImage", "Home", new { id = Model[i + j].drw_ID })" alt="drawing" />
</td>
}
</tr>
}
</table>
</div>
Edited to reflect your pasted code. Note, this assumes the model implements IListor an array
编辑以反映您粘贴的代码。请注意，这假设模型实现IList或数组
回答by Christian
Maybee this is the solution you are looking for works for me
也许这是您正在寻找的解决方案适合我
@{
int count = 0;
**
var tr = new HtmlString("<tr>");
var trclose = new HtmlString("</tr>");
**
<div>
<table>
<tr>
@foreach (var drawing in Model)
{
<td style="width:240px;margin-left:30px; margin-right:30px;">
<img src="@Url.Action("GetImage", "Home", new { id = drawing.drw_ID })" alt="drawing" />
</td>
count++;
if(count%3==0)
{
**
trclose
tr
**
}
}
</tr>
</table>
</div>
}
回答by sameer
Check this out, this should work for you !!!
看看这个，这应该对你有用！！！
<h2>Index</h2>
<table>
<tr>
@{
var index = 0;
}
@foreach (int num in Model)
{
if ((index % 10) == 0)
{
@Html.Raw("</tr>");
@Html.Raw("<tr>");
}
<td>
<h2>@num</h2>
</td>
index++;
}
</tr>
</table>
回答by Sandeep
The @christian solution worked for me.I was not sure of "trclose" and "tr" hence posting here the solution that worked for me in razor view.
@christian 解决方案对我有用。我不确定“trclose”和“tr”，因此在这里发布了在剃刀视图中对我有用的解决方案。
<table>
<tr><td><input type="checkbox" id="chkAssetCategories" /> SELECT ALL</td></tr>
<tr>
@{
var count=0;
foreach (var item in Model.AssetCategories)
{
<td><input type="checkbox" class = "Catgories" id='@item.ID' value ='@item.ID' /><label>@item.Name</label></td>
if (count%5 == 0)
{
@:</tr><tr>
}
count++;
}
}
</table>
回答by Shivangi Singh
@{ int counter = 0;}
<div>
<table>
@for(int i = 0; i <= (Model.Count - 1) / 3; ++i) {
<tr>
for(int j = 0; j < 3; ++j) {
<td style="width:240px;margin-left:30px; margin-right:30px;">
@Model[counter]
</td>
counter++;
}
</tr>
}
</table>
</div>
