Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (65)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (153)DocIO  (23)Essential JS 2  (86)Essential Studio  (174)File Formats  (29)Flutter  (123)JavaScript  (187)Microsoft  (113)PDF  (67)React  (62)Succinctly series  (128)Syncfusion  (612)TypeScript  (32)Uno Platform  (3)UWP  (4)Vue  (40)Webinar  (35)Windows Forms  (59)WinUI  (53)WPF  (138)Xamarin  (156)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (120)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (403)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (11)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (314)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (37)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (23)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (226)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (17)Web  (377)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application

Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application

This blog provides a walk-through about how to integrate a Blazor WebAssembly project into an existing ASP.NET Core application with Syncfusion Blazor Query Builder. This blog will be helpful if you have an ASP.NET Core application and are planning to upgrade it into an ASP.NET Core WebAssembly project. This will avoid the complete redevelopment of the ASP.NET Core application to support Blazor.

What is Blazor?

Blazor is a single-page application framework that is used to build websites with HTML, CSS, and C# code. It creates rich interactive UIs using C# instead of JavaScript, and it can execute Razor views on the server as well as the client to present HTML to the browser.

What is Blazor WebAssembly and how does it work?

Blazor WebAssembly is a single-page application framework for building interactive client-side web apps with .NET, and it works in all web browsers. .NET WebAssembly-related code and its dependencies, such as C# and Razor files, are compiled into .NET assemblies, which are downloaded and executed directly on the browser. It is maintained as a bytecode format for fast download and maximum execution speed, and it can access the features of the browser via JavaScript, a capability called JavaScript interoperability. To learn about the pros and cons of using JavaScript interop in Blazor, refer to this article.

How to create the Blazor WebAssembly project

A Blazor WebAssembly (client-side) project can be created by following these steps.

Step #1: Download and install Visual Studio 2022

Download and install the latest version of Visual Studio 2022 with the ASP.NET and web development workloads.

If you don’t know how to install the application or stumble on a problem, you can go through the installation documentation here.

Step #2: Create a new project

After installation, open Visual Studio and select Create a new project.

Visual Studio Start Window
Visual Studio Start Window

Step #3: Select the Blazor WebAssembly app template

Select Blazor WebAssembly App from the template list and then click Next.

Template List in Visual Studio
Template List in Visual Studio

Step #4: Configure the project

At this step, the project configuration window will open. Here, we provide the required details such as project name and location, and then click the Next button.

Configuration Menu
Configuration Menu

Step #5: Create the Blazor WebAssembly application

Now, select a target framework of your choice and click Create to create the WebAssembly application.

Additional Information Menu
Additional Information Menu

The created Blazor application will look similar to the one in the following screenshot.

Created Blazor Application
Created Blazor Application

Adding Syncfusion Query Builder to the WebAssembly project

To create a Blazor query builder application, configure the Syncfusion NuGet package by referring to this documentation: Getting Started with Blazor Query Builder Component.

Add the Blazor WebAssembly project to an existing ASP.NET Core application

Integrate the Blazor WebAssembly project with an existing ASP.NET Core application by following the steps below.

Step #1: Open an existing ASP.NET Core application in Visual Studio.

ASP.NET Core Application in Visual Studio
ASP.NET Core Application in Visual Studio

Step # 2: Open the .csproj file of the ASP.NET Core application and add the following configuration code to integrate the Blazor WebAssembly project to the application.

<Project Sdk="Microsoft.NET.Sdk.Web">
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" />
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Include="..\..\BlazorWasmApp\BlazorWasmApp\BlazorWasmApp.csproj" />
  </ItemGroup>
</Project>

Step #3: Add the Blazor WebAssembly project into the ASP.NET Core solution by right-clicking on the application’s solution as shown in the screenshot below.

ASP.NET Core Solution Panel in Visual Studio
ASP.NET Core Solution Panel in Visual Studio

Step # 4: Open the Program.cs file and add the highlighted code lines below.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
app.UseBlazorFrameworkFiles();
app.MapFallbackToFile("index.html");
//app.MapRazorPages(); // Remove this line.
app.Run();

Step #5: Delete the favicon.ico file. The favicon.ico file is created by default in both the WebAssembly and ASP.NET Core applications. To avoid conflict between these two projects while publishing, we must remove one of the files. We can achieve this as illustrated in the screenshot below.

ASP.NET Core Application Window
ASP.NET Core Application Window

Step #6: Run the sample. The output will be like the screenshot below.

Blazor WebAssembly Application in ASP.NET Core Application
Blazor WebAssembly Application in ASP.NET Core Application

Resource

For the complete source code, refer to the integrate Blazor WebAssembly in ASP.NET Core app GitHub repository.

Conclusion

We hope this blog post on how to add a Blazor WebAssembly project to an existing ASP.NET Core application was helpful. If you want to see what else Syncfusion has to offer for ASP.NET Core developers, we hope you’ll try out Essential Studio for ASP.NET Core.

Please let us know if you have any queries or need clarification in the comments section below. You may also get in touch with us via our support forum, support portal, or feedback portal. We are delighted to help you!

Related blogs

If you like this post, we think you will enjoy the following ASP.NET Core articles as well:

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top