Share via

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

ojiraye sigbenu 0 Reputation points
2024-09-24T21:53:27.6+00:00

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>
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,575 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
984 questions

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 64,826 Reputation points
    2024-09-25T00:46:22.3633333+00:00

    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
  2. Ping Ni-MSFT 4,335 Reputation points Microsoft Vendor
    2024-09-25T05:36:07.8833333+00:00

    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:

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

    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

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.