Blazor Bites Series


Data Binding

Displaying data in Blazor is really simple and if you have any experience with Razor then this should all be very familiar to you. If not, don't worry it's really easy to pick up.

One-way binding

This is used for printing values in your views. These values could be strings such as a title in a <h1> tag or items in a list. But it can also be used to dynamically inject values into the HTML such as the name of a CSS class on an element.

Example
<h1>@Title</h1>

Welcome to my one-way binding example. Here's a list of colours.

<ul>
    @foreach (var colour in Colours)
    {
        <li>@colour</li>
    }
</ul>

@if (DateTime.Now.DayOfWeek == DayOfWeek.Saturday || DateTime.Now.DayOfWeek == DayOfWeek.Sunday)
{
    <p class="@weekendFontStyle">It's the weekend!</p>
}
else
{
    <p>It's @DateTime.Now.DayOfWeek.ToString()</p>
}

@code {

    private string Title { get; set; } = "Welcome to one-way binding";
    private List<string> Colours { get; set; } = new List<string> { 
        "Red", "Blue", "Green", "Yellow"; 
    };  
    private string weekendFontStyle { get; set; } = "party-time";

}

Two-way Binding

You know how to print out values to a view, but what if you would like a user to be able to update those values? This is where two-way binding comes in.

Blazor uses a directive called bind to achieve this. You can see an example of the bind directive in the next section.

Formatting Bindings

If you wish to format a bound value you can use the format-value attribute. At the moment this is limited to just the DateTime type. With it you can provide a format string to specify how .NET values should be bound to attribute values.

Example
<h1>Record your current favourite colour</h1>

<p>
    <input @bind="@Name" />
</p>

<p>
    <select @bind="@FavouriteColour">
        <option>Red</option>
        <option>Blue</option>
        <option>Green</option>
        <option>Yellow</option>
    </select>
</p>

<p>
    <input @bind="@DateRecorded" @bind:format="dd/mm/yyyy" />
</p>

<hr />

<p>Hi @Name</p>
<p>Your favourite colour on @DateRecorded was @FavouriteColour</p>


@code {

    public string Name { get; set; }
    public string FavouriteColour { get; set; }

    private DateTime dateRecorded = DateTime.Now;
    public string DateRecorded
    {
        get => dateRecorded.ToShortDateString();
        set => DateTime.TryParse(value, out dateRecorded);
    }
    
}

Events

In Blazor, we can access virtually any event you would be able to using JavaScript. The syntax looks like this, on[eventname] and is used as an attribute in your markup.

This attribute takes a delegate which is registered with the event. For example, <input onkeyup="@HandleKeyUp" /> will call the HandleKeyUp method whenever the onkeypress event is trigged. In the HandleKeyUp method you are able to accept UIKeyboardEventArgs which will give you access to the details of the event.

There are specific args available for most events such as UIMouseEventArgs for mouse events. To see a complete list its worth checking out this file in the Blazor source code.

You can also define your own events, for example, when doing component to component communication but I'll cover that in a future post.

Example
<input @onkeypress="@LogKeyPressed" />

<ul>
    @foreach (var key in keyLog)
    {
        <li>@key</li>
    }
</ul>

@code {
    
    private List<string> keyLog { get; set; } = new List<string>();

    void LogKeyPressed(UIKeyboardEventArgs eventArgs)
    {
        keyLog.Add(eventArgs.Key);
    }
}
Example
<!-- Using a lambda -->

<button @onclick="@(e => buttonClicks++)">Click me</button>

<p>You clicked the button @buttonClicks times</p>


@code {

    private int buttonClicks { get; set; }
    
}

Summary

In this post, we've taken a look at one-way and two-way data binding. We also saw how we can format certain bind values. We then tackled events in Blazor and how you can use event args to gain extra data about the event.