Question

I’ve used a javascript function before to create checkbox lists inside a table with a certain amount of columns.

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);
}

What I’m trying to do now is create a view that does the same thing. But I’m running into problems. Below is how I imagined it would work, but something is wrong. (@Model.limit is 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="[e-mail]-FilterRadio" class="TeamFilterRadio">
                        <input type="radio" id="[e-mail]-ON" name="[e-mail]" checked="checked"/><label for="[e-mail]-ON"">ON</label>
                        <input type="radio" id="[e-mail]-OFF" name="[e-mail]"  /><label for="[e-mail]-OFF"">OFF</label>
                    </div>
                </td>

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

I get this error : Parser Error Message: The foreach block is missing a closing “}” character. Make sure you have a matching “}” character for all the “{” characters within this block, and that none of the “}” characters are being interpreted as markup.

Answer 1

I removed the code where your checking the limit and it works. I think the problem your having is because your tags aren’t closed as expected. I ran into a similar problem trying to nest some data like this. I ended up changing my model to accommodate. I found I couldn’t conditionally close tags, because the Razor engine can’t figure that out during design.

<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="[e-mail]-FilterRadio" class="TeamFilterRadio">
                    <input type="radio" id="[e-mail]-ON" name="[e-mail]" checked="checked"/><label for="[e-mail]-ON"">ON</label>
                    <input type="radio" id="[e-mail]-OFF" name="[e-mail]"  /><label for="[e-mail]-OFF"">OFF</label>
                </div>
            </td>


    }
 </tr>
 </table>

You could do something like this. I created a class TestData with the properties your using, and my Data property of my model is of type generic list of TestData. I tested using 13 items and both 2 and 3 columns and it worked like a charm.

 @{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="[e-mail]-FilterRadio" class="TeamFilterRadio">
                        <input type="radio" id="[e-mail]-ON" name="[e-mail]" checked="checked"/><label for="[e-mail]-ON"">ON</label>
                        <input type="radio" id="[e-mail]-OFF" name="[e-mail]"  /><label for="[e-mail]-OFF"">OFF</label>
                    </div>
                </td>
                if (++i == Model.Data.Count) { break; } 
            }
        </tr>
    }

</table>