Tag: Razor

When rendering output from a razor template it is important to remember the distinction between

@{ ...}  and @(...)

Curly braces will cause the output to execute, whilst the regular parenthesis will cause the output to render.

As an example that tripped me up during rendering of a ViewComponent in the CamperFinder demo, the following executes the output, but does not render it.

<div>     
@foreach (var vehicle in Model.Vehicles) {         
    @await Component.InvokeAsync("VehicleSummary", vehicle);              
} 
</div>@

The inner await block is executed within the scope of the loop, within {} braces.

By adding parentheses around the await following renders the content as we want it.

<div>     
@foreach (var vehicle in Model.Vehicles) {         
    @(await Component.InvokeAsync("VehicleSummary", vehicle));              
} 
</div>

Kudos: https://stackoverflow.com/a/44835742/75594