Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Razor HTML Conditional Output

Tags:

razor

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.

like image 932
gattox Avatar asked Mar 15 '11 15:03

gattox


2 Answers

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.

like image 55
SLaks Avatar answered Oct 24 '22 15:10

SLaks


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

like image 29
marcind Avatar answered Oct 24 '22 14:10

marcind