Exploring ASP.NET Core Razor Components and Blazor Server

Building Dynamic Web Applications with Microsoft's Modern Web Framework

The landscape of web development continues to evolve rapidly, and Microsoft's ASP.NET Core has kept pace with innovative solutions for building modern web applications. Among its most powerful features are Razor Components and Blazor Server, which together provide a robust framework for creating dynamic, interactive web experiences without writing extensive JavaScript code.

In this comprehensive guide, we'll explore how these technologies work, their advantages and limitations, and how you can leverage them to build sophisticated web applications.

Understanding the Foundations: What Are Razor Components?

Razor Components represent a paradigm shift in how we build web UI with ASP.NET Core. At their core, they are reusable UI elements built with a combination of C# and HTML markup. If you're familiar with ASP.NET Core MVC or Razor Pages, you'll find the syntax immediately recognizable, but with additional capabilities that make components truly powerful.

The concept behind Razor Components is simple yet revolutionary: enable developers to build encapsulated pieces of UI that can be reused throughout an application. Each component includes both the UI logic (HTML markup) and the business logic (C# code) needed to function. This encapsulation makes components easier to test, maintain, and reuse.

A basic Razor Component looks something like this:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

This simple example demonstrates several key features of Razor Components:

1. Components can have routes associated with them (via the @page directive)

2. They combine HTML markup with C# expressions (using the @ symbol)

3. They can handle events (like the @onclick attribute)

4. They contain encapsulated state (the currentCount field)

5. They include methods that can be called in response to events

The beauty of this approach is that it provides a clean separation of concerns while keeping related code together in a single file. This makes maintenance much simpler, as you don't need to jump between multiple files to understand how a piece of UI works.

Blazor Server: The Runtime Environment

While Razor Components provide the programming model for building UI components, Blazor Server provides the runtime environment that executes these components. Blazor Server is one of several hosting models available in the Blazor framework, and it's particularly noteworthy for its efficient server-side execution model.

In Blazor Server, components are executed on the server within an ASP.NET Core application. When a user interacts with the application in their browser, those interactions are sent back to the server over a persistent connection (typically using SignalR). The server processes the events, updates the component state, and sends back UI updates to the client.

This architecture offers several key advantages:

1. Minimal JavaScript requirements: Since all C# code runs on the server, there's no need to translate it to JavaScript or WebAssembly.

2. Smaller download size: The initial download is small because only a small client-side JS file is needed, not the entire .NET runtime.

3. Immediate access to server resources: Components have direct access to server-side resources like databases, file systems, and more.

4. Better performance on low-powered devices: Since processing happens on the server, client device capabilities are less important.

The SignalR connection that enables this architecture is established when the application first loads and maintains a persistent, real-time connection between the browser and the server. This connection is what enables the "live" feeling of Blazor Server applications, where UI updates happen almost instantly after user interactions.

Setting Up Your First Blazor Server Application

Getting started with Blazor Server is surprisingly straightforward. If you have the .NET SDK installed, you can create a new Blazor Server application with a single command:

dotnet new blazorserver -o MyFirstBlazorApp

This creates a new directory called "MyFirstBlazorApp" with a fully functional Blazor Server application that includes several example pages and components. You can run the application immediately with:

cd MyFirstBlazorApp
dotnet run

Navigating to https://localhost:5001 in your browser will show you the default Blazor Server template, which includes a home page, a counter page (like our example above), and a fetch data page that demonstrates how to retrieve and display data.

The project structure of a Blazor Server application will look familiar if you've worked with ASP.NET Core before:

• Program.cs: The entry point of the application, where services are configured and the app is built.

• Startup.cs (in older versions before .NET 6): Contains configuration for the application's services and middleware.

• Pages/: Contains Razor Components that correspond to routable pages.

• Shared/: Contains reusable components like layouts and navigation menus.

• Data/: Contains classes for accessing and managing data.

• wwwroot/: Contains static files like CSS, JavaScript, and images.

Component Lifecycle and State Management

Understanding the lifecycle of a Razor Component is crucial for building efficient and responsive applications. Components go through several lifecycle stages, and you can hook into these stages by overriding specific methods:

1. SetParametersAsync: Called when the component is initialized and receives parameters from its parent.

2. OnInitialized/OnInitializedAsync: Called after the component is initialized and can be used to perform one-time setup logic.

3. OnParametersSet/OnParametersSetAsync: Called when the component receives new parameters from its parent.

4. OnAfterRender/OnAfterRenderAsync: Called after the component has been rendered to the DOM.

5. IDisposable.Dispose: Called when the component is removed from the UI.

Here's an example of a component that uses several of these lifecycle methods:

@page "/lifecycle-example"
@implements IDisposable

<h1>Lifecycle Example</h1>
<p>Current time: @currentTime</p>

@code {
    private DateTime currentTime;
    private System.Threading.Timer timer;

    protected override void OnInitialized()
    {
        currentTime = DateTime.Now;
        timer = new System.Threading.Timer(_ =>
        {
            currentTime = DateTime.Now;
            InvokeAsync(StateHasChanged);
        }, null, 0, 1000);
    }

    public void Dispose()
    {
        timer?.Dispose();
    }
}

This component initializes a timer when it's created, updates the current time every second, and properly disposes of the timer when the component is removed from the UI. The StateHasChanged method is particularly important—it tells Blazor that the component's state has changed and it needs to be re-rendered.

State management in Blazor Server is straightforward because you're working with regular C# objects. You can use fields and properties within your component to store state, and that state will persist as long as the user's session is active. For more complex applications, you might consider using a state management library or implementing your own state container.

Building Interactive UIs with Razor Components

One of the most powerful features of Razor Components is their ability to handle user interactions directly in C# code. This is achieved through event binding, which connects DOM events to C# methods.

For example, to handle a button click:

<button @onclick="HandleClick">Click Me</button>

@code {
    private void HandleClick()
    {
        // Handle the click event
    }
}

You can also pass additional data to event handlers:

<button @onclick="@(() => SelectItem(item.Id))">Select Item</button>

@code {
    private void SelectItem(int itemId)
    {
        // Handle the selection
    }
}

Event binding works for all standard DOM events, including onclick, onchange, onsubmit, and many others. This allows you to create rich, interactive UIs without writing JavaScript.

Forms are particularly easy to work with in Razor Components thanks to the built-in data binding system. You can bind form elements directly to C# properties:

<input @bind="username" />
<p>Hello, @username!</p>

@code {
    private string username;
}

By default, the binding updates when the element loses focus. For real-time updates, you can use @bind:event="oninput":

<input @bind="searchTerm" @bind:event="oninput" />
<p>Searching for: @searchTerm</p>

@code {
    private string searchTerm;
}

Component Communication and Parameter Passing

In real-world applications, components often need to communicate with each other. Blazor provides several mechanisms for this:

1. Parameters: Components can receive data from their parents through parameters.

2. Events: Components can raise events that parent components can handle.

3. Cascading parameters: Data can be passed down through the component hierarchy without having to specify parameters at each level.

4. Services: Components can share data and functionality through dependency injection.

Parameters are declared using the [Parameter] attribute:

@code {
    [Parameter]
    public string Title { get; set; }
}

Parent components can then pass values to these parameters:

<ChildComponent Title="Hello from parent" />

For two-way communication, a component can define an event callback:

@code {
    [Parameter]
    public EventCallback<string> OnValueChanged { get; set; }
    
    private async Task UpdateValue(string newValue)
    {
        await OnValueChanged.InvokeAsync(newValue);
    }
}

The parent component can then handle this event:

<ChildComponent OnValueChanged="HandleValueChanged" />

@code {
    private void HandleValueChanged(string value)
    {
        // Process the value
    }
}

Cascading parameters provide a way to pass data through multiple levels of components without having to relay parameters at each level. This is particularly useful for data that many components need, like themes or user authentication information:

<CascadingValue Value="@theme">
    <ChildComponent />
</CascadingValue>

@code {
    private Theme theme = new Theme { PrimaryColor = "#007bff" };
}

Child components (at any level) can then access this value:

@code {
    [CascadingParameter]
    public Theme CurrentTheme { get; set; }
}

Dependency Injection and Services

Blazor Server fully supports ASP.NET Core's dependency injection system, making it easy to use services in your components. Services can be registered in the Program.cs file:

builder.Services.AddSingleton<WeatherForecastService>();

And then injected into components using the @inject directive:

@page "/fetchdata"
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

This approach makes it easy to separate concerns in your application. For example, you might have:

• A service for API communication

• A service for managing application state

• A service for authentication and authorization

• A service for logging

Each service can be implemented independently and then composed together in your components through dependency injection.

Security in Blazor Server Applications

Security is a critical concern for any web application, and Blazor Server provides robust security features based on ASP.NET Core's identity system. Since Blazor Server runs on the server, you have access to all the authentication and authorization features of ASP.NET Core.

Authentication can be implemented using ASP.NET Core Identity, which provides a complete system for managing users, roles, and claims. Once a user is authenticated, you can use the AuthorizeView component to show different content to authenticated and unauthenticated users:

<AuthorizeView>
    <Authorized>
        <h1>Hello, @context.User.Identity.Name!</h1>
        <p>You are authorized to view this content.</p>
    </Authorized>
    <NotAuthorized>
        <h1>Authentication Required</h1>
        <p>You must log in to view this content.</p>
    </NotAuthorized>
</AuthorizeView>

For more fine-grained control, you can use the [Authorize] attribute on components or pages:

@page "/secured-page"
@attribute [Authorize(Roles = "Admin")]

<h1>Admin Only</h1>
<p>Only administrators can see this page.</p>

Additionally, you can programmatically check authorization within your component code:

@inject AuthenticationStateProvider AuthenticationStateProvider

@code {
    private async Task<bool> IsUserAuthenticated()
    {
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        return authState.User.Identity.IsAuthenticated;
    }
}

Performance Considerations and Optimization

While Blazor Server offers excellent performance for many scenarios, there are some considerations to keep in mind, especially for applications with many users or complex UIs.

The server-side execution model means that each user session consumes server resources. This includes memory for the component state and CPU for processing events. For applications with many concurrent users, this can become a scaling concern.

Here are some strategies for optimizing Blazor Server performance:

1. Minimize component renders: Use techniques like @key directives and careful state management to avoid unnecessary re-renders.

2. Use virtualization for large lists: The Virtualize component renders only the visible portion of a large list, greatly reducing the rendering overhead.

3. Implement caching: Cache expensive operations or data retrievals to reduce processing time.

4. Optimize SignalR connection: Configure the SignalR connection for your specific needs, including buffer sizes and timeout values.

5. Use server-side rendering wisely: Render static content on the server where possible to reduce the amount of data sent over the wire.

For example, here's how to implement virtualization for a large list:

<Virtualize Items="@largeDataSet" Context="item">
    <p>@item.Name</p>
</Virtualize>

@code {
    private List<DataItem> largeDataSet = new();
    
    protected override void OnInitialized()
    {
        // Populate the large data set
        for (int i = 0; i < 10000; i++)
        {
            largeDataSet.Add(new DataItem { Id = i, Name = $"Item {i}" });
        }
    }
    
    private class DataItem
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

With virtualization, even a list with thousands of items can render efficiently, as only the visible items are actually created in the DOM.

Real-World Use Cases and Examples

Blazor Server is suitable for a wide range of applications, from simple interactive websites to complex enterprise applications. Here are some examples of where Blazor Server shines:

Intranet Applications

Intranet applications are a perfect fit for Blazor Server because:

• Network latency is typically low within an organization

• The number of concurrent users is usually manageable

• Security is simplified since all processing happens on the server

A typical intranet application might include dashboards, document management, and internal tools. Blazor Server makes it easy to build these with rich interactivity and real-time updates.

Line of Business Applications

Line of business applications often require complex forms, data validation, and business logic. Blazor Server excels here because:

• C# provides robust type checking and error handling

• The component model encourages reuse of common UI elements

• Server-side execution ensures business rules are enforced consistently

For example, a customer management system built with Blazor Server might include components for customer details, order history, and payment processing, all sharing common validation and business logic.

Real-Time Dashboards

Applications that require real-time updates benefit from Blazor Server's SignalR integration:

• Stock tickers and financial dashboards

• Monitoring systems for servers or IoT devices

• Collaborative tools with multiple concurrent users

Here's a simple example of a real-time counter that updates across all connected clients:

@page "/shared-counter"
@implements IDisposable
@inject SharedCounterService CounterService

<h1>Shared Counter</h1>
<p>Current count: @CounterService.CurrentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    protected override void OnInitialized()
    {
        CounterService.CountChanged += StateHasChanged;
    }

    private void IncrementCount()
    {
        CounterService.IncrementCount();
    }

    public void Dispose()
    {
        CounterService.CountChanged -= StateHasChanged;
    }
}

With a corresponding service:

public class SharedCounterService
{
    public int CurrentCount { get; private set; } = 0;
    public event Action CountChanged;

    public void IncrementCount()
    {
        CurrentCount++;
        CountChanged?.Invoke();
    }
}

Advantages and Limitations of Blazor Server

Like any technology, Blazor Server has both strengths and limitations that are important to understand when deciding if it's the right choice for your project.

Advantages

1. C# Everywhere: Use C# for both frontend and backend, eliminating the need to switch between languages.

2. Full .NET Ecosystem: Access to the entire .NET ecosystem, including libraries, tools, and frameworks.

3. Small Initial Download: The client-side JavaScript is minimal, leading to faster initial page loads.

4. Server-Side Resources: Direct access to databases, file systems, and other server resources.

5. Automatic UI Updates: The SignalR connection ensures UI stays in sync with server state.

6. SEO Friendly: Server-side rendering makes content available to search engines.

7. Works on All Browsers: No WebAssembly support required, unlike Blazor WebAssembly.

Limitations

1. Connection Dependency: Requires a constant connection to the server; if the connection is lost, the application stops functioning until reconnected.

2. Latency Sensitivity: User interactions must round-trip to the server, which can introduce perceptible delay on high-latency connections.

3. Scalability Concerns: Each active user session consumes server resources, which can limit the number of concurrent users.

4. Limited Offline Support: Without a connection to the server, the application cannot function.

5. Not Ideal for Public-Facing High-Traffic Sites: The server resource requirements make it less suitable for sites with very high traffic.

Future Directions: Blazor United and Beyond

Microsoft continues to evolve the Blazor framework, with significant enhancements coming in future releases. One of the most exciting developments is Blazor United, which aims to combine the best aspects of Blazor Server and Blazor WebAssembly.

Blazor United introduces a new hosting model that renders components on the server for the initial request (like traditional Razor Pages) but can then enhance the page with interactive components that run either on the server or in the browser.

This approach offers several benefits:

1. Fast Initial Load: Server-side rendering provides content quickly for the first page load.

2. Progressive Enhancement: The application can start with server-side rendering and progressively enhance with client-side interactivity.

3. Flexibility: Developers can choose where each component runs based on the specific needs of that component.

The future of Blazor also includes improvements in areas like:

• Better support for CSS isolation and JavaScript interoperability

• Enhanced debugging and development experiences

• Improved performance for both server and WebAssembly hosting models

• Expanded component libraries and ecosystem

Getting Started with Your Own Blazor Server Project

If you're convinced that Blazor Server might be the right choice for your next project, here are some steps to get started:

1. Learn the Basics: Familiarize yourself with C#, ASP.NET Core, and the Razor syntax if you're not already comfortable with them.

2. Set Up Your Development Environment: Install the latest .NET SDK and a suitable IDE like Visual Studio or Visual Studio Code with the C# extension.

3. Create a Starter Project: Use the Blazor Server template as a starting point to understand the structure and conventions.

4. Explore Component Libraries: Consider using a component library like Radzen, MatBlazor, or Blazored to speed up your development.

5. Join the Community: Engage with the Blazor community through forums, GitHub, and social media to learn from others' experiences.

Conclusion

Razor Components and Blazor Server represent a significant step forward in web development with ASP.NET Core. By enabling developers to build interactive web UIs using C# instead of JavaScript, Microsoft has created a compelling alternative to traditional web frameworks.

The component-based architecture, combined with the server-side execution model, offers unique advantages for many types of applications, particularly those that benefit from a strong typing system, access to server resources, and real-time updates.

While Blazor Server isn't the right choice for every web application, it excels in scenarios like intranet applications, line of business systems, and real-time dashboards. Understanding its strengths and limitations will help you make an informed decision about whether to adopt it for your next project.

As the Blazor ecosystem continues to mature and evolve, we can expect even more powerful capabilities and improved performance in future releases. Whether you're building a simple interactive website or a complex enterprise application, Blazor Server provides a solid foundation for creating modern, responsive web experiences.

Join the Community

Don't miss out on more in-depth articles about ASP.NET and modern web development! Subscribe to ASP Today to receive regular updates right in your inbox. Join our vibrant community on Substack Chat to discuss the latest trends, share your experiences, and get help with your development challenges. Together, we can build better web applications and grow as developers.