Log in to like this post! 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: What is Blazor? What is Razor? Razor vs Blazor: the difference and the link between them Blazor vs Razor components Using Blazor and Razor in Ignite UI ALTERNATIVE: Build enterprise Blazor apps with App Builder 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. 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. 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! 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. Compared to other low-code tools on the market, the main differentiator is that App Builderтм is backed up by a Design System, real UI components, and over 60+ UI controls. One of the best things about it is that App Builder generates production ready code in Blazor (and Angular) in a click, letting you inspect the code and easily preview how your Blazor app (or Angular app) looks and feel. And if you think about all the full-featured components you need to build modern-day business apps – like data grids, charts, Swagger UI, UI controls, customization options, theming, branding, and more – this is what the WYSIWYG drag-and-drop App Builderтм software delivers as well. Just recently, we published a comprehensive tutorial to help you build Blazor apps with App Builder and generate your Blazor code in less than 10 minutes. So, you can jump right to this Blazor step-by-step guide. And if you want to stay up to date with the latest releases and upgrades of the WYSIWYG App Builder or Ignite UI for Blazor , you can visit our blog or subscribe to the Infragistics’ YouTube channel that offers plenty of useful resources and step-by-step tutorials.