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.
Step #3: Choose the Blazor WebAssembly app template
Choose Blazor WebAssembly App from the template checklist after which click on Subsequent.
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.
Step #5: Create the Blazor WebAssembly utility
Now, choose a goal framework of your selection and click on Create to create the WebAssembly utility.
The created Blazor utility will look just like the one within the following screenshot.
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.
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.
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.
Step #6: Run the pattern. The output might be just like the screenshot under.
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: