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,
- Blazor: Zero To Hero – Part 1
- Blazor: Zero To Hero – Part 2
- Blazor: Zero To Hero – Part 3
- Blazor: Zero To Hero – Part 4
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.
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.
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
