i'm trying MAUI Blazor and potentially it's really cool, but i had some problems ( a lot). I want to call some javascript function to the main blazorwebview but i don't know how to do it. From MainLoyout.razor i take the blazorwebview.
<b:BlazorWebView x:Name="mainView" HostPage="wwwroot/index.html">
<b:BlazorWebView.RootComponents>
<b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</b:BlazorWebView.RootComponents>
</b:BlazorWebView>
But from here i don't know how to inject javascript. Thanks
Please look at the following documentation: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0
MainPage.xaml
<Button Text="Press me" Clicked="button_Clicked"/>
<b:BlazorWebView HostPage="wwwroot/index.html"></b:BlazorWebView>
MainPage.xaml.cs
private async void button_Clicked(object sender, EventArgs e)
{
var js = webView.Handler.MauiContext.Services.GetService<IJSRuntime>();
var result = await js.InvokeAsync<string>("executeMe", "DEF");
// Look at the Visual Studio Output window to see this message
Debug.WriteLine(result);
}
MauiProgram.cs
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
builder.Services.AddMauiBlazorWebView();
builder.Services.AddBlazorWebViewDeveloperTools();
return builder.Build();
}
[JSInvokable]
public static async Task<string> CallMeFromJs(string a)
{
return a + " OK!";
}
}
index.html
<input type="button" id="btn" value="Call .Net" />
<script type="text/javascript">
window.executeMe = (a) => {
// Click on BlazorWebView and press F12 to open DevTools to see the console logs
// You might need to add builder.Services.AddBlazorWebViewDeveloperTools(); in the CreateMauiApp() method
console.log("Call: " + a);
return a + " OK!";
};
</script>
<script type="text/javascript">
document.getElementById('btn').onclick = function () {
DotNet.invokeMethodAsync('MauiApp1', 'CallMeFromJs', 'ABC')
.then(data => {
// Click on BlazorWebView and press F12 to open DevTools to see the console logs
// You might need to add builder.Services.AddBlazorWebViewDeveloperTools(); in the CreateMauiApp() method
console.log(data);
});
};
</script>
<script src="_framework/blazor.webview.js" autostart="false"></script>
I hope it helps.