Menu
I have a web application that is written in .net core MVC, a standard, "old school" web application using model/view/controller pattern. In this app I have a few complex forms which change based on user selection. Different elements load based on what user selected in the first few drop down lists. Currently I use Vue.js to successfully build such an interface. So basically I do not have a SPA app but I sporadically use Vue.js throughout my app when there is a need for a complex front end interface.
Now that client side WebAssembly Blazor is officially out, I would like to replace my complex forms written in vue.js with a Blazor based code. I've found the post that explains how to do this with server side Blazor here but I can't find anything with regards to WebAssembly version of it.
Has anyone managed to integrate client side - web assembly Blazor into an existing MVC project? If so how?
271
Blazor apps can use existing .NET libraries, thanks to .NET Standard—a formal specification of .NET APIs that are common across all .NET implementations. .NET Standard allows the same code and libraries to be used on the server, in the browser, or anywhere you write .NET code.
I have this working and it's really made my week.
Firstly, update or convert your MVC project to .Net 5.0.402. It MAY work on an earlier version but I haven't tested it.
To your MVC solution, add a blazor web assembly app project. This is the web assembly components project.
On the MVC view, at the place you wish to render your blazor component add:
@using myawesomewasmprojectnamespace.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered"/>
<script src="_framework/blazor.webassembly.js"></script>
The '@using' declaration refers to the blazor web assembly app project, Pages directory. The 'typeof(Counter)' type refers to the Counter.razor component in the default blazor web assembly app project, visual studio supplies. This may of course be swapped for the final design component.
In the MVC project's _Layout.cshtml, or wherever the <head> tag of the MVC view is, include in the <head> tag for every page with a blazor component in it:
<base href="/"/>
Add the 'Microsoft.AspNetCore.Components.WebAssembly.Server' package to your MVC project.
Add a reference to the blazor web assembly app project, in your MVC Dependencies, project references.
In the MVC apps Startup.cs, 'public void Configure(IApplicationBuilder app, IWebHostEnvironment env)' method, add the following:
app.UseBlazorFrameworkFiles();
In the blazor web assembly app project, Program.cs file, comment out the following line to stop the application looking for a '<div id="app"></div>'
//builder.RootComponents.Add<App>("#app");
Finally, delete the favicon from the blazor web assembly app project's wwwroot directory as it will clash with the MVC one.
This then adds the 'Counter' component to your MVC view.
To add a different component to a different view, insert it with:
@using myawesomewasmprojectnamespace.Pages
<component type="typeof(Myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname)" render-mode="WebAssemblyPrerendered"/>
<script src="_framework/blazor.webassembly.js"></script>
And start your blazor component with:
@page "/myawsomecomponentnamecompletelydifferentfromanymvccontrolleroractionname"
I'm so chuffed to get this working, as I've been trying for ages. If you can't get it working, please message me and I'll try to answer any questions.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
