Codecademy Logo

Introduction to Blazor Server

Related learning

  • Course

    Learn ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      17 hours
  • Skill path

    Build Web Apps with ASP.NET

    Jumpstart your career with this skill path, first by learning the C# language, then building web apps with ASP.NET Core and the Razor Pages.
    • Includes 7 Courses
    • With Certificate
    • Intermediate.
      41 hours

Blazor Server Routing

In Blazor Server, the @page directive is used to define the route for a component, mapping URLs directly to that component. NavLink components help manage navigation between these routes. This enables a seamless transition between different components based on the URL.

@page "/home"


<h3>Home Component</h3>


<p>Welcome to the home page!</p>


<NavLink href="/about">Go to About</NavLink>

Blazor Server UI

Blazor Server in ASP.NET Core allows developers to create rich, interactive web UIs using C# instead of JavaScript. It relies on a SignalR connection to push UI updates to the client in real-time, offering seamless and dynamic web page experiences.

Blazor State Management

Blazor Server maintains component state through C# fields and properties in the @code block of Razor components. This allows the component to store data and manage state efficiently. Defining fields and properties here ensures they are part of the component’s lifecycle.

@page "/counter"


<h3>Counter</h3>


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


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


@code {
    private int currentCount = 0;


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

Blazor Hosting Models

Blazor in ASP.NET Core supports three primary hosting models:

  1. Blazor Server: Renders components server-side, using SignalR for UI updates.
  2. Blazor WebAssembly: Executes components fully in the browser via WebAssembly.
  3. Static SSR: Pre-renders components to static HTML, providing faster initial loads without interactivity.

Each model offers unique benefits depending on app requirements and scenarios.

Blazor Server Event Handling

In Blazor Server, managing UI events is made easy with event handler methods assigned via attributes like @onclick. This setup facilitates efficient interactivity in your web applications.

```cs
<button @onclick="HandleClick">Click Me!</button>


@code {
    private void HandleClick()
    {
        Console.WriteLine("Button clicked!");
    }
}
```

Blazor Server Structure

In a Blazor Server application, projects are organized into a Components folder, where .razor files reside. The Program.cs file is crucial for service registration and configuration. The App.razor file defines the routing structure of the application, guiding the navigation paths.

Data Binding in Blazor

Learn how data binding works in Blazor Server. Use @ for one-way bindings to display data and @bind for two-way bindings to sync UI and state changes. These mechanisms simplify data handling in your web apps.

@page "/binding-example"


<h3>Data Binding Example</h3>


<input @bind="userName" />


<p>Hello, @userName!</p>


@code {
    private string userName = "Laslo";
}

Blazor Server Modes

Blazor Server in C# supports different render modes, with InteractiveServer being a key option. This mode enables server-side components to render dynamically, allowing for more interactive web applications. Components are fully responsive to user interactions through server-mediated updates, enhancing user experience without full page reloads.

Render Collections in C#

Leverage @foreach in Blazor Server to dynamically render collections of data. This approach allows efficient iteration over list elements, producing dynamic content on the fly. Visualize each element without manual intervention by using the powerful @foreach loop.

@page "/products"


@{
    var products = new List<string> { "Apples", "Oranges", "Bananas" };
}


<ul>
    @foreach (var product in products)
    {
        <li>@product</li>
    }
</ul>

C# Conditional Rendering

In Blazor Server, conditional rendering is handled using the @if, @else if, and @else directives. These directives allow you to dynamically show or hide content based on the component’s state. This can be particularly useful for creating responsive interfaces that adapt to user interactions.

@page "/conditional"


<h3>Conditional Rendering Example</h3>


<p>@message</p>


@if (isConnected)
{
    <button @onclick="Disconnect">Disconnect</button>
}
else
{
    <button @onclick="Connect">Connect</button>
}


@code {
    private bool isConnected = false;
    private string message => isConnected ? "You are connected." : "Please connect.";


    private void Connect() => isConnected = true;
    private void Disconnect() => isConnected = false;
}

Blazor Server Components

In Blazor Server, applications are structured using Razor components, which blend HTML and C# code in .razor files. This creates interactive web apps on the server. Razor components provide a familiar syntax for developers, integrating UI rendering with .NET backend logic effortlessly.

@page "/hello"
<h3>Hello, World!</h3>


@code {
    protected override void OnInitialized()
    {
        // Initialize component logic here
    }
}

Learn more on Codecademy

  • Course

    Learn ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      17 hours
  • Skill path

    Build Web Apps with ASP.NET

    Jumpstart your career with this skill path, first by learning the C# language, then building web apps with ASP.NET Core and the Razor Pages.
    • Includes 7 Courses
    • With Certificate
    • Intermediate.
      41 hours
Next