CODEWITHSUNDEEP
c#.netblazormaui
Alven
Alven

Reputation: 3

How can I use JavaScript in Maui Blazor Hybrid App

I'm trying to create an application using Maui Blazor Hybrid App. How can I use the app.js file? I've tried using IJSRuntime and IJSObjectReference but can't seem to get it to work.

My project: enter image description here My code: enter image description here

@inherits LayoutComponentBase
@using Microsoft.JSInterop

<div class="page">
    <main>
        <article class="content px-4" style="padding: 0 !important">
            @Body
        </article>
    </main>
</div>
@code {
    [Inject] IJSRuntime JSRuntime { get; set; }
    IJSObjectReference module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/app.js");
        }
        catch (Exception ex)
        {
            Console.Write(ex.Message);
            throw;
        }
    }

}

Upvotes: 0

Views: 603

Answers (1)

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4576

First, you need to inject the @inject IJSRuntime JS method.

Then, you need to create the IJSObjectReference as the code below.

@inherits LayoutComponentBase
@inject IJSRuntime JS
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code{
    private IJSObjectReference? module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/app.js");
        }
        catch (Exception ex)
        {
            Console.Write(ex.Message);
            throw;
        }
    }
}

More information and code you can check in this document link about Static assets limited to Razor components

Upvotes: 0

Related Questions