Not possible to call JavaScript method

[macias]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

This is basically a repost of this report: dotnet/AspNetCore.Docs#30311

According to documentation it should be possible to call JS method (not function).

The documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-7.0 or https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-7.0#javascript-interop-calls-without-a-circuit

I fail to see how they address the issue of calling a JS method (instance one, non-static), or if not possible -- how to dereference obtained reference. The only scenarios I found is disposing JS reference and calling a function within module.

Consider such case:

1. create instance of a class in JS
2. return the reference of this instance to C#
3. somehow call a method on this reference

If this is not possible, it would be good to mention it in documentation. If it is possible, small example would be helpful.

The stopping step for me is (3). I tried two approaches -- calling a method, like here, JS part:

class Dummy{
   dummyMethod = function()
   {
   }
}

function dummyCall() {
  let dummy = new Dummy();
  let result = DotNet.createJSObjectReference(dummy);
  return  result;
}

and C#:

  var instance = await JsRuntime.InvokeAsync<IJSObjectReference>("dummyCall");
  await instance.InvokeVoidAsync("dummyMethod");

This gives me an error:

Microsoft.JSInterop.JSException: Could not find 'dummyMethod' ('dummyMethod' was undefined).

The second approach would be to call a function via JsRuntime and pass one parameter to it -- obtained reference (instance in the above code). However here I have no idea how to dereference it on JS side -- I have the reference, and I need to obtain JS object out of it, in other words "undo" what createJSObjectReference did.

Lack of documentation about the proper method call is troublesome for me here.

cc: @guardrex dotnet/AspNetCore.Docs#30311

Expected Behavior

Ability to call a JS method.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

7.0.400

Anything else?

No response

[javiercn]

@macias thanks for contacting us.

class Dummy{
   dummyMethod = function()
   {
   }
}

Your definition is for a class with a field of type function, not a class with a method. The below code displays the code that should be used.

class Dummy {
  dummyMethod() {  }
}

Blazor doesn't do anything special with the JS methods it needs to invoke. It simply breaks the identifier by '.', accesses the members one by one until it reaches the end, and tries to invoke the last one.

[Yannike]

What about how to dereference the result of createJSObjectReference from JavaScript? I have a JavaScript object that is not Json serializable but I want to keep a reference to it on the blazor side and call function on it from the JavaScript side.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.

[macias]

@javiercn My mistake. After your reply I tested your approach, but I didn't realize the call for the method is done via my helpers (which in short keep track of registered JS instances in C#). Now when I am re-testing it using pure Blazor mechanisms it does not work -- i.e. no matter if I use method or member syntax, on call Javascript throws an error it cannot find given method.

Is there some additional step needed?