Blazor reusable UI components

#Blazor #Blazor tutorial #Blazor c# #Blazor core mvc #Blazor reuseable ui

Blazor reusable UI components

#Blazor #Blazor tutorial #Blazor c# #Blazor core mvc #Blazor reuseable ui

1595688757

Blazor Data Binding In Depth - Part 1

In this post, we will discuss about blazor data binding in depth. This is first part of “Blazor Data Binding in Depth” article.

Introduction

Blazoris a .NET framework for building single-page applications (SPA) using C#, Razor and HTML. Data binding is one the most powerful features of any single-page application through which page UI updates with model data without page reload. We will discuss about data binding feature in Blazor.

This article is part of our step-by-step Blazor series. If you have not read our previous articles on Blazor, you can check them here.

Data Binding in Blazor is a powerful feature that allows us to synchronize a variable and a html element or a component. In simple terms, whenever a variable/property data gets update in C#, UI immediately gets update with updated data and vice-versa. Let’s see data binding types in detail.

One-Way Binding

In one-way binding, data flows in one direction only from C# code to UI. That means any property or variable in C# code directly can be used inside html and whenever this property or variable value gets update in C#, this is immediately updated in UI. However vice-versa in one-way binding is not possible. This is just to display updated model data in the UI.

Let’s understand it with the help of code example. In the following example, take a look at Counter component (counter.razor) that comes with default blazor template project.

blazor one-way data binding

In the above code, we have a private variable _currentCount _which is initially set to 0 that displays 0 in paragraph when application runs. The _currentCount _variable works as a one-way binding here. In order to bind one-way values, we use @ symbol followed by variable or property name.

A method IncrementCount is also given in the code which works as an event handler of _onclick _blazor event of button element. When _ClickMe _button will be clicked, handler will be executed and increases the _currentCount _value by one, which will immediately update the UI. Executing event handlers in blazor triggers a re-render which updates the UI.

You are aware now with one-way binding that updates the value in one direction only. What, if you want user to update the variable or property value from UI also. This is where two-way binding comes place.

Before understanding two-way binding in blazor, let’s understand “what are components parameters in blazor?“

[Parameter] attribute in Component

A component can receive data from its parent component using [Parameter] attribute. Any of following types of data can be send to a component through [Parameter] attribute. Methods can also be send thru parameters.

Data
Events
Razor Content

As we saw in our previous article A deep dive on Blazor components that blazor components can be nested. That means a blazor component can be nested inside other blazor components. As an example, let’s create a new component called CounterValueDisplay.razor and nest it inside count component.

So [Parameter] attribute is used when you want to pass any data from parent (Counter) to child (CounterValueDisplay) component.

blazor data binding - component parameters

In above example, Parent (count) component is passing value to Child (CounterValueDisplay) component using [Parameter] attribute. Follow below steps for clear understanding

#blazor #asp.net core #blazor #component parameters in blazor #one-way data binding in blazor #two-way data binding in blazor

Asp Dot Net Explorer

1593023657