Introduction to Data Binding and Event Calling in Blazor


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

Blazor is a .NET web framework for building the client-side application with c#, Razor syntax, and HTML that runs in the browser. Blazor is a web framework to build an easy way to build a web application. It runs on any browser that supports the web assembly, it is fast, open-source, and have reusable components. In this blog, we will learn about Blazor and how to do the event calling and data binding in the project. We need visual studio 17 or above version, and .NET core 3.1 or above.

Let’s start the project.

Example 1 :

Open visual studio 2017 or latest, go to the File-> New-> Project-> .NET core web application-> Blazor.

Now we can see the already written pages like index, cou nter, and fetch data. On the counter page, there is a variable called the current counter. It will increase by one as shown below.

<xmp>
@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount += 1;
    }
}

</xmp>

In the above code, we will add the input box to bind the counter data. Add the input box and bind the data using the bind property.

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

It is easy to bind the data in Blazor. Whenever we click the click me button then counter data will be bind in the textbox.

Output:

Trigger-in-Xamarin

Figure 1.0 Data Bind in Textbox

Example 2:

Now we will make a new page, in which we will fetch the date and display it as the label using data binding.

<xmp>
@page "/date"

<h3>Timer</h3>

<p>Pick the Date : </p><input type="date" @bind="pickDate"/>
<p>You have picked the date : @pickDate.ToShortDateString()</p>
@code {
    DateTime pickDate;
}

</xmp>

In the above code, we have taken the date picker and displayed the date as we have selected in the date picker.

Output:

Trigger-in-Xamarin

Figure 2.0 Date Picker

These are the simple example to bind the date and value. Let's see another example for the display book list.

Example 3:

Step 1

Initially we will be going to add a razor component. Right-click the pages folder and click on the razor component. It will create the “. razor" page. And named it "Book. razor".

The page will look like this:

<xmp>
@page "/date"

<h3>BookList</h3>

@code {
    
}

</xmp>

Step 2

Now add this page to the navbar. There is a page called “NavMenu.razor”. Add this below code.

<xmp>
<li class="nav-item px-3">
      <NavLink class="nav-link" href="book">
           <span class="oi oi-list-rich" aria-hidden="true"></span> Book List
       </NavLink>
</li>

</xmp>

Step 3

Now add a class on the razor page for book details. Like book name, book description, book price. Paste below code in the “@code {}” block.

public class BookList
{
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
}

Step 4

Now we will display the list of books. Using a foreach loop we will have the name of the books as an unordered list.

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li>@book.BookName</li>
    }
</ul>

@code {
    private List<BookList> bookLists = new List<BookList>();
    
    public class BookList
    {
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
    }
}

</xmp>

Step 5

Now, what if we want to add the book to this book list. For that, we will create a small form. In which we will take three input elements as shown below.

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li>@book.BookName</li>
    }
</ul>
<div class="form-group">
    <input class="form-control" placeholder="Add Book Name" @bind="newBook" /><br/>
    <input class="form-control" placeholder="Add Book description" @bind="description" /><br/>
    <input class="form-control" placeholder="Add Book Price" type="number" @bind="price" /><br/>
    <button class="btn btn-primary" @onclick="Add">Add</button>
</div>

</xmp>

Now we can see here that we have added the button. On click of the button, it will call the "Add" method. Now we will execute code for it. Paste the below code for the add method.

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li>@book.BookName</li>
    }
</ul>

<div class="form-group">
    <input class="form-control" placeholder="Add Book Name" @bind="newBook" /><br/>
    <input class="form-control" placeholder="Add Book description" @bind="description" /><br/>
    <input class="form-control" placeholder="Add Book Price" type="number" @bind="price" /><br/>
    <button class="btn btn-primary" @onclick="Add">Add</button>
</div>
<br/>

@code {
    private List<BookList> bookLists = new List<BookList>();
    private bool hide { get; set; } = true;
    private string newBook;
    private string description;
    private int price;
    
    void Add()
    {
        if (!string.IsNullOrWhiteSpace(newBook))
        {
            bookLists.Add(new BookList { BookName = newBook, BookPrice = price, BookDescription = description });
            newBook = string.Empty;
            description = string.Empty;
            price = 0;
        }
    }

    public class BookList
    {
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
    }
}

</xmp>

Now run the project

Output:

Trigger-in-Xamarin

Figure 3.0 Add in book list.

Trigger-in-Xamarin

Figure 4.0 Book List

It’s okay, it will work. But we want to display the whole list of books that we have added.

Step 6

Now we can see here that we have added the button. On click of the button, it will call the "Add" method. Now we have to implement code for it. Paste the below code for the add method.

<xmp>
@foreach (var book in bookLists)
    {
        <li @onclick="() => BookClicked(book)">@book.BookName</li>
    }

</xmp>

Replace this code in for loop. Now create the method in the code.

void BookClicked(BookList value)
{
        bookDetail = value.BookName;
        descriptionDetail = value.BookDescription;
        priceDetail = value.BookPrice;
        hide = !hide;
}

This is called the event binding. The full code of the project looks like this:

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li @onclick="() => BookClicked(book)">@book.BookName</li>
    }
</ul>

<div class="form-group">
    <input class="form-control" placeholder="Add Book Name" @bind="newBook" /><br/>
    <input class="form-control" placeholder="Add Book description" @bind="description" /><br/>
    <input class="form-control" placeholder="Add Book Price" type="number" @bind="price" /><br/>
    <button class="btn btn-primary" @onclick="Add">Add</button>
</div>
<br/>
<div hidden="@hide">
    <p>Book Name : <b>@bookDetail</b></p>
    <p>Book Description : @descriptionDetail</p>
    <p>Book Price : @priceDetail</p>
</div>

@code {
    private List<BookList> bookLists = new List<BookList>();
    private bool hide { get; set; } = true;
    private string newBook;
    private string description;
    private int price;
    private string bookDetail;
    private string descriptionDetail;
    private int priceDetail;

    void Add()
    {
        if (!string.IsNullOrWhiteSpace(newBook))
        {
            bookLists.Add(new BookList { BookName = newBook, BookPrice = price, BookDescription = description });
            newBook = string.Empty;
            description = string.Empty;
            price = 0;
        }
    }

    void BookClicked(BookList value)
    {
        bookDetail = value.BookName;
        descriptionDetail = value.BookDescription;
        priceDetail = value.BookPrice;
        hide = !hide;
    }

    public class BookList
    {
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
    }
}

</xmp>

When you click on the list it will display the whole detail of the book that we have added.

Output:

Trigger-in-Xamarin

Figure 5.0 Description

Conclusion

In this blog, we have seen how to create Blazor web apps, how to make a list, data binding, and event calling. When we write the "@bind" that means we are binding the data and when we write the "@onclick" that means we are calling the method or event. It is simple because there is no interaction with JavaScript or any scripting language. When you run the project for the first time then it will take some time to load because it downloads the assemblies on the browser.

Blazor is a .NET web framework for building the client-side application with c#, Razor syntax, and HTML that runs in the browser. Blazor is a web framework to build an easy way to build a web application. It runs on any browser that supports the web assembly, it is fast, open-source, and have reusable components. In this blog, we will learn about Blazor and how to do the event calling and data binding in the project. We need visual studio 17 or above version, and .NET core 3.1 or above.

Let’s start the project.

Example 1 :

Open visual studio 2017 or latest, go to the File-> New-> Project-> .NET core web application-> Blazor.

Now we can see the already written pages like index, cou nter, and fetch data. On the counter page, there is a variable called the current counter. It will increase by one as shown below.

<xmp>
@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount += 1;
    }
}

</xmp>

In the above code, we will add the input box to bind the counter data. Add the input box and bind the data using the bind property.

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

It is easy to bind the data in Blazor. Whenever we click the click me button then counter data will be bind in the textbox.

Output:

Trigger-in-Xamarin

Figure 1.0 Data Bind in Textbox

Example 2:

Now we will make a new page, in which we will fetch the date and display it as the label using data binding.

<xmp>
@page "/date"

<h3>Timer</h3>

<p>Pick the Date : </p><input type="date" @bind="pickDate"/>
<p>You have picked the date : @pickDate.ToShortDateString()</p>
@code {
    DateTime pickDate;
}

</xmp>

In the above code, we have taken the date picker and displayed the date as we have selected in the date picker.

Output:

Trigger-in-Xamarin

Figure 2.0 Date Picker

These are the simple example to bind the date and value. Let's see another example for the display book list.

Example 3:

Step 1

Initially we will be going to add a razor component. Right-click the pages folder and click on the razor component. It will create the “. razor" page. And named it "Book. razor".

The page will look like this:

<xmp>
@page "/date"

<h3>BookList</h3>

@code {
    
}

</xmp>

Step 2

Now add this page to the navbar. There is a page called “NavMenu.razor”. Add this below code.

<xmp>
<li class="nav-item px-3">
      <NavLink class="nav-link" href="book">
           <span class="oi oi-list-rich" aria-hidden="true"></span> Book List
       </NavLink>
</li>

</xmp>

Step 3

Now add a class on the razor page for book details. Like book name, book description, book price. Paste below code in the “@code {}” block.

public class BookList
{
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
}

Step 4

Now we will display the list of books. Using a foreach loop we will have the name of the books as an unordered list.

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li>@book.BookName</li>
    }
</ul>

@code {
    private List<BookList> bookLists = new List<BookList>();
    
    public class BookList
    {
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
    }
}

</xmp>

Step 5

Now, what if we want to add the book to this book list. For that, we will create a small form. In which we will take three input elements as shown below.

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li>@book.BookName</li>
    }
</ul>
<div class="form-group">
    <input class="form-control" placeholder="Add Book Name" @bind="newBook" /><br/>
    <input class="form-control" placeholder="Add Book description" @bind="description" /><br/>
    <input class="form-control" placeholder="Add Book Price" type="number" @bind="price" /><br/>
    <button class="btn btn-primary" @onclick="Add">Add</button>
</div>

</xmp>

Now we can see here that we have added the button. On click of the button, it will call the "Add" method. Now we will execute code for it. Paste the below code for the add method.

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li>@book.BookName</li>
    }
</ul>

<div class="form-group">
    <input class="form-control" placeholder="Add Book Name" @bind="newBook" /><br/>
    <input class="form-control" placeholder="Add Book description" @bind="description" /><br/>
    <input class="form-control" placeholder="Add Book Price" type="number" @bind="price" /><br/>
    <button class="btn btn-primary" @onclick="Add">Add</button>
</div>
<br/>

@code {
    private List<BookList> bookLists = new List<BookList>();
    private bool hide { get; set; } = true;
    private string newBook;
    private string description;
    private int price;
    
    void Add()
    {
        if (!string.IsNullOrWhiteSpace(newBook))
        {
            bookLists.Add(new BookList { BookName = newBook, BookPrice = price, BookDescription = description });
            newBook = string.Empty;
            description = string.Empty;
            price = 0;
        }
    }

    public class BookList
    {
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
    }
}

</xmp>

Now run the project

Output:

Trigger-in-Xamarin

Figure 3.0 Add in book list.

Trigger-in-Xamarin

Figure 4.0 Book List

It’s okay, it will work. But we want to display the whole list of books that we have added.

Step 6

Now we can see here that we have added the button. On click of the button, it will call the "Add" method. Now we have to implement code for it. Paste the below code for the add method.

<xmp>
@foreach (var book in bookLists)
    {
        <li @onclick="() => BookClicked(book)">@book.BookName</li>
    }

</xmp>

Replace this code in for loop. Now create the method in the code.

void BookClicked(BookList value)
{
        bookDetail = value.BookName;
        descriptionDetail = value.BookDescription;
        priceDetail = value.BookPrice;
        hide = !hide;
}

This is called the event binding. The full code of the project looks like this:

<xmp>
@page "/book"

<h3>BookList</h3>

<ul>
    @foreach (var book in bookLists)
    {
        <li @onclick="() => BookClicked(book)">@book.BookName</li>
    }
</ul>

<div class="form-group">
    <input class="form-control" placeholder="Add Book Name" @bind="newBook" /><br/>
    <input class="form-control" placeholder="Add Book description" @bind="description" /><br/>
    <input class="form-control" placeholder="Add Book Price" type="number" @bind="price" /><br/>
    <button class="btn btn-primary" @onclick="Add">Add</button>
</div>
<br/>
<div hidden="@hide">
    <p>Book Name : <b>@bookDetail</b></p>
    <p>Book Description : @descriptionDetail</p>
    <p>Book Price : @priceDetail</p>
</div>

@code {
    private List<BookList> bookLists = new List<BookList>();
    private bool hide { get; set; } = true;
    private string newBook;
    private string description;
    private int price;
    private string bookDetail;
    private string descriptionDetail;
    private int priceDetail;

    void Add()
    {
        if (!string.IsNullOrWhiteSpace(newBook))
        {
            bookLists.Add(new BookList { BookName = newBook, BookPrice = price, BookDescription = description });
            newBook = string.Empty;
            description = string.Empty;
            price = 0;
        }
    }

    void BookClicked(BookList value)
    {
        bookDetail = value.BookName;
        descriptionDetail = value.BookDescription;
        priceDetail = value.BookPrice;
        hide = !hide;
    }

    public class BookList
    {
        public string BookName { get; set; }
        public string BookDescription { get; set; }
        public int BookPrice { get; set; }
    }
}

</xmp>

When you click on the list it will display the whole detail of the book that we have added.

Output:

Trigger-in-Xamarin

Figure 5.0 Description

Conclusion

In this blog, we have seen how to create Blazor web apps, how to make a list, data binding, and event calling. When we write the "@bind" that means we are binding the data and when we write the "@onclick" that means we are calling the method or event. It is simple because there is no interaction with JavaScript or any scripting language. When you run the project for the first time then it will take some time to load because it downloads the assemblies on the browser.

  • Pin It
TOP