Question

I have the following code in my view. Inside of a for statement, I want to group every 4 items in a parent div. If(counter == 0), I render the parent div, then I render four items and then if it’s the last of the group of 4 items, I close the parent div.

However, it looks like razor is expecting me to close the parent div in the first if. It appears Razor is not smart enough to know the parent closing tag is inside the second if some lines below, or maybe I’m missing something. Any thoughts to resolve this?

 @{int counter = 0; }
 @for (int i = 0; i < Model.UserManagedRoles.Count; i++){
      string roleName = Model.UserManagedRoles[i].Name.Replace(" ", "").Trim();
      string id = string.Format("chk{0}", roleName);

      if (counter == 0)
      {
           <div  class="rowCapture divUserRoles">
      }

      <div class="hzStackSmall">
      <input type="checkbox" id="@id" name="@id" value="@roleName" />@Model.UserManagedRoles[i].Name</div>

      if(counter == 3 || i == Model.UserManagedRoles.Count) {
           </div>
      }

      counter++;
      if (counter == 4)
      {
           counter = 0;
      }
 }

Answer 1

You have to use @: <div class="hzStackSmall"> to print HTML code with the razor engine. Will this help?

I strongly recommend this tutorial from ScottGu’s Blog about the razor engine.

 @{int counter = 0; }

 @for (int i = 0; i < Model.UserManagedRoles.Count; i++)
 {
    string roleName = Model.UserManagedRoles[i].Name.Replace(" ", "").Trim();
    string id = string.Format("chk{0}", roleName);

    if (counter == 0)
    {
       @:<div  class="rowCapture divUserRoles">
    }

    @:<div class="hzStackSmall">
    @:<input type="checkbox" id="@id" name="@id" value="@roleName" />@Model.UserManagedRoles[i].Name</div>

    if(counter == 3 || i == Model.UserManagedRoles.Count) {
       @:</div>
    }

    counter++;
    if (counter == 4)
    {
       counter = 0;
    }
 }