Month: April 2020

How to split the C# code from Blazor Component ?

ChandradevLeave a comment

In so many scenario splitting the C# code from html file will be good decision like unit testing or code re-usability in blazor project.

We can do this task in blazor using two approach
1. Partial files approach
2. Base class approach

Partial files approach

In this approach we create the same class name as component name. Suppose i have component test3.razor
then i have to create Test3.cs partial class

test3.razor file

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

Test3.cs partial class

namespace BlazorApp2.Pages
{
    public partial class Test3
    {
    public string msg = string.Empty;
    private void SayHello()
    {
        msg= "Hello Blazor";
    }
    }
}

2. Base class approach

In this approach the create the base class which will inherit the ComponentBase class. 

using Microsoft.AspNetCore.Components;

namespace BlazorApp2.Pages
{
    public  class Test3Base: ComponentBase
    {
    public string msg = string.Empty;
    public void SayHello()
    {
        msg= "Hello Blazor";
    }
    }
}

In Test3.blazor file use @inherits Test3Base syantax.

@inherits Test3Base
@page "/test3"

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

What is the components in Blazor ? (Part 2)

ChandradevLeave a comment

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.