0

I get an error of

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'encryptMessage' ('encryptMessage' was undefined).

Error: Could not find 'encryptMessage' ('encryptMessage' was undefined).

When I run my blazor application. This is the script in the index.html

<script>
    
    ... OTHER FUNCTIONS

    function encryptMessage(message, key) {
        console.log("HERE")
        
    }
</script>

and this is in my component cs

using Microsoft.JSInterop;

[Inject] IJSRuntime? mJsRunTime { get; set; }

private async Task Login()
{

    await mJsRunTime!.InvokeVoidAsync("encryptMessage", $@"{username}:{password}", "usernamwe");

}
Ibanez1408
  • 4,550
  • 10
  • 59
  • 110
  • It kinda looks all in order... https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0 – maciek Feb 14 '23 at 09:54

1 Answers1

2

Your problems are elsewhere.

Clean Blazor WASM Project.

My Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        function encryptMessage(message, key) {
            console.log("HERE")
        }
    </script>
</body>

</html>

Test Page:

@page "/"
@inject IJSRuntime js

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<button class="btn btn-primary" @onclick=LogIn>Log In</button>

@code{
    private string username = string.Empty;
    private string password = string.Empty;

    private async Task LogIn()
    {
        await js.InvokeVoidAsync("encryptMessage", $@"{username}:{password}", "usernamwe");
    }
}

Result:

enter image description here

MrC aka Shaun Curtis
  • 19,075
  • 3
  • 13
  • 31