从1个项目列表中创建2列项目列表

时间:2011-09-20 22:34:47

标签: c# asp.net-mvc razor

之前我使用过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.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块缺少结束“}”字符。确保此块中的所有“{”字符都有匹配的“}”字符,并且没有任何“}”字符被解释为标记。

1 个答案:

答案 0 :(得分:2)

我删除了检查限制的代码并且它有效。我认为您遇到的问题是因为您的代码未按预期关闭。我遇到了类似的问题,试图嵌套这样的数据。我最终改变了我的模型以适应。我发现我无法有条件地关闭标签,因为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>