Calling Blazor functions from javascript does not work as expected

[mayur-ekbote]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I am trying to create a text editor which operates on contenteditable div. As it requires some events cancelled based on certain keystrokes etc, I cannot use Blazor. So instead I am using JavaScript that invokes Blazor functions as necessary.

The guidance given on the official documentation does not properly create this scenario. Every example given on that page requires a call to the JavaScript function to pass dotNetHelper and that dotNetHelper instance is used to invoke method on the Blazor component.

This is the reference doc https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0#class-instance-examples

It does not help if JavaScript needs to trigger an event independently. The documentation does not cover the scenario at all.

It seems that there is no way for JavaScript to cleanly invoke a component's function (maintaining a static dictionary of {component id, dotNetHelper} comes to mind, but it sounds messy.

Expected Behavior

A clear example of .net functions being triggered independently from JavaScript, if it is possible at all.

.NET Version

6.0.5

[javiercn]

@mayur-ekbote thanks for contacting us.

In order for us to investigate this issue, could you please provide a minimalistic repro project as a public github repository that illustrates the problem?

It is not clear to us from your description what the problem you seem to be facing is.

Hi @mayur-ekbote. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[mayur-ekbote]

Created a github project here https://github.com/mayur-ekbote/EditableContentDivDemo

The crux of the problem is this:

1. To invoke a .net method, JS requires an instance of the DotNetObjectReference<>
2. One example given in the doc saves the object reference in the javascript file as static member of a class. This approach is not useful since there could be multiple instances of the component on a page (the github repo demonstrates the problem).

https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0#pass-a-dotnetobjectreference-to-a-class-with-multiple-javascript-functions

3. Other examples involve some event raised from the Blazor component which passes the instance of the DotNetObjectReference<> to a javascript function. The javascript function then uses the instance to call a method of the component. This approach is not useful because it does not allow javascript to initiate a call on a Blazor component!

https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0#class-instance-examples

In all, there is no way specified in the docs for JS to invoke a method on a component instance .
There is a way though - save the DotNetObjectReference<> in a Map with html id as a key. Then every time identify the caller element and use caller.id to get the reference. But it is not documented anywhere. Making it harder to understand the potential drawback.

[javiercn]

@mayur-ekbote thanks for the additional details.

I am not sure I am fully grasping your goal, but I do think I see enough to give you some pointers. If I were to implement something like what you are trying, I would do as follows:

• Capture an element reference for the widget that I am rendering.
• Inside OnAfterRender, invoke a JS function passing the element reference and the component instance (this) as a JSObjectReference.
• Inside the JS function implementation, attach the JS Object reference to the element in a property, for example element.component = componentRef;
• When you raise an event in JS and need to call the corresponding JS interop code, grab the event target, pick the object reference from the component property and invoke the method you want.

Hi @mayur-ekbote. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[mayur-ekbote]

Thanks @javiercn
Yes, it does solve the problem. Your example is, AFAIK, the first one I have come across where a Blazor reference to an element is saved with its corresponding JavaScript element - I don't know if it creates circular references.
It would be great if it is documented in the official documentation.

[javiercn]

@guardrex can you add a section for this scenario?