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```html
Welcome to my one-way binding example. Here’s a list of colours.
@if (DateTime.Now.DayOfWeek == DayOfWeek.Saturday || DateTime.Now.DayOfWeek == DayOfWeek.Sunday) { It’s the weekend! } else { It’s @DateTime.Now.DayOfWeek.ToString() }
@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```html
<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 KeyboardEventArgs which will give you access to the details of the event.
There are specific args available for most events such as MouseEventArgs 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```html <input @onkeypress=“LogKeyPressed” />
@code {
private List<string> keyLog { get; set; } = new List<string>();
void LogKeyPressed(KeyboardEventArgs eventArgs)
{
keyLog.Add(eventArgs.Key);
}
}
Example```html
<!-- 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.
