Razor Pages, Blazor and SignalR

Build web UIs with .NET — server-rendered Razor Pages, component-based Blazor — and push real-time updates with SignalR.

.NET on the front end too

So far we've built APIs consumed by some other frontend. ASP.NET Core can also render the UI itself — in several styles — and push live updates to it.

Razor Pages: server-rendered pages

Razor mixes HTML with C# (@ switches to code). A Razor Page pairs a template with a handler class:

@* Pages/Products/Index.cshtml *@
@page
@model IndexModel
 
<h1>Products</h1>
<form method="get">
    <input name="search" value="@Model.Search" />
    <button>Search</button>
</form>
 
<ul>
@foreach (var p in Model.Products)
{
    <li>@p.Name — @p.Price.ToString("C")</li>          @* values are HTML-encoded automatically *@
}
</ul>

// Pages/Products/Index.cshtml.cs
public class IndexModel(ShopDb db) : PageModel
{
    [BindProperty(SupportsGet = true)] public string? Search { get; set; }
    public List<Product> Products { get; private set; } = [];
 
    public async Task OnGetAsync() =>
        Products = await db.Products
            .Where(p => Search == null || p.Name.Contains(Search))
            .ToListAsync();
}

The URL follows the file location (/Products). Handlers like OnGet/OnPost process requests; forms include anti-forgery tokens automatically. Great for content and form-heavy sites with little client-side interactivity.

Blazor: components in C#

Blazor builds UIs from components (.razor files) — like React or Vue, but in C#:

@* Counter.razor *@
@page "/counter"
@rendermode InteractiveServer
 
<h1>Count: @count</h1>
<button class="btn" @onclick="Increment">Click me</button>
 
@code {
    private int count;
    private void Increment() => count++;
}

Components are reusable (<ProductCard Product="p" OnAddToCart="Add" />), get services by injection (@inject ShopDb Db), and re-render when state changes.

Render modes

Mode	Where the component runs	Notes
Static SSR	Server, renders HTML once	Fast, SEO-friendly; no interactivity beyond forms/links
Interactive Server	Server; UI events and DOM diffs travel over a SignalR connection	Instant startup, full server access; needs a live connection
Interactive WebAssembly	In the browser on .NET WebAssembly	Works offline, scales well; larger first download
Interactive Auto	Server first, then WebAssembly once downloaded	Best of both, more complexity

You can choose per page or per component. (The C# editor in this course runs on the same .NET WebAssembly technology that powers Blazor WebAssembly.)

SignalR: real-time push

For chat, notifications, live dashboards and collaboration, the server must push updates. SignalR handles the connection (WebSockets, with fallbacks), reconnection and message routing:

public class ChatHub : Hub
{
    public async Task JoinRoom(string room) =>
        await Groups.AddToGroupAsync(Context.ConnectionId, room);
 
    public async Task SendMessage(string room, string text) =>
        await Clients.Group(room).SendAsync("MessageReceived", Context.User?.Identity?.Name, text);
}
 
builder.Services.AddSignalR();
app.MapHub<ChatHub>("/hubs/chat");

// Browser client
const connection = new signalR.HubConnectionBuilder().withUrl("/hubs/chat").build();
connection.on("MessageReceived", (user, text) => appendMessage(user, text));
await connection.start();
await connection.invoke("JoinRoom", "general");
await connection.invoke("SendMessage", "general", "Hello!");

Server code outside the hub can push too, via IHubContext<ChatHub> — e.g. notify a user when their order ships.

Scaling out

Each connection lives on one server. With several servers, use a backplane (Redis) or Azure SignalR Service so a message sent on server A reaches clients connected to server B — the pattern you designed in the chat scenario of System design basics.

Which UI approach?

Need	Good fit
Content site, forms, minimal JavaScript	Razor Pages or Blazor static SSR
Rich interactive app, team prefers C# end to end	Blazor
Team skilled in JavaScript, large frontend ecosystem	React/Angular/Vue + ASP.NET Core API
Live updates in any of the above	SignalR

Key takeaways

Razor Pages: server-rendered pages with a handler class — simple and productive for form-based sites.
Blazor: C# components with render modes from static SSR to interactive Server/WebAssembly/Auto.
SignalR hubs push real-time messages to connected clients and groups; scale out with a backplane.
Pick the UI style that matches the app's interactivity and the team's skills.