Razor HTML Conditional Output

Question

I have a list of items I want to output as the contents of a main (the main in not included below). Each Item has 3 attributes: a Section Name, a Label and a Value. Each item is enclosed in a and everytime the Section Name changes I have to open a (and close the previous one, if any). I'm using a Razor view with this code:

@foreach (LocalStorageItem lsi in Model) { 
    string fld_name = "f_" + lsi.ItemName;
    if (lsi.SectionName != sn) {
        if (sn != "") { 
            Html.Raw("</fieldset>"); 
        }
        sn = lsi.SectionName;
        <h2>@sn</h2>
        Html.Raw("<fieldset>");              
    }
        <div class="row">
            <div class="ls_label">@lsi.ItemName</div>
            <div class="ls_content" name="@fld_name" id="@fld_name">.</div>
        </div>        
 }
 @if (Model.Count != 0) {
    Html.Raw("</fieldset>");
 }

The problem is: each time the Section Name changes no fieldset tag (open and/or close) is generated. Where am I wrong? If I don't use Html.Raw (or @: as an alternative) the VS2010 parser signals an error.

Answer 1

I really think that the use of @: to work around such code is an abuse of that escape sequence. The problem should be addressed instead by correctly refactoring the code so that balanced tags can be easily written:

@foreach(var section in Model.GroupBy(i => i.SectionName)) {
    <h2>@section.Key</h2>
    <fieldset>
    @foreach(LocalStorageItem lsi in section) {
        string fld_name = "f_" + lsi.ItemName;
        <div class="row">
            <div class="ls_label">@lsi.ItemName</div>
            <div class="ls_content" name="@fld_name" id="@fld_name">.</div>
        </div>
    }
    </fieldset>
}

12 lines of code instead of 18

Answer 2

Calling Html.Raw returns an IHtmlString; it doesn't write anything to the page.

Instead, you should write

@:</fieldset>

Using @: forces Razor to treat it as plain text, so it doesn't need to be well-formed.

---

However, your code can be made much cleaner by calling GroupBy and making a nested foreach loop.