CODEWITHSUNDEEP
c#asp.net-coreblazor
Stuart Aitken
Stuart Aitken

Reputation: 1012

Is it possible to embed a .NET application within a Blazor website?

Similar to how <iframe>, <embed>, <object> etc are used to embed external videos, plugins etc into websites, is it possible to directly embed an application into Blazor? Presumably a .NET application would be easier.

Something like

<div>

    <application path="/dist/file/myApplication.exe"></application>

</div>

Looking at the capabilities of Web Assembly, I'm certain the general concept is achievable. I just wonder if there's a way to do it easily in Blazor.

Upate for clarification:

My original question wording was perhaps too simplistic. I don't necessarily mean that literally <application path="myApplication.exe"></application> would do the trick. What I'm really thinking about is the concept of a user-friendly way to embed a non-Javascript application into a website, via WASM. I mentioned Blazor because it seems to be the current best contender for offering an easier way to do this.

Here's what inspired this question: https://webassembly.org/demo/Tanks/

I figured that since a Unity game has been successfully ported to run in Web Assembly on the browser, it might be possible to do similar with any application (within reason).

Perhaps not now, but in a not-too-distant future.

Upvotes: 1

Views: 2927

Answers (1)

Michael Washington
Michael Washington

Reputation: 3075

If you have something that is "Hosted on the web" you can embed it "inside" a Blazor app using code like this:

    <script type="text/javascript">
    // From: https://gomakethings.com/getting-html-asynchronously-from-another-page/
    var getHTML = function (url, callback) {
        // Feature detection
        if (!window.XMLHttpRequest) return;
        // Create new request
        var xhr = new XMLHttpRequest();
        // Setup callback
        xhr.onload = function () {
            if (callback && typeof (callback) === 'function') {
                callback(this.responseXML);
            }
        };
        // Get the HTML
        xhr.open('GET', url);
        xhr.responseType = 'document';
        xhr.send();
    };
    </script>

    <script type="text/javascript">
    var populateDiv = function (element) {
        getHTML('https://blazor.net/', function (response) {
            element.innerHTML = response.documentElement.innerHTML;
        });
    };
    </script>


ElementRef modalBody; // reference to the DIV
protected override void OnAfterRender()
{
  // This will set the content of the Div
  // to the content of the server Login page
  setDivContent(modalBody);
}
    
public Task setDivContent(ElementRef elementRef)
{
   return JSRuntime.InvokeAsync<object>("populateDiv", elementRef);
}
<div ref="modalBody" class="modal-body">
<!-- Dynamic content will go here -->
</div>

See: Razor Components Popups and JavaScript Interop

Upvotes: 1

Related Questions