从一个项目列表中创建一个两列的项目列表

本文关键字：一个 列表 项目 两列 创建 | 更新日期: 2023-09-27 18:09:05

我以前使用过一个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);
}

我现在要做的是创建一个视图来做同样的事情。但我遇到了问题。下面是我想象的工作方式，但有些地方不对。(@ model。极限是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块缺少关闭"}"字符。确保这个块中的所有"{"字符都有一个匹配的"}"字符，并且没有一个"}"字符被解释为标记。

从一个项目列表中创建一个两列的项目列表

我删除了检查限制的代码，它可以工作。我认为你的问题是因为你的标签没有像预期的那样关闭。我在尝试像这样嵌套一些数据时遇到了类似的问题。我最终改变了我的模型来适应。我发现我不能有条件地关闭标签，因为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>
相关文章：