Question

What i want to do is that, there is a div containing icon sets but i want make a row with 5 icons per row. So i wrote something like this.

<div id="icons-list1" class="icons-list">
    @{ int catCount = 0; }
    @foreach (var catItem in Model.Categories)
    {
        if (catCount == 0)
        {
           <div class="icons-list-row">
        }
        <label title="@catItem.Name" data-selected-color="#@catItem.ColorCode" data-position="n" class="icon static big tooltip" original-title="Tooltip Title">
            <img alt="@catItem.Name" src="@Url.Content(@BonubonUrlHelper.CategoryImages + "dark/music.png")">
            <input name="categories" value="@catItem.Id" type="checkbox" />
        </label>
        catCount++;
        @if (catCount == 5)
        {
            </div>
            catCount = 0;  
        }
    }
</div>

But i got an error, saying foreach statement has no ending block. I tried everything, but i couldn’t manage to make it work. What i make wrong? I’m new to razor syntax.

Thanks

Answer 1

Make sure you escape html statements when this sort of problems appears.

In your case, however, the actual problem is with the @ escape character before the second if statement, which is not needed:

<div id="icons-list1" class="icons-list">
    @{ int catCount = 0; }
    @foreach (var catItem in Model.Categories)
    {
        if (catCount == 0)
        {
           @:<div class="icons-list-row">
        }
        <label title="@catItem.Name" data-selected-color="#@catItem.ColorCode" data-position="n" class="icon static big tooltip" original-title="Tooltip Title">
            <img alt="@catItem.Name" src="@Url.Content(@BonubonUrlHelper.CategoryImages + "dark/music.png")">
            <input name="categories" value="@catItem.Id" type="checkbox" />
        </label>
        catCount++;
        if (catCount == 5)
        {
            @:</div>
            catCount = 0;  
        }
    }
</div>