Chandradev's Blog

Blazor component is one of the core part of blazor. We can consider this as user-control of asp.net webform technology.

Blazor is component driven technology.They can be nested, reused, and if implemented properly, can even be shared across multiple projects.It has file extension .razor.

How to create the blazor component.
1. Create the Blazor App using visual studio 2019
2. Go to the Page Folder of Blazor App.
3. Click on add to new item like this and give the name as Test1.razor

@page "/Test1"
<h3>Test1</h3>

<h3>This is test1 component</h3>
<a href="test3">Click Here to go to Test3 page</a>
@code {

}

Any component there will be two section i.e, Html and Code section. In code section we can write the C# Code.

In above code there is also example of routing in blazor. It is so simple implement routing in blazor.

Now run the application with this URL

https://localhost:44347/test1

Now create test2 and Test3 component in similar ways.

Test2.razor Component
This is demo code for how to pass parameter in component

@page "/test2"
<h3>Test2</h3>

<h5 style="color:green">@Title</h5>
 
@code {
     [Parameter]     
     public string Title { get; set; } 
}

Test3.razor Component
In this component, we are using the click event and how to read message from C#

@page "/test3"
<h3>This is test3 page</h3>
<p>Message from C# Code Block: @msg</p>
<button @onclick="SayHello">Click Here</button>

@code {
    public string msg = string.Empty;
    private void SayHello()
    {
        msg= "Hello Blazor";
    }
}

Go to the index.razor page and inject the component like this

In this component we are injecting the all other component and passing parameter to Test2 component.

@page "/"

<Test1/>
<Test2 Title="This is Test2 Title"/>
<Test3/>

Now run the application

Now in above demo we saw the example of Click event, nesting component, routing and Passing Parameter in component.