Data binding and events

Let’s explore how to define component rendering logic and handle UI events.

Render C# expression values

When you want to render the value of a C# expression in Razor, you use a leading @ character. For example, a Counter component can render the value of its currentCount field like this:

razorCopy

<p role="status">Current count: @currentCount</p>

Razor can typically figure out when a C# expression ends and you transition back to writing HTML. But you can also be explicit about the beginning and ending of the expression using parens.

razorCopy

<p role="status">Current count: @(currentCount)</p>

Add control flow

You can add control flow to your component rendering logic using normal C# statements. For example, you can conditionally render some content using a C# if-statement, like this:

razorCopy

@if (currentCount > 3)
{
    <p>You win!</p>
}

You can also use C# to loop over data and render a list of items:

razorCopy

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

veeam certification malaysia