Post
Ask Question

ASP.NET Core Razor Componets

In this blog, we are going to discuss creating effective and reusable asp.net core razor components.

Requesting you to review my previous articles on Blazor

  • Blazor Overview
  • Blazor Project Structure
  • Components are the building blocks of a blazor application.
  • Razor components can be nested, reused, and if implemented properly, can be shared across multiple projects.
  • Razor component files have the extension .razor

Let us go ahead and look at a razor component example. Counter.razor is a component which we can see when we are creating a blazor project.

Counter.razor

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

The razor component is a mix of the below two things

  1. HTML markup which defines the look and feel of the component.
  2. C# Code which defines the processing logic

Let us deep dive into the example and understand each line

  1. C# Code is in @code block. We can have more than one @code blocks
  2. The C # code increments currentCount variable by 1 every time when we click on the button.
  3. The method IncrementCount() is wired up using the attributeonclickattribute. When the button is clicked, this function will be invoked.
  4. In HTML, to access the private variable currentCount, use the character -@.

Notes

  • While compiling the application, the HTML and C# code will be converted into a component class.
  • The name of the generated class matches the name of the component file.
  • Component file name start with an uppercase character. If we add a component file -start with lower case letter, the code will fail to compile, and we get the compiler error – “Component names cannot start with a lowercase character”

In case of Blazor Server project,

  • Blazor server projects will run on the server.
  • A SignalR connection will be established between server and client browser.
  • The click event information will be sent to server over the SignalR connection.
  • In response to the event, the component is regenerated, but the entire HTML is not sent back to the client. Here, only the new counter value will be sent back to browser.
  • Instead of reloading and updating the entire page, only the changed part of the page is updated. This leads the application feels more response and faster.

Razor component rendering

In the example, Counter component rendered by navigating to /counter in the browser. The path is specified at the top of the component using the directive @page

@page "/counter"

Razor component nesting

A component can be nested inside another component using HTML syntax. For an instance, to nest the Counter component in Index component using the below approach

<Counter/>
The entire Index component as below.
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
Nested Component <Counter/>
<SurveyPrompt Title="How is Blazor working for you?" />

Best Practice to add components

Components can be added anywhere in a blazor project. However, it would be a good practice to add components that generate web pages in the Pages folder and reusable non-page components in the Shared folder. It is very much possible to add the components in custom folders depending on your wish.

Separate component into HTML and C# code

In the example, Counter.razor, both HTML and C# code are in a single file. However, it would be a good practice to keep HTML and C# code in separate files. It is not only easy for maintenance but also good for unit testing. There are two approaches through which we can separate the components into HTML and C# code.

  1. Partial Files Approach
  2. Base class Approach

I will be explaining these two approaches in the next article.