c# - 从 1 个项目列表创建 2 列项目列表

Question

我之前使用 javascript 函数在具有一定数量列的表格中创建复选框列表。

function BuildCheckBoxList(array, jqloc, name, limit, startchecked) 
{
    ///<summary>Used to create a generic checkbox list of items.</summar>
    ///<param name="array" type="List<I_S>">Array that is used to populate the checkboxes</param>
    ///<param name="jqloc" type="JQuery Object">JQuery object where the checkbox list is to be appended to</param>
    ///<param name="name" type="string">This is used to give your checkbox list a name/id/classes</param>
    ///<param name="limit" type="int">The amount of columns you want for each of the checkboxes.</param>
    name = name.split(' ').join('_').split('.').join('_');
    var html = "";

    var limitcounter = 0;

    html += "<table class='chktable' id='CheckBoxListTable-" + name + "'><tr>";

    var checked = "";
    if (startchecked)
    {
        checked = "checked='checked'";
    }

    for (var a = 0; a < array.length; a++) {
        limitcounter++;
        html += "<td class='cell'>";
        html += "<div>";
        html += "<input id='" + name + "-" + a + "' class='bcbl " + name + "' type='checkbox' " + checked + " value='" + array[a].name + "' /> ";
        html += "<div class='bcbltext'>" + array[a].name + "</div>";
        html += "</div>";

        html += "</td>";
        if (limitcounter == limit) {
            html += "</tr><tr>";
            limitcounter = 0;
        }
    }

    html += "</tr></table>";
    jqloc.html(html);
}

我现在要做的是创建一个执行相同操作的 View 。但是我遇到了问题。下面是我想象的它会如何工作，但有些地方不对劲。 (@Model.limit 为 2)

<table>

    @limit = @Model.limit;
    @counter = 0;
    <tr>
        @foreach (var item in Model.data)
        {
            @counter++;

                <td>
                @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    <div id="Team-@item.Id-FilterRadio" class="TeamFilterRadio">
                        <input type="radio" id="Team-@item.Id-ON" name="Team-@item.Id" checked="checked"/><label for="Team-@item.Id-ON"">ON</label>
                        <input type="radio" id="Team-@item.Id-OFF" name="Team-@item.Id"  /><label for="Team-@item.Id-OFF"">OFF</label>
                    </div>
                </td>

            @if (counter == limit){
                </tr><td>
                @counter = 0;
            }
        }
    </tr>
</table>

我收到此错误:解析器错误消息: foreach block 缺少结束“}”字符。确保此 block 中的所有“{”字符都具有匹配的“}”字符，并且没有任何“}”字符被解释为标记。

Answer 1

我删除了您检查限制的代码并且它有效。我认为您遇到的问题是因为您的标签没有按预期关闭。我遇到了类似的问题，试图像这样嵌套一些数据。我最终改变了我的模型以适应。我发现我无法有条件地关闭标签，因为 Razor 引擎无法在设计期间解决这个问题。

<table>

@{var limit = @Model.limit;
  var counter = 0;
}
<tr>
    @foreach (var item in Model.data) {
        @{counter++;}
        <td>@Html.DisplayFor(modelItem => item.Name)</td>
            <td>
                <div id="Team-@item.Id-FilterRadio" class="TeamFilterRadio">
                    <input type="radio" id="Team-@item.Id-ON" name="Team-@item.Id" checked="checked"/><label for="Team-@item.Id-ON"">ON</label>
                    <input type="radio" id="Team-@item.Id-OFF" name="Team-@item.Id"  /><label for="Team-@item.Id-OFF"">OFF</label>
                </div>
            </td>


    }
 </tr>
 </table>

你可以这样做。我使用您使用的属性创建了一个类 TestData，我的模型的 Data 属性是 TestData 的通用列表类型。我使用 13 个项目以及 2 列和 3 列进行了测试，效果非常好。

 @{int i = 0;
   var item = new MVC3TestSite.Models.TestData();
}

<table>

    @while(i < Model.Data.Count){

        <tr>
            @for(var j = 1; j <= Model.Limit; j++){
                item = Model.Data[i];
                <td>@item.Name</td>
                <td>
                    <div id="Team-@item.Id-FilterRadio" class="TeamFilterRadio">
                        <input type="radio" id="Team-@item.Id-ON" name="Team-@item.Id" checked="checked"/><label for="Team-@item.Id-ON"">ON</label>
                        <input type="radio" id="Team-@item.Id-OFF" name="Team-@item.Id"  /><label for="Team-@item.Id-OFF"">OFF</label>
                    </div>
                </td>
                if (++i == Model.Data.Count) { break; } 
            }
        </tr>
    }

</table>