1

I have created a new Blazor WebAssembly standalone project. I'd like to be able to insert this app into views in my current ASP.NET MVC 5 project, like how React can be inserted into any DOM element in an HTML page.

I think that ASP.NET Core has better integration with Blazor but upgrading is probably not possible. So I think my only chance of integrating Blazor would be to have it produce static files, copy these files to my hosted ASP.NET MVC 5 app on IIS, and then load scripts from these files in my views. e.g. have a div with id "app" and then load blazor.webassembly.js to put the Blazor app into this div.

However, Blazor only seems to work when I'm hosting the published files with IIS.

When I try to open the published index.html file directly in the browser, Blazor says than an unhandled error has occurred and produces this warning in the console: Loading failed for the <script> with source “c:/Tracker/Development/TrackerBlazor/bin/Release/net5.0/browser-wasm/publish/wwwroot/_framework/blazor.webassembly.js”.

What might be the issue? Could there be other solutions for using Blazor in my ASP.NET MVC 5 application?

This is the index.html file:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>TrackerBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="TrackerBlazor.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
Brad Stevanus
  • 51
  • 5
  • [Polite] What's the purpose of loading a WASM SPA [single Page Application] into a classic asp.net view? It's not a page, it's an application with it's own set of pages/routes. The initial index.html page is just the "Loader" to get the application up and running. If you want to run the SPA as part of your ASP.NET MVC 5 project this article I've written on the subject might help you - https://shauncurtis.github.io/articles/Hydra%20Full%20Article.html. – MrC aka Shaun Curtis Mar 31 '21 at 07:40
  • Also see the answer to a question I answered yesterday on a similar topic - https://stackoverflow.com/questions/66862350/how-to-change-the-base-url-of-a-blazor-wasm-app – MrC aka Shaun Curtis Mar 31 '21 at 07:44
  • 1
    @MrCakaShaunCurtis Thanks for your help. To answer your first question, we're trying to be able to use Blazor to incrementally create components for our website. So we'd like to be able to take e.g. a table and replace it with a blazor table component. Or just replace entire pages with a Blazor component. I took a look at the articles and such but I noticed that it's meant for an ASP.NET Core application. I don't think that our classic ASP.NET application supports features like `app.UseBlazorFrameworkFiles`. – Brad Stevanus Mar 31 '21 at 14:22
  • I'm not sure you can do what you want to. Blazor is built on aspnetcore. I'll leave it for someone with some recent experience in Asp.Net to comment. – MrC aka Shaun Curtis Mar 31 '21 at 15:03

1 Answers1

4

I came up with a solution for this problem that has been working pretty well. The idea is to host the Blazor app as an IIS sub-app of my current ASP.NET website. To show a Blazor component in my ASP.NET views, I put an HTML iframe in the view that links to one of my pages hosted in the sub-app. This is a partial view that will display the contents of the given URL in an iframe.

@model string

<!-- Embeds a Blazor page into an MVC view -->
<!-- Model: URL of the TrackerBlazor page to render -->

<style>
    #blazor-page {
        width: 1px;
        min-width: 100%;
        border: none;
    }
</style>

<iframe id="blazor-page"
        title="Blazor Page"
        src="@Model">
</iframe>

<script type="text/javascript" src="~/Scripts/iframeResizer.min.js"></script>
<script>
    iFrameResize({ log: false }, "#blazor-page");
</script>

iframes have a fixed height, so I use a third-party script (iFrameResizer) that resizes the iframe based on the size of the content. This script only works when the src the iframe is pointing to is on the same domain as the iframe (or if you can edit CORS details related to the src) because otherwise a CORS issue occurs. Since the Blazor app is an IIS sub-app, it is on the same domain as my website.

For example, say I have an existing ASP.NET MVC page that displays the deatils for a restaurant, /restaurant/{id}. I'd like to put a Blazor component on this page. I'll create a Blazor page, and at the top I'll put @page "/restaurant/{id:int}". Let's say the IIS sub app is named myblazorapp. So when I host this Blazor app, we can go to the page directly on my website with /myblazorapp/restaurant/3. I can put an iframe to this link in my MVC view to show the component.

Hope this helps anybody who had a similar issue.

Brad Stevanus
  • 51
  • 5