How to create a simple BarcodeGenerator and QRCodeGenerator sample in a .NET 8 Blazor Web App using interactive render mode as a server?

This guide provides step-by-step instructions for creating a simple BarcodeGenerator and QRCodeGenerator in a .NET 8 Blazor Web App using interactive render mode with server-side capabilities.

Prerequisites:
Before you begin, ensure you have the following installed:

• .NET 8 SDK
• A compatible IDE such as Visual Studio or Visual Studio Code

Steps to Create the Barcode and QR Code Generator

1: Create a New Blazor Web App

• Open Visual Studio and create a new project.
• Select Blazor Web App, then click Next.
• Name your project and set the location, then click Next.
• Choose .NET 8 as the target framework.
• Select Blazor Web App and ensure Interactive Render Mode is selected.

Step 2: Install Syncfusion® Blazor Components

• Right-click on your project in Solution Explorer and select Manage NuGet Packages.
• Search for Syncfusion.Blazor.BarcodeGenerator and install it.

Step 3: Configure Services

• Open Program.cs and add the following lines to configure Syncfusion® services:

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSyncfusionBlazor(); 

Step 4: Implement Barcode and QR Code Generators

• Open the Pages/Index.razor file (or any Razor file you want to use).
• Add the following code to create a simple Barcode and QR Code:

@page "/"

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="200px" Height="150px" Value="Syncfusion"></SfQRCodeGenerator>
<SfBarcodeGenerator Width="200px" Height="150px" Type="@BarcodeType.Code39" Value="SYNCFUSION"></SfBarcodeGenerator> 

Step 5: Run the Application

• Press F5 or click Run to start the application.
• Navigate to the root page (e.g., /), and you should see the Barcode and QR Code rendered.

Output:

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning how to create a simple BarcodeGenerator and QRCodeGenerator sample in a .NET 8 Blazor Web App using interactive render mode as a server.

You can refer to our Blazor QRCode page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Barcode Sample to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac,, or feedback portal. We are always happy to assist you!