Blazor Components in Razor Page: Zero To Hero in Blazor with Real Time Implementation Part V

Introduction 

This is part five of the “Blazor: Zero to Hero” article series. Before getting into the Part V article series, let’s have a Glimpse at previous articles in this series, 

Part I

  • Blazor is a framework to build Interactive Web UIs using C# and HTML. 
  • The initial release was in 2018 by Microsoft.   
  • We can use C# code in the Client-Side programming, and WebAssembly will handle browsers to understand the C# code. 
  • We need .NET CORE SDK 3.1 or latest 
  • Visual Studio 2017 or the latest can be used as the IDEs. 

Part II

  • Microsoft launched the first version of Blazor in 2019 along with .NET CORE 3.0
  • There are two hosting models as Client-Side and Server-Side. 
  • Client-Side is also known as Blazor WebAssembly, the application runs directly on the web browsers and all the required components are downloaded from Server to Client. 
  • In Server-Side, the application is run directly on the Server-Side.
Part III
  • In this article, we had a detailed look on the Blazor Server Side Application’s Project Structure.

Please visit for complete article, 

In this article, we will be discussing about the Blazor Razor Components.

  • Blazor is a component driven framework, i.e. Components are the fundamental build blocks of a Blazor application
  • Components can be reused and shared across multiple projects
  • The extension of the component file is .razor. This is the reason we term it as Razor Components or Blazor Components
  • Component name always start with Upper Case Character. If we name it in lower case, then we get an error message as “Component names cannot start in Lower Case Character.”

Now lets look into the Counter.razor, which is the default one when we created this Blazor application.

Fig.1 Counter.razor

As you see, it is combination of both HTML and C# Code. The HTML Code is for User Interface of this component and C# code is for the components logic. from the above Counter.razor, every time when the user clicks the button, we wan to call the IncrementCount() function which is in C# code.

Fig.2 Rendering the Counter.razor component

On the button click the counter value is increased and displayed. We can also change the styles in the component.

If we look into the Counter.razor code, we can access the variable values by simply prefix the variable name with @ character. In this example, we access the variable currentCount from C# code by using @ character as prefix and followed by variable name, i.e. @currentCount in the HTML code. This is one way data binding. Blazor also supports two way data binding.

The C# code is included @Code block. We can also have more than one @Code blocks in a component. When the application is complied the HTML and C# code are converted to Component Class. The name of the generated component class matches the name of the component file.

If you have noticed the Fig.2, when ever the we click the button the values are incremented without reloading the page. Always remember that Blazor server application runs on the server. A SignalR connection is established between the Server and the Client Browser. In the Counter.razor component, when the button is clicked, the information about the click event is sent to the server over the SignalR Connection. In response to the event, the component is regenerated. But the entire HTML is not send back to the client. Only the Difference is send back. In this case, the new currentCount variable value is send back. Only the changed part is updated instead of rending the entire page. Thus the application feels faster and more responsive.

Conclusion

In this blog, we had a look at the Components in Blazor. I hope this was useful to you all. Please share your feedback in the comment section.

Previous articles in this series

One thought on “Blazor Components in Razor Page: Zero To Hero in Blazor with Real Time Implementation Part V

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Built with WordPress.com.

Up ↑

%d bloggers like this: