Скачать или смотреть How to Call a Non-Static Method from JavaScript in Blazor Using JS Interop

Learn how to successfully invoke a non-static method in your Blazor application using JavaScript interop without the need for the `static` keyword.
---
This video is based on the question https://stackoverflow.com/q/69271721/ asked by the user 'curious_debugger' ( https://stackoverflow.com/u/6610661/ ) and on the answer https://stackoverflow.com/a/69273366/ provided by the user 'The Backer' ( https://stackoverflow.com/u/12301385/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Calling a non static method using blazor interop from js

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Calling a Non-Static Method from JavaScript in Blazor Using JS Interop

When working on a Blazor application, it can sometimes be challenging to invoke a non-static method from JavaScript, especially when dealing with the nuances of method visibility in .NET. A common issue many developers face is receiving an error message, such as:

[[See Video to Reveal this Text or Code Snippet]]

This confusion often arises when trying to call a non-static method without using the static keyword. Let's explore how to resolve this issue and successfully call your non-static methods from JavaScript in your Blazor application.

Understanding the Problem

The main issue here is rooted in how Blazor and JavaScript interoperate. The JavaScript code needs to access methods that are marked with the [JSInvokable] attribute. If you attempt to call a non-static method without introducing the proper context for the JavaScript interop, it will fail to recognize the method you are trying to call.

In your initial implementation, you found that adding the static keyword made the method accessible, but this isn't always desirable, especially when the method relies on instance variables or methods that cannot be declared static.

Solution: Calling Non-Static Methods Correctly

To invoke a non-static method from JavaScript using Blazor's JS interop, you can follow these steps:

Step 1: Create Your Blazor Component

Modify your Blazor component to reference the correct JavaScript function and prepare it to receive method calls. Here’s an example of how to set this up:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Define Your Invokable Method

Next, ensure that your method is marked with the [JSInvokable] attribute:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Update Your JavaScript Code

In your JavaScript file, you need to set up a function to handle the invocation properly. Here’s a simple example:

[[See Video to Reveal this Text or Code Snippet]]

Summary

By using DotNetObjectReference and ensuring that your methods are correctly marked with [JSInvokable], you can successfully call non-static methods from JavaScript without declaring them as static. This method allows you to maintain access to your instance variables and methods as needed.

Key Takeaways

Use DotNetObjectReference.Create(this) to create a reference to the current component instance.

Ensure your method is decorated with [JSInvokable] for visibility to JavaScript.

Leverage invokeMethodAsync in your JavaScript function to call the appropriate .NET method.

With these steps, you should be able to call non-static methods from your JavaScript code seamlessly in your Blazor applications. Happy coding!