Data Binding And Event Calling In Blazor

In this article we will be learning how to use,

• Data Binding
• EventCallback

Data Binding

 

Data binding allows us to synchronize an HTML element and a variable on a component. For example, we can synchronize a textbox and a variable such that whatever value that is in the textbox is also in the variable or a value in the variable is in the textbox and this also applies to changes either made in the variable or textbox. In order to demonstrate this, we will do the following,

 

Step 1

 

Go to the solution explorer and go to the counter component. Already there is a button that you can click which is going to increment the value of the currentcount variable which would then be displayed in the user interface. What we want is to have a textbox that will modify directly the value of the currentcount field, for that we are going to use data binding and a textbox.

 

Step 2

 

Add a textbox to the component as done on figure 1 below.

<input type="number" />

Step 3

 

Bind the textbox to the currentcount field as done on figure 2 below.

<input type="number" @bind="currentCount " />

The whole component should look like figure 3 below.

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<input type="number" @bind="currentCount " />
@code {
    private int currentCount = 0;
    private void IncrementCount() {
        currentCount++;
    }
}

Step 4

 

Run the application

 

Result

 

Every time we click the click me button the currentcount variable increments since the button is calling the IncrementCount function. Since we have bound the textbox to the currentCount variable the textbox would show the incrementing currentCount variable.

 

Another example would be to use a checkbox to do data binding. To do so follow the following steps,

 

Step 1

 

Go to the booklist component.

 

Step 2

 

Remove <inputtype="checkbox"@onchange="@(() => displayButtons =!displayButtons )"/>

 

Step 3

 

Add <inputtype="checkbox"@bind="displayButtons"/>

 

Step 4

 

Run the application.

 

Final code in the booklist component should look like figure 5 below.

@if(book == null) {
    < text > Loading Items..... < /text>
}
else if (book.Count == 0) {
    < text > There are no books to display < /text>
} else {
    < input type = "checkbox"
    @bind = "displayButtons" / > @foreach(var book_ in book) {
        < IndividualBookList book = " book_ "
        DisplayButtons = "displayButtons" > < /IndividualBookList> < div > < /div>
    }
}
@code {
    [Parameter] public List < Books > book {
        get;
        set;
    }
    bool displayButtons = false;
}

Result

 

Every time I check the checkbox it then displays the delete buttons.

 

Figure 6 shows the list of books with an unchecked checkbox and figure 7 shows the list of books with a checked checkbox showing the delete buttons.

 

EventCallback

 

EventCallback is a special type which allows us to pass methods as parameters in a component. An example is given below,

 

Step 1

 

Go the IndividualBooklist component.

 

Step 2

 

Put a new parameter called DeleteBook with an argument Books as done on figure 8 below:

[Parameter] public EventCallback<Books> DeleteBooks { get; set;}

Step 3

 

On the onclick event put @(()=> DeleteBooks.InvokeAsync(book))

<button @onclick="@(()=> DeleteBooks.InvokeAsync(book))">Delete</button>

With this we are executing the event callback DeleteBook when the user clicks on the delete button.

 

Step 4

 

Remove the Delete function.

 

Step 5

 

Go to the Booklist Component to write the method that would be executed when the user clicks the delete button.

 

Step 6

 

Write a method which is going to be receiving a parameter which is going to be a book.

 

Step 7

 

Put book.Remove(books); within the method.

 

The whole method would look like figure 9 below.

private void DeleteBook(Books books) {
    book.Remove(books);
}

Step 8

 

Where we call the IndividualBooklist component on the Booklist component amend to

<IndividualBookList book=" book_ " DisplayButtons="displayButtons" DeleteBooks="DeleteBook"></IndividualBookList>

This actually executes the parameter DeleteBooks in the IndividualBooklist component which would then call the DeleteBook method in the Booklist component.

 

The final whole code on the IndividualBooklist component is shown on figure 11 below,

<div>
    <p> Title: @((MarkupString)book.Tittle)</p>
    <p> Release Date: @book.ReleaseDate.ToString("dd MMM yyyy") </p>
@if(DisplayButtons) {
    < button @onclick = "@(()=> DeleteBooks.InvokeAsync(book))" > Delete < /button>
} < /div>
@code {
    [Parameter] public Books book {
        get;
        set;
    }
    [Parameter] public bool DisplayButtons {
        get;
        set;
    } = false;
    [Parameter] public EventCallback < Books > DeleteBooks {
        get;
        set;
    }
}

The final whole code on the IndividualBooklist component is shown on figure 12 below,

@if(book == null) {
    < text > Loading Items..... < /text>
}
else if (book.Count == 0) {
    < text > There are no books to display < /text>
} else {
    < input type = "checkbox"
    @bind = "displayButtons" / > @foreach(var book_ in book) {
        < IndividualBookList book = " book_ "
        DisplayButtons = "displayButtons"
        DeleteBooks = "DeleteBook" > < /IndividualBookList> < div > < /div>
    }
}
@code {
    [Parameter] public List < Books > book {
        get;
        set;
    }
    bool displayButtons = false;
    private void DeleteBook(Books books) {
        book.Remove(books);
    }
}

Step 9

 

Press ctrl+f5 to run the application.

 

Result

 

Figure 13 shows before deleting the Harry Potter Book and figure 14 shows after deleting the Harry Potter book.

 

To download the whole source code go to here.