Create a Blazor Web App using ASP.NET Core

Blazor is a another powerful framework from Microsoft that allows web developers to build interactive web applications using C# instead of JavaScript. Combined with ASP.NET Core, Blazor offers a modern, full-stack web development experience.

In this post, you'll learn how to build a basic website using ASP.NET Core and Blazor Server. We'll go step-by-step, covering setup, project structure, and building your first components.

Create a Blazor Web App using ASP.NET Core

Getting Started

Blazor is a framework for building interactive client-side web UI with .NET. It’s part of the ASP.NET Core ecosystem and supports both client-side and server-side development. There are two main hosting models:

Blazor Server: The app runs on the server, and UI updates are handled via SignalR.
Blazor WebAssembly (WASM): The app runs in the browser using WebAssembly.

For this post, we'll use Blazor Server, which is easier to set up and works well for internal apps, dashboards, and admin panels.

Key Features of Blazor

Component-Based Architecture
- UI is built using reusable Razor components.
- Components are written in C#, HTML, and Razor syntax.
- Encourages modularity and maintainability.
Runs .NET in the Browser (Blazor WebAssembly)
- Uses WebAssembly (Wasm) to run C# code in the browser.
- No plugins or JavaScript required for logic execution.
- Supports offline and static site hosting.
Server-Side Rendering (Blazor Server)
- Executes C# code on the server, while UI updates are sent to the browser via SignalR.
- Fast initial load and smaller download size compared to WebAssembly.
Full Stack .NET Development
- Allows using C# on both client and server.
- Shared code between client and server projects (e.g., models, validation logic).
Interoperability with JavaScript
- Easily call JavaScript from C# and vice versa using JS interop.
- Useful for leveraging existing JavaScript libraries when needed.
Built-in Dependency Injection (DI)
- Supports DI natively, just like ASP.NET Core.
- Encourages testable and loosely-coupled code.
Routing
- URL-based routing is built-in via the @page directive.
- Enables navigation between components via routes.
Form and Validation Support: Includes components for forms, input handling, and data validation using DataAnnotations.
Live Reload and Hot Reload: Improves development speed by updating the UI without restarting the application.
Tooling and IDE Support
- First-class support in Visual Studio, Visual Studio Code, and Rider.
- Integrated debugging, IntelliSense, and performance profiling.
Secure and Scalable
- Inherits ASP.NET Core's security features, including authentication and authorization.
- Supports scalable hosting models (WebAssembly for client-heavy apps; Server for thin clients).
Blazor Hybrid (Desktop + Web)
- Can be used in desktop apps via .NET MAUI (Multi-platform App UI).
- Enables reuse of Blazor components across mobile, desktop, and web.

Why Use Blazor Instead of ASP.NET Core Web App?

Choosing Blazor over a traditional ASP.NET Core web app (MVC or Razor Pages) depends on your specific project goals, team expertise, and architectural preferences.

Full-Stack Development with C# (No JavaScript)
- Blazor lets you write client-side interactivity in C#, so you don't need JavaScript for DOM manipulation, events, or AJAX calls.
- Ideal if your team is strong in .NET/C# but weak in JavaScript or modern frontend frameworks (like React or Angular).
- Use Blazor if you want to stay in a C#/.NET ecosystem for both front-end and back-end.
Rich Interactive UI (like SPA)
- Blazor WebAssembly gives a Single Page Application (SPA) experience similar to Angular/React but in C#.
- Good for highly interactive apps with many UI elements updating dynamically without full page reloads.
- Use Blazor WebAssembly for dynamic, interactive, client-side web apps.
Component-Based Architecture
- Like React, Blazor uses reusable UI components with parameters and events.
- Easier to manage and reuse UI logic compared to Razor Pages or MVC Views.
- If you prefer modular, component-driven UIs — Blazor wins here.
SignalR & Real-Time Support with Blazor Server
- Blazor Server runs on the server and updates the UI in real-time using SignalR.
- You can create responsive, real-time apps without worrying about client-side code.
- Ideal for internal dashboards, admin panels, or collaborative tools.
Tight Integration with .NET Ecosystem
- Direct access to .NET libraries, LINQ, dependency injection, validation, etc.
- No need to bridge between frontend (JavaScript) and backend (C#) — it’s all one stack.

Create a New Blazor Web App Project

Prerequisites
Before starting, ensure you have the following installed:

.NET SDK 7.0 or later
Visual Studio 2022 or later
- Workload: ASP.NET and web development
Basic knowledge of C# and HTML

Create a Project Using Visual Studio

Open Visual Studio.
Click on Create a new project.
Search for Blazor Web App, select it, and click Next.
Enter your project name, e.g., MyBlazorApp.
Click Next and configure the following options:
- Target Framework: .NET 8 (LTS)
- Authentication Type: None (or Microsoft Identity if needed)
- Interactive rendering mode: Select from:
  - Server (Blazor Server)
  - WebAssembly (Blazor WASM)
  - Auto (hybrid)
Click Create.

Understand the Project Structure

Visual Studio will generate a Blazor Server project with the following structure:

BlazorWebsite/
│
├── Pages/               # Razor components (e.g., Index.razor)
├── Shared/              # Shared layout/components
├── _Imports.razor       # Shared namespaces
├── App.razor            # App router
├── Program.cs           # Entry point
├── wwwroot/             # Static files (CSS, JS, images)
└── Startup.cs (if older template)

The Blazor Web App template includes:

Program.cs: Entry point for the app.
App.razor: Root component.
Pages/: Contains Razor components (.razor files) like Index.razor, Counter.razor, etc.
Shared/: Common UI components like MainLayout.razor.
wwwroot/: Static assets (CSS, images, JS).
Components/: Modern Blazor apps (from .NET 8) separate reusable components here.

Run the Application

Press F5 or click Start Debugging.

The app will build and launch in your browser.
You’ll see a simple layout with a navigation menu, a home page, and a counter page.
Try clicking the Counter link and increment the count – all without a full page reload.

Adding a Blazor Component (Page)

A Blazor components are reusable pieces of UI in a Blazor application, written using Razor syntax (a mix of HTML and C#). Blazor components are the fundamental building blocks of a Blazor application.

Let’s add a new page called About.razor:

Right-click the Pages/ folder → Add → Razor Component.
Name it About.razor.

Update the page with below code:

@page "/about"
<h3>About Us</h3>
<p>Welcome to our Blazor website. This page was built using Blazor Server!</p>
@code {
}

Add it to the navigation menu in Shared/NavMenu.razor:

<div class="nav-item px-3">
<NavLink class="nav-link" href="about">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> About Us
</NavLink>
</div>

Adding a Dynamic Component (Simple Form)

Let’s add a contact form in Pages/Contact.razor and update the page with below code:

@page "/contact"
<h3>Contact Us</h3>
<EditForm Model="@contact" OnValidSubmit="HandleSubmit">
<DataAnnotationsValidator /> <ValidationSummary />
<div>        <label>Name:</label> <InputText @bind-Value="contact.Name" />    </div>
<div> <label>Email:</label> <InputText @bind-Value="contact.Email" /></div>
<div> <label>Message:</label> <InputTextArea @bind-Value="contact.Message" /> </div>
<button type="submit">Send</button>
</EditForm>
@if (submitted) { <p>Thank you for your message, @contact.Name!</p> }
@code {
        private ContactModel contact = new();
        private bool submitted = false;
        private void HandleSubmit()
        {
          submitted = true;
        }
        public class ContactModel
        {
          [Required]
          public string Name { get; set; }
          [Required] [EmailAddress]
          public string Email { get; set; }
          [Required]
          public string Message { get; set; }
        }
	}

Open the file Imports.razor and replace with below code.

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using myblazorapp
@using myblazorapp.Components
@using System.ComponentModel.DataAnnotations

Again add below to the navigation menu in Shared/NavMenu.razor:

<div class="nav-item px-3">
<NavLink class="nav-link" href="contact">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Contact Us
</NavLink>
</div>

Run Your Website

Press F5 or click Start in Visual Studio.
Your browser will open the Blazor app.
Navigate to /about or /contact.

When NOT to Use Blazor

SEO: You need strong SEO and fast initial load (e.g., blogs, marketing sites). MVC/Razor Pages render HTML on the server.
Load Time: You want minimal initial download size (Blazor WebAssembly can be heavy).
Browser Compatibility: You must support older browsers or strict environments (some don’t support WebAssembly well).
Learning Curve: You're already comfortable with JavaScript + MVC. Sticking with MVC/Razor Pages might be faster.
App Size & Performance: You need high performance for low-bandwidth users (Blazor WebAssembly can be slower initially).

Summary

With ASP.NET Core and Blazor Server, you can build modern, interactive web applications using just C#. Whether you're building admin panels, internal tools, or full websites, Blazor is a powerful and productive choice. I hope this was helpful to you

Thanks

Create a Blazor Web App using ASP.NET Core

Create a Blazor Web App using ASP.NET Core

Getting Started

Key Features of Blazor

Why Use Blazor Instead of ASP.NET Core Web App?

Create a New Blazor Web App Project

Create a Project Using Visual Studio

Understand the Project Structure

Run the Application

Adding a Blazor Component (Page)

Adding a Dynamic Component (Simple Form)

Run Your Website

When NOT to Use Blazor

Summary

نموذج الاتصال