Learning Blazor Components and Data Binding with Examples

Ever wished you could build dynamic web applications with just C# and skip JavaScript entirely? Welcome to Blazor! This game-changing framework lets you develop interactive web apps using .NET and Razor components, making web development smoother than ever. If you’re ready to dive in, let’s explore Blazor components and data binding with practical examples to get you up and running quickly!

Building Your First Blazor Component

Understanding Blazor Components

Components are reusable UI building blocks, much like React components but built with Razor syntax. They are defined in .razor files and can include C#, HTML, and CSS. Every Blazor application consists of multiple components that work together to create dynamic web applications.

Step-by-Step Guide to Creating a Basic Blazor Component

To create a Blazor component:

1. Open a Blazor project in Visual Studio.
2. Navigate to the Pages or Components folder.
3. Create a new .razor file (e.g., HelloBlazor.razor).
4. Define the component structure.

Example: Hello Blazor World Component

<h3>Hello, Blazor World!</h3>

For a more dynamic component, you can introduce parameters:

@code {
    [Parameter]
    public string UserName { get; set; } = "Alex";
}

<h3>Hello, @UserName!</h3>

Data Binding and Event Handling

Concept of Data Binding in Blazor

Data binding links UI elements to data sources, making applications interactive. Blazor supports different types of data binding, including one-way and two-way binding.

Types of Data Binding with Examples

One-Way Binding

@code {
    private string message = "Welcome to Blazor World!";
}

<p>@message</p>

Two-Way Binding

Two-way binding keeps the UI and data in sync automatically.

@code {
    private string userName = "";
}

<input @bind="userName" />
<p>You introduced yourself: @userName</p>

Example: Data Binding in a Form

@code {
    private string userEmail = "";
    private void SubmitForm() {
        Console.WriteLine($"Email Submitted: {userEmail}");
    }
}

<input @bind="userEmail" placeholder="Enter your email" />
<button @onclick="SubmitForm">Submit</button>

Handling Events in Blazor

Blazor provides event handling similar to JavaScript but with C#. Event binding is done using @onclick, @onchange, and other event attributes.

Example: Button Click Event

@code {
    private int count = 0;
    private void IncrementCount() {
        count++;
    }
}

<button @onclick="IncrementCount">Click Button</button>
<p>Button was clicked @count times</p>

Parent-Child Component Communication

Blazor allows communication between parent and child components using component parameters and event callbacks.

Passing Data from Parent to Child Component

A parent component can pass data to a child component via [Parameter].

Parent Component (ParentComponent.razor)

<ChildComponent Message="Hello from Parent!" />

Child Component (ChildComponent.razor)

@code {
    [Parameter]
    public string Message { get; set; }
}

<p>@Message</p>

Receiving Data from Child to Parent Component

This is achieved using EventCallback.

Parent Component (ParentComponent.razor)

@code {
    private string receivedMessage = "";

    private void ReceiveMessage(string message) {
        receivedMessage = message;
    }
}

<ChildComponent OnMessageSent="ReceiveMessage" />
<p>Message from child: @receivedMessage</p>

Child Component (ChildComponent.razor)

@code {
    [Parameter]
    public EventCallback<string> OnMessageSent { get; set; }

    private void SendMessage() {
        OnMessageSent.InvokeAsync("Hello from Child Component!");
    }
}

<button @onclick="SendMessage">Send Message</button>

FAQ

Conclusion: Mastering Blazor Components and Data Binding

Blazor components and data binding are essential for building dynamic web applications in .NET. By learning how to create components, bind data, and handle events, you can unlock the full potential of Blazor for modern web development.

Now it’s your turn! Start building your own components today and share your experience in the comments. What challenges did you face? What features do you love the most? Let’s discuss and learn together!