Blog Developers

Blazor vs Razor: The Difference Solved

Jason Beres [Infragistics] / Tuesday, May 17, 2022

With the release of .NET 6, and the hype-cycle around Blazor as a go-to solution for C# developers to write single-page web applications, the question comes up, “What is the difference between Blazor and Razor”?

Though Blazor and Razor are not directly comparable, as they represent two distinct capabilities, often the terms for Blazor components and Razor components are widely used interchangeably.

With this article, I will clear up the difference between Blazor vs Razor, as well as show you how to use each in Ignite UI for Blazor.  You’ll also build a .NET 6 app, using the Card View component from Ignite UI, so you can get familiar with Blazor and Razor in a real application!

The questions and topics the blog post will cover:

Try Ignite UI for Blazor

What Is Blazor

Blazor is a free open-source web framework, enabling developers to create interactive web UIs with C#, HTML code and Razor syntax instead of JavaScript. The way Blazor works is that it creates client-based apps with WebAssembly and Server-side applications with ASP.NET. The Server app communicates with the browser through a constant connection using SignalR, while WebAssembly executes directly in the browser.

Our blog features a detailed overview of Blazor, Blazor WebAssembly, and Blazor Server. So in case you want to dive in deeper, go on and read Blazor Server vs. Blazor WebAssembly blog post.

What Is Razor

While Blazor is a framework, Razor, or Razor Pages, is a templating (View) engine. The Razor syntax combines Razor markup, C#, and HTML to create dynamic web content. Typically, Razor is used for powering ASP.NET MVC Views. So, every time you write an MVC View, you will usually use Razor syntax to bind data to the markup. In an MVC app, the Razor page is processed on the server, and then sent to the client as a single HTML page.  When the page is refreshed in the browser, it is re-processed on the server, and sent back to the client.

Razor vs Blazor: The Difference & the Link Between Them Solved

Blazor is a framework that leverages the Razor components to produce dynamic HTML. The biggest difference between Razor and Blazor is that Razor is a markup language with C#, while Blazor is the framework that lets you run C# code and use the Razor view engine in the browser.

And What About Blazor vs Razor Components?

Razor components are units of markup and code that represent the basic UI elements of any Blazor app implemented with a .razor extension. In other words, Blazor uses Razor components to create UIs, meaning you can write Razor components and utilize Blazor as the client-side hosting model for them.

This Is How to Use Blazor and Razor in Ignite UI

To get started, you must install both NodeJS and Visual Studio Code on your machine.

Step 1 - Create a New Blazor project

Start Visual Studio 2022 and click Create a new project on the start page, select the Blazor Web Assembly App template, and click Next. After providing a project name and description, click Create.

Create a Blazor WebAssembly App in Visual Studio 2022

Step 2 - Install Ignite UI for Blazor package

Right clicking the Solution, or Project, and select Manage NuGet Packages for Solution. Then, open the Browse tab in the package manager dialog, select the Infragistics package source, and install the IgniteUI.Blazor NuGet package.

Add Blazor Nuget Packages to Visual Studio Project

Step 3 - Register Ignite UI for Blazor component

Open the Program.cs file and register the Ignite UI for Blazor Service by adding the following after the builder.Services.AddScoped … line:

builder.Services.AddIgniteUIBlazor();

Step 4 – Update the Imports.razor file

Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

@using IgniteUI.Blazor.Controls

Step 5 – Update the Pages/_Layout.cshtml file

Add the Style Sheet in the <head> element of the \wwwroot\index.html file:

<head>
	...
	<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>
 

Step 6 - Add Ignite UI for Blazor Component

Add an Ignite UI for Blazor component to your razor page:

<IgbCard style="width:350px">
	<IgbCardMedia>
		<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
	</IgbCardMedia>
	<IgbCardHeader>
		<h4>Jane Doe</h4>
		<h6>Professional Photographer</h6>
	</IgbCardHeader>
	<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
		Photography is a way of feeling, of touching,
		of loving. What you have caught on film is captured forever...
		it remembers little things, long after you have
		forgotten everything.</IgbCardContent>
	<IgbCardActions>
		<IgbButton>More Info</IgbButton>
	</IgbCardActions>
</IgbCard>

Step 7 – Build & Run your App

And you’re all set! Click the Run button to build and run your new Blazor app running the Card View in Ignite UI!

Blazor Card View

Building Enterprise Blazor Apps with App Builder

Now, if you want to significantly shorten development time, you can use low-code app makers like App Builderтм.

App Builderтм is a brand-new cloud-based WYSIWYG low-code development platform and drag-and-drop app builder that streamlines everything from design to code. The main purpose of the software is to eliminate the complexity behind UI design and app creation, while still enabling you and the entire dev team to focus on domain expertise for the business logic. You can build your business app in Blazor (and Angular) much faster than before with no hand-coding. And what’s more, you have the option to download your project as a zip file or publish it on GitHub.