Mixing HTML and Razor Code Within Nested Conditionals

Question

I am trying to use Razor withh a few nested conditionals, which is by far the most complex intermingling of Razor and HTML I have attempted thus far and I admit that I am not an expert with Razor yet. I am getting Razor parsing errors of this type: "Only assignment,call,decrement,increment, etc, can be used as a statement..."

Seems like I am using too many "@" but if I remove it here @<td> I get more errors that a statement is expected and symbol "td" cannot be resolved. I thought Razor was smart enough to know when HTML was being presented in a code block? I am clearly not giving Razor what it needs.

The first parse error occurs at "@<td rowspan="@total">N/A</td>;"

@foreach (var customerId in customerIds)
{
    var attendance = records.Where(x => customerIds.Contains(x.Customer.CustomerId)).ToList();
    var total = attendance.Count();

    if (total > 0)
    {
        <tr>
            @{
                var i = 0;
                attendance.ForEach(x =>
                {
                    if (i == 0)
                    {

                        @<td rowspan="@total">@x.Customer.CustomerFullName</td>;
                        @<td rowspan="@total">N/A</td>;

                    }

                    @<td>@x.Event.EventTitle</td>;
                    @<td>@x.AttendanceStartDate.ToString("MM/dd/yy")</td>;
                    @<td style="width: 10%; text-align: center">
         }
    }
 }
 }
  </tr>   

Answer 1

• You do not need to put @ and ; before/after DOM element in your Razor block (i.e. @{ } ). Here a good link to understand how to combine Text, Markup, and Code in Code Blocks
• To loop on each item in attendance you need to use a for loop (or a foreach loop if you don't need to increment a counter).
• The closing tag for the last TD element is missing.

You can try this :

foreach (var customerId in customerIds)
{
    var attendance = records.Where(x => customerIds.Contains(x.Customer.CustomerId)).ToList();
    var total = attendance.Count();

    if (total > 0)
    {
        <tr>
            @for (var i = 0; i < total; i++)
            {
                var x = attendance[i];
                if (i == 0)
                {
                    <td rowspan="@total">@x.Customer.CustomerFullName</td>
                    <td rowspan="@total">N/A</td>
                }
                <td>@x.Event.EventTitle</td>
                <td>@x.AttendanceStartDate.ToString("MM/dd/yy")</td>
                <td style="width: 10%; text-align: center"></td>
            }
        </tr>
    }
}

Answer 2

You only need the @ symbol when you are using .NET stuff; HTML shouldn't have the @ symbol. Remove it from all of the <td> tags.

This implies a .NET block:

@{
   int x = 1;
   x++;
   @: This (@:) breaks out of .NET and says that this text is plain HTML
   x--; //back to .NET
}

Also, you're not closing your table row tag, that might throw some of the extra errors you are seeing.

if (total > 0)
        {
            <tr>
                @{
                    var i = 0;
                    attendance.ForEach(x =>
                    {
                        if (i == 0)
                        {

                            <td rowspan="@total">@x.Customer.CustomerFullName</td>;
                            <td rowspan="@total">N/A</td>;

                        }

                        <td>@x.Event.EventTitle</td>;
                        <td>@x.AttendanceStartDate.ToString("MM/dd/yy")</td>;
                        <td style="width: 10%; text-align: center">
             }
        }

EDIT: Whoa, also, the attendance.ForEach() is trying to modify each element of attendance object; it doesn't iterate through each Element. I think you want another foreach loop instead of calling Object.ForEach().