Best resource for Online free Education
In this and in a few upcoming articles, I am going to discuss ASP.NET Core Blazor Components i.e. ASP.NET Core Razor Components. Please read our previous article, where we discussed the Blazor Project Structure in detail. As part of this article, we are going to discuss the following pointers.
- Creating Blazor Server App.
- What are Blazor Components?
- Example to understand ASP.NET Core Blazor Components
- How does the blazor server project run on the server?
- Nesting razor components in ASP.NET Core Blazor Server App
- Where to Place Razor Components in Blazor Application?
Creating a Blazor Server App:
In other to understand the Blazor component i.e. the ASP.NET Core Razor Components, let us first create a Blazor Server App. So, please follow the below steps to create the Blazor app.
Open Visual Studio 2019 and then click on the Create a new project box to create a new project as shown in the below image.
Once you click on the Create a new project box, it will open the create a new project window. From this create a new project window, we need to select the Blazor app, and once you select the Blazor App, click on the Next button as shown in the below image.
Once you click on the Next button, it will open configure your new project window. In this window, we need to specify the Project name and location where we want to create the project. Here, I provided the Project name as BlazorServerApp and the Solution name as MyFirstBlazorApp. You can also provide the same for your Project and Solution. Finally, click on the Create button as shown in the below image.
Once you click on the Create button, it will open the Create a new Blazor app window from where you need to select the type of Blazor app you want to create. There are two types of Blazor app i.e. Blazor Server App and Blazor WebAssembly App. As we are interested in Blazor Server App, So, from this window, Blazor Server App, and click on the Create button as shown in the below image. In the same time please make sure to uncheck all the check boxed from the Advanced section.
Once you click on the Create button, it will take some time and create the Blazor Server App with the following file and folder structure.
If you look at the Pages folder, then you will find many razor components there. Let us proceed and understand what exactly components are and their need and use?
What are Blazor Components?
The ASP.NET Core Blazor is a component-driven framework. That means components are the basic building blocks of a Blazor application. The Components in Blazor applications can be nested, reused, and if we implemented them properly, then it can also be shared across multiple applications. The Component files have the extension .razor.
Example to understand ASP.NET Core Blazor Components:
When we create a new Blazor Server App, then the Blazor framework by default creates the following counter component for us. You can find this counter component within the Pages folder of your Blazor Server App.
Counter.razor
As you can see in the above code, the razor component is a combination of two things i.e. HTML mark-up and C# code. The HTML Markup is basically used to create the user interface with which the end-user can interact whereas the C# code is used to define the processing logic.
Understanding the above Counter.razor component
In this counter.razor component, the C# code increments the currentCount variable value by 1 each and every time the button is clicked. If you notice in the above code, the C# function IncrementCount() is bind with the click event of the button HTML element. So, when the button is clicked, the IncrementCount function is called and within this function, the logic is defined to increment the currentCount variable value by 1.
Whenever we want to access the C# variable within the HTML, then we need to use @ symbol to access that variable. In our example, to access the private variable currentCount value within the HTML, we use @ character.
The C# code is in @code block and it is also possible within a razor component to have more than one @code block.
When we compiled the application, both the HTML and C# codes present in the razor file is converted into a component class. The name of the generated component class matches the name of the component file.
Note: The most important point that you need to remember is, the component file name should start with an uppercase character. If you add a component file with a lowercase character, then the code will fail to the compiler and you will get the following error.
Component names cannot start with a lowercase character
How does the blazor server project run on the server?
First, a SignalR connection is established between the server and the client browser. When we click on the Counter menu, the counter component is rendered on the browser, and that what we can see in the browser as shown in the below image.
When we click on the Click me button, the information about the click event is sent to the server over the SignalR connection. As a response to this event, the component is generated but the most important thing is that the entire HTML will not be sent back to the client. Only the diff i.e. the difference in the render tree is sent back to the client browser. In our example, the diff is only the counter value, so the counter value is only sent back to the client browser.
As only changed part of the browser is updated instead of reloading the entire page or updating the entire page, so the performance of the application significantly improves as well as more responsive to the end-user.
Nesting razor components in ASP.NET Core Blazor Server App.
One way to render the Counter component is by navigating to /counter in the browser. This path is specified by the @page directive at the top of the component as shown below.
In the Blazor application, a component can also be nested inside another component using the HTML syntax. For example, if you want to nest counter component inside the index component then you need to use <Counter /> within the Index component. You can find the Index.razor file inside the pages folder and then modify the Index component as shown below.
Now rerun the application and you should see the Counter Component inside the Index component as shown in the below image.
Where to Place Razor Components in Blazor Application?
The Razor Components can be placed anywhere within a blazor application. But It is a good practice to place the components which produce webpages within the Pages folder and reusable non-page components within the Shared folder.
Splitting the component HTML and C# code
The example (Counter Component) that we discussed in this Video, both the HTML code and C# code are present in a single file. This is fine when your component code is very less like the counter component, but it is usually a good practice to separate the HTML code and C# code into their own files. It is not only good from a maintenance point of view, but it is also easy to unit tests.
In the next Video, I am going to discuss How to split Razor Component in Blazor Application in detail. Here, in this Video, I try to explain ASP.NET Razor Component in Blazor application. I hope you enjoy this Video.
