Javascript not popping out message box on button click in Blazor 8.0

Question

Javascript not popping out message box on button click in Blazor 8.0

ojiraye sigbenu 0

Test.razor

@page "/test"
@inject IJSRuntime JsRuntime
<h3>Test JavaScript Interop</h3>
<button type="button" @onclick="TestJsInterop">Click Me</button>
@code {
private async Task TestJsInterop()
{
    // Call the custom JS function showCustomAlert
    await JsRuntime.InvokeVoidAsync("showCustomAlert", "Hello from custom JS interop!");
}
}

/js/app.js file

window.showCustomAlert = function (message) {
alert(message); // This is the native JS alert function
};

wwwroot/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom JS for logging and alerting -->
<script>
    window.logToConsole = function (message) {
        console.log(message);
    };
</script>
<link href="css/app.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<!-- Reference to Blazor JS and your custom JS file -->
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/app.js"></script>
</body>
</html>

ojiraye sigbenu 0 Reputation points

2024-09-24T22:03:27.42+00:00

It is a Blazor Web web App

2 answers

Your answer

ojiraye sigbenu 0 Reputation points

2024-09-24T22:03:27.42+00:00

It is a Blazor Web web App

Answer 1

Anonymous

Hi ojiraye sigbenu,

It seems your application is Blazor WebAssembly app. And your code works fine in my side.

Here are a few things to check and try:

Make sure that the app.js file is located in the wwwroot/js/ folder.
Open the browser's developer console (press F12 in the browser), go to the Console tab, and check if there are any error messages.
Make sure that the scripts are loading without issues in the browser(press F12 in the browser and go to Sources tab).

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

ojiraye sigbenu 0 Reputation points

2024-09-25T15:09:32.1733333+00:00

still not working

Bruce (SqlWork.com) 84,086

try adding interactive (if wasm use InteractiveWebAssembly):

@page "/test"
@rendermode InteractiveServer
@inject IJSRuntime JsRuntime
<h3>Test JavaScript Interop</h3>
<button type="button" @onclick="TestJsInterop">Click Me</button>
@code {
private async Task TestJsInterop()
{
    // Call the custom JS function showCustomAlert
    await JsRuntime.InvokeVoidAsync("showCustomAlert", "Hello from custom JS interop!");
}
}

ojiraye sigbenu 0 Reputation points

2024-09-25T16:27:39.6766667+00:00

Got this error

CSS Hot Reload ignoring https://localhost:7226/bootstrap/bootstrap.min.css because it was inaccessible or had more than 7000 rules. blazor.web.js:1 [2024-09-25T16:11:13.798Z] Information: Normalizing '_blazor' to 'https://localhost:7226/_blazor'. blazor.web.js:1 [2024-09-25T16:11:14.075Z] Information: WebSocket connected to wss://localhost:7226/_blazor?id=kFDED4cfBR2gc1eZY-a8vw. blazor.web.js:1 [2024-09-25T16:11:15.709Z] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'. log @ blazor.web.js:1 blazor.web.js:1 [2024-09-25T16:11:15.710Z] Information: Connection disconnected.
ojiraye sigbenu 0 Reputation points

2024-09-25T16:29:44.6433333+00:00

Got this error

CSS Hot Reload ignoring https://localhost:7226/bootstrap/bootstrap.min.css because it was inaccessible or had more than 7000 rules. blazor.web.js:1 [2024-09-25T16:11:13.798Z] Information: Normalizing '_blazor' to 'https://localhost:7226/_blazor'. blazor.web.js:1 [2024-09-25T16:11:14.075Z] Information: WebSocket connected to wss://localhost:7226/_blazor?id=kFDED4cfBR2gc1eZY-a8vw. blazor.web.js:1 [2024-09-25T16:11:15.709Z] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'. log @ blazor.web.js:1 blazor.web.js:1 [2024-09-25T16:11:15.710Z] Information: Connection disconnected.
Bruce (SqlWork.com) 84,086 Reputation points

2024-09-25T18:44:22.2866667+00:00

if the circuit is shutdown, then button clicks will not work. you need to fix the exception your server code is throwing.
Anonymous

2024-09-26T01:22:54.05+00:00

Hi @ojiraye sigbenu, Pls share more details for not working if the browser Console panel displays any error or Visual Studio Output panel displays any error. And if you still do not know how to troubleshoot, you can create a minimal repo and share with us.
ojiraye sigbenu 0 Reputation points

2024-09-26T14:15:06.1066667+00:00

Hi@Ping Ni-MSFT. onclick button event is not triggered in blazor web app.I am using .netcore 8.0.On the console it doesn't display any error.Thanks
ojiraye sigbenu 0 Reputation points

2024-09-26T15:52:31.81+00:00

Hello @Ping Ni-MSFT,Can you create a working sample of a Blazor web app 8.0 that displays a message box "Hello World" on button click and share the code,cos i have tried a lot of things including using @rendermode InteractiveServer.

Bruce (SqlWork.com) 84,086

simple working page. create new blazor server app (net 8)

% dotnet new blazor

add this page:

@page "/alert"
@rendermode InteractiveServer
@inject IJSRuntime JsRuntime

<script>window.showAlert = m => alert(m);</script>
<PageTitle>Alert</PageTitle>
<h1>Alert</h1>
<button class="btn btn-primary" @onclick="ShowAlert">Click me</button>

@code {
    private async Task ShowAlert()
    {
        await JsRuntime.InvokeVoidAsync("showAlert", "Hello from JS interop!");
    }
}

note:

await JsRuntime.InvokeVoidAsync("alert", "Hello from JS interop!");

will also work and not require a javascript function be defined

ojiraye sigbenu 0 Reputation points

2024-09-27T22:21:11.5066667+00:00

it has to be a Blazor Web App not Blazor server App. Thank you for your help
Bruce (SqlWork.com) 84,086 Reputation points

2024-09-28T16:10:24.81+00:00

Then create a new Blazor web app. Yours is throwing circuit errors, so start with an out of box solution. As you had circuit errors, I assume you are using server mode.

Answer 2

Bruce (SqlWork.com) 84,086

with the browser debug tools, check that app.js had no syntax errors and the method is defined. you can also call alert directly.

await JsRuntime.InvokeVoidAsync("alert", "Hello");

also check that the component supports interactive, so the button click works.

0 comments

Share via

Javascript not popping out message box on button click in Blazor 8.0

2 answers

Your answer