Search code examples
asp.netasp.net-mvcasp.net-mvc-5blazor

Add client side Blazor to existing ASP.NET MVC5 app


EDIT 2022-08-18: I haven't tested this myself, but this should now be possible by leveraging web components. Can we consume a Blazor component as a Web Component within a regular non-Blazor HTML page? https://youtu.be/kesUNeBZ1Os?t=970 (I recommend the whole video by the way, excellent content!)

Having an existing ASP.NET MVC5 app which is not feasible to rewrite all in one go, how can we start incorporating (client-side) Blazor to replace parts of that app?

EDIT: We would need to have pages where parts of it are MVC5 and other parts are Blazor where this would work seamless for the end user.

From what I have found so far the best (and only?) option would be to host Blazor in a different site and include it as an iframe in the original site using JavaScript interop to communicate data between the two sites.

I haven't found any examples for this, please let me know if you know of any or have another idea that might work!


Solution

  • Just wanted to update this question with what we have found as a satisfying solution now. We have developed a working proof-of-concept of this way of combining Blazor and any other client side technology. It is using a separate IFrame for the Blazor application and the JavaScript PostMessage API to avoid issues with security (same-origin). It actually works quite well and is a nice way to swap out parts of the old MVC5 application with parts written in Blazor. I'll get around to do a quick writeup of it in a blogpost soon hopefully.