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.

@page "/counter"

Counter

Current count: @currentCount

Click me@code { private int currentCount = 0; private void IncrementCount() { currentCount += 1; } }

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.

@page "/date"

Timer

Pick the Date :

You have picked the date : @pickDate.ToShortDateString()

@code { DateTime pickDate; }

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

Output:

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:

@page "/date"

BookList

@code { }

Step 2

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

• Book List

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.

@page "/book"

BookList

• @foreach (var book in bookLists) {
• @book.BookName
• }

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

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.

 @page "/book"
BookList
 

@foreach (var book in bookLists)
{
 
@book.BookName
 

}
 

 

  

  Add

    

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.

@page "/book"
BookList
 

@foreach (var book in bookLists)
 {
 
@book.BookName
 

 }
 

 

 

 Add



@code {
private List
    bookLists = new List
        ();
        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; }
        }
        }

    

Now run the project

Output:

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.

 @foreach (var book in bookLists)
 {
 BookClicked(book)">@book.BookName
 }

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:

  
  
  
  @page "/book"
BookList
 

      @foreach (var book in bookLists)
      {
 
 BookClicked(book)">@book.BookName
 

      }
 

 

 

 Add


@code {
private List
    bookLists = new List
        ();
        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; }
        }
        }

    

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

Output: