Thursday, March 28, 2024
HomeC#Easy Steps to Combine a Blazor WebAssembly Mission with an Current ASP.NET...

Easy Steps to Combine a Blazor WebAssembly Mission with an Current ASP.NET Core Utility


This weblog gives a walk-through about easy methods to combine a Blazor WebAssembly challenge into an present ASP.NET Core utility with Syncfusion Blazor Question Builder. This weblog might be useful in case you have an ASP.NET Core utility and are planning to improve it into an ASP.NET Core WebAssembly challenge. This can keep away from the whole redevelopment of the ASP.NET Core utility to help Blazor.

What’s Blazor?

Blazor is a single-page utility framework that’s used to construct web sites with HTML, CSS, and C# code. It creates wealthy interactive UIs utilizing C# as a substitute of JavaScript, and it may possibly execute Razor views on the server in addition to the shopper to current HTML to the browser.

What’s Blazor WebAssembly and the way does it work?

Blazor WebAssembly is a single-page utility framework for constructing interactive client-side internet apps with .NET, and it really works in all internet browsers. .NET WebAssembly-related code and its dependencies, comparable to C# and Razor recordsdata, are compiled into .NET assemblies, that are downloaded and executed immediately on the browser. It’s maintained as a bytecode format for quick obtain and most execution pace, and it may possibly entry the options of the browser by way of JavaScript, a functionality known as JavaScript interoperability. To study concerning the professionals and cons of utilizing JavaScript interop in Blazor, confer with this text.

How one can create the Blazor WebAssembly challenge

A Blazor WebAssembly (client-side) challenge could be created by following these steps.

Step #1: Obtain and set up Visible Studio 2022

Obtain and set up the most recent model of Visible Studio 2022 with the ASP.NET and internet growth workloads.

In the event you don’t know easy methods to set up the applying or locate an issue, you’ll be able to undergo the set up documentation right here.

Step #2: Create a brand new challenge

After set up, open Visible Studio and choose Create a brand new challenge.

Visual Studio Start Window
Visible Studio Begin Window

Step #3: Choose the Blazor WebAssembly app template

Choose Blazor WebAssembly App from the template checklist after which click on Subsequent.

Template List in Visual Studio
Template Record in Visible Studio

Step #4: Configure the challenge

At this step, the challenge configuration window will open. Right here, we offer the required particulars comparable to challenge title and location, after which click on the Subsequent button.

Configuration Menu
Configuration Menu

Step #5: Create the Blazor WebAssembly utility

Now, choose a goal framework of your selection and click on Create to create the WebAssembly utility.

Additional Information Menu
Further Info Menu

The created Blazor utility will look just like the one within the following screenshot.

Created Blazor Application
Created Blazor Utility

Including Syncfusion Question Builder to the WebAssembly challenge

To create a Blazor question builder utility, configure the Syncfusion NuGet bundle by referring to this documentation: Getting Began with Blazor Question Builder Element.

Add the Blazor WebAssembly challenge to an present ASP.NET Core utility

Combine the Blazor WebAssembly challenge with an present ASP.NET Core utility by following the steps under.

Step #1: Open an present ASP.NET Core utility in Visible Studio.

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

Step # 2: Open the .csproj file of the ASP.NET Core utility and add the next configuration code to combine the Blazor WebAssembly challenge to the applying.

<Mission Sdk="Microsoft.NET.Sdk.Internet">
  <ItemGroup>
    <PackageReference Embrace="Microsoft.AspNetCore.Elements.WebAssembly.Server" Model="3.2.1" />
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Embrace="....BlazorWasmAppBlazorWasmAppBlazorWasmApp.csproj" />
  </ItemGroup>
</Mission>

Step #3: Add the Blazor WebAssembly challenge into the ASP.NET Core resolution by right-clicking on the applying’s resolution as proven within the screenshot under.

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

Step # 4: Open the Program.cs file and add the highlighted code traces under.

var builder = WebApplication.CreateBuilder(args);

// Add providers to the container.
if (app.Surroundings.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
app.UseBlazorFrameworkFiles();
app.MapFallbackToFile("index.html");
//app.MapRazorPages(); // Take away this line.
app.Run();

Step #5: Delete the favicon.ico file. The favicon.ico file is created by default in each the WebAssembly and ASP.NET Core purposes. To keep away from battle between these two tasks whereas publishing, we should take away one of many recordsdata. We are able to obtain this as illustrated within the screenshot under.

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

Step #6: Run the pattern. The output might be just like the screenshot under.

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

Useful resource

For the whole supply code, confer with the combine Blazor WebAssembly in ASP.NET Core app GitHub repository.

Conclusion

We hope this weblog submit on easy methods to add a Blazor WebAssembly challenge to an present ASP.NET Core utility was useful. If you wish to see what else Syncfusion has to supply for ASP.NET Core builders, we hope you’ll check out Important Studio for ASP.NET Core.

Please tell us in case you have any queries or want clarification within the feedback part under. You might also get in contact with us by way of our help discussion board, help portal, or suggestions portal. We’re delighted that can assist you!

Associated blogs

In the event you like this submit, we expect you’ll get pleasure from the next ASP.NET Core articles as nicely:

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments