Blazor WAsm - 無法調用返回值的 JS function

Question

我想做的事
我想調用一個返回值的 JS function。 我完全按照此處記錄的方式進行了操作。

設置
C#

Log.Warning("TESTESTESTTESTESTESTTESTESTEST");
await JsRuntime.InvokeAsync<bool>("UtilityTest.testFunc");
Log.Warning("TESTESTESTTESTESTESTTESTESTEST");

JS

var UtilityTest = new function () {
    this.testFunc = function () {
        console.log("[JS-TEST] testFunc");
        return true;
    };
};

日志

TESTESTESTTESTESTESTTESTESTEST
[JS-TEST] testFunc
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: An exception occurred executing JS interop: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4.. See InnerException for more details.
Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4.. See InnerException for more details. ---> System.Text.Json.JsonException: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4. ---> System.InvalidOperationException: Cannot get the value of a token type 'Null' as a boolean.
  at System.Text.Json.Utf8JsonReader.GetBoolean () <0x2c89c00 + 0x00090> in <filename unknown>:0 
  at System.Text.Json.Serialization.Converters.JsonConverterBoolean.Read (System.Text.Json.Utf8JsonReader& reader, System.Type typeToConvert, System.Text.Json.JsonSerializerOptions options) <0x30ab220 + 0x00004> in <filename unknown>:0 
  at System.Text.Json.JsonPropertyInfoNotNullable`4[TClass,TDeclaredProperty,TRuntimeProperty,TConverter].OnRead (System.Text.Json.ReadStack& state, System.Text.Json.Utf8JsonReader& reader) <0x30a45a8 + 0x0003c> in <filename unknown>:0 
  at System.Text.Json.JsonPropertyInfo.Read (System.Text.Json.JsonTokenType tokenType, System.Text.Json.ReadStack& state, System.Text.Json.Utf8JsonReader& reader) <0x30a41d8 + 0x00088> in <filename unknown>:0 
  at System.Text.Json.JsonSerializer.HandleNull (System.Text.Json.Utf8JsonReader& reader, System.Text.Json.ReadStack& state) <0x30a3b58 + 0x00100> in <filename unknown>:0 
  at System.Text.Json.JsonSerializer.ReadCore (System.Text.Json.JsonSerializerOptions options, System.Text.Json.Utf8JsonReader& reader, System.Text.Json.ReadStack& readStack) <0x30a3218 + 0x0026a> in <filename unknown>:0 
   --- End of inner exception stack trace ---
  at System.Text.Json.ThrowHelper.ReThrowWithPath (System.Text.Json.ReadStack& readStack, System.Text.Json.Utf8JsonReader& reader, System.Exception ex) <0x30e4740 + 0x00028> in <filename unknown>:0 
  at System.Text.Json.JsonSerializer.ReadCore (System.Text.Json.JsonSerializerOptions options, System.Text.Json.Utf8JsonReader& reader, System.Text.Json.ReadStack& readStack) <0x30a3218 + 0x00320> in <filename unknown>:0 
  at System.Text.Json.JsonSerializer.ReadValueCore (System.Text.Json.JsonSerializerOptions options, System.Text.Json.Utf8JsonReader& reader, System.Text.Json.ReadStack& readStack) <0x309fe18 + 0x00592> in <filename unknown>:0 
  at System.Text.Json.JsonSerializer.ReadValueCore (System.Text.Json.Utf8JsonReader& reader, System.Type returnType, System.Text.Json.JsonSerializerOptions options) <0x309e998 + 0x0003e> in <filename unknown>:0 
  at System.Text.Json.JsonSerializer.Deserialize (System.Text.Json.Utf8JsonReader& reader, System.Type returnType, System.Text.Json.JsonSerializerOptions options) <0x309e830 + 0x00024> in <filename unknown>:0 
  at Microsoft.JSInterop.JSRuntime.EndInvokeJS (System.Int64 taskId, System.Boolean succeeded, System.Text.Json.Utf8JsonReader& jsonReader) <0x2c8a120 + 0x00052> in <filename unknown>:0 
   --- End of inner exception stack trace ---
  at System.Threading.Tasks.ValueTask`1[TResult].get_Result () <0x30f2538 + 0x00034> in <filename unknown>:0 
  at TestApp.Client.KeyboardManagerTest.Initialize () [0x0003d] in <Path>\Client\Test.cs:27 
  at TestApp.Client.Pages.TestPage.OnInitializedAsync () [0x00109] in <Path>\Client\Pages\TestPage.razor:49 
  at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync () <0x2ddec48 + 0x0013a> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x2f2fa10 + 0x000b6> in <filename unknown>:0

在瀏覽器的調試工具中直接調用 JS

UtilityTest.testFunc()
true

<Path>\Client\Test.cs:27指的是JsRuntime.InvokeAsync行。 我真的不知道為什么拋出異常（ JsRuntime.InvokeVoidAsync有效）。 我希望有人可以幫助我。

Answer 1

這段代碼對我有用

@page "/"

@inject IJSRuntime JsRuntime

<button class="btn btn-primary" @onclick="Test">Test</button>
@Result

@code
{
    private bool Result { get; set; } = false;
    private async Task Test()
    {
        Result = await JsRuntime.InvokeAsync<bool>("UtilityTest.testFunc");
    }
}

如果你想在組件渲染后調用你的 function 你需要調用 OnAfterRenderAsync

protected override async Task OnAfterRenderAsync(bool firstRender)
{
     if(firstRender)
     {
         await JsRuntime.InvokeAsync<bool>("UtilityTest.testFunc");
     }
     await base.OnAfterRenderAsync(firstRender);
}

您可以查看源代碼以獲取更多 Javascript 的 Blazor https://github.com/ShadyNagy/Blazor.JavaScriptUtilities