Invoke a C# instance method from within a static method in Blazor using DotNet.invokeMethodAsync called by JavaScript

Question

Invoke a C# instance method from within a static method in Blazor using DotNet.invokeMethodAsync called by JavaScript

Is it possible to invoke a non-static method from a static method in a Blazor application while changing a C# property value from JavaScript using DotNet.invokeMethodAsync? I have the following code working so far:

JS File:

[script.js]

function ChangeContentJS() {
    DotNet.invokeMethodAsync('InvokeFromJsApp', "ChangeParaContentValue", "New Content");
}

Razor page:

     [Index.razor]
    
    @page "/"
    
    @inject IJSRuntime JSRuntime
    
    <h1>Change C# property value from JavaScript</h1>
    <br />
    <button @onclick='ButtonClickHandler'>Change Content - JS</button>
    <br />
    <p>@ParaContent</p>
    
    @code {
        public static string ParaContent = "Some Text Content"; 

        public async Task ButtonClickHandler()
        {
            await JSRuntime.InvokeAsync<string>("ChangeContentJS");
        }
    
        [JSInvokable]
        public static void ChangeParaContentValue(string value)
        {
            ParaContent = value;
            RunNewCode(); //DOESNT WORK AS ITS A NON-STATIC METHOD
        }

        public void RunNewCode()
        {
           jsRuntime.InvokeVoidAsync("RunFunction");
        }
    }

I am facing issues trying to run a non-static method within a static method in a Blazor application. How can I achieve this?

When attempting to make the following method static, I encountered the error below:

  public static void RunNewCode()
            {
               jsRuntime.InvokeVoidAsync("RunFunction");
            }

CS0120: An object reference is required for the nonstatic field, method, or property 'JSRuntime'

How do I make this static: @inject IJSRuntime JSRuntime

javascript c#.net blazor

Answer 1

Answer №1

The information you need can be found in the official documentation

To summarize: Create a static Action for the update and register the local instance

@implements IDisposable

...

private static Func<string, Task>? ChangeParaContentActionAsync;

private async Task LocalChangeParaContentValueAsync(string value)
{
    ParaContent = value;
    await jsRuntime.InvokeVoidAsync("RunFunction");
}

protected override void OnInitialized()
{
    base.OnInitialized();
    ChangeParaContentActionAsync = LocalChangeParaContentValueAsync;
}

// There are no guarantees that disposal works properly in this case. It may even be called during initialization
public void Dispose()
{
    ChangeParaContentActionAsync = null:
}

[JSInvokable]
public static async Task ChangeParaContentValue(string value)
{
    if (ChangeParaContentActionAsync is {} actionAsync)
    {
        await actionAsync(value);
    }
}

(not tested)

NOTE: Keep in mind that you can still call the JSInvokable method even if the component is not loaded (no instance). This could lead to undefined behavior!

Edit: Changed to async Task, due to the asynchronous nature of InvokeVoidAsync method

Answer 2

The information you need can be found in the official documentation

To summarize: Create a static Action for the update and register the local instance

@implements IDisposable

...

private static Func<string, Task>? ChangeParaContentActionAsync;

private async Task LocalChangeParaContentValueAsync(string value)
{
    ParaContent = value;
    await jsRuntime.InvokeVoidAsync("RunFunction");
}

protected override void OnInitialized()
{
    base.OnInitialized();
    ChangeParaContentActionAsync = LocalChangeParaContentValueAsync;
}

// There are no guarantees that disposal works properly in this case. It may even be called during initialization
public void Dispose()
{
    ChangeParaContentActionAsync = null:
}

[JSInvokable]
public static async Task ChangeParaContentValue(string value)
{
    if (ChangeParaContentActionAsync is {} actionAsync)
    {
        await actionAsync(value);
    }
}

(not tested)

NOTE: Keep in mind that you can still call the JSInvokable method even if the component is not loaded (no instance). This could lead to undefined behavior!

Edit: Changed to async Task, due to the asynchronous nature of InvokeVoidAsync method

Answer 3

Answer №2

Here is a possible solution that worked for me, although I am unsure if it is the best approach:

private static CurrentRazorComponentClassName _app;

public CurrentRazorComponentClassName ()
{
    _app = this;
}

[JSInvokable]
public static void UpdateTextInBlazor(string text)
{
    jsText = text;
    contentEditable = false;
    _app.StateHasChanged();
}

Answer 4

Here is a possible solution that worked for me, although I am unsure if it is the best approach:

private static CurrentRazorComponentClassName _app;

public CurrentRazorComponentClassName ()
{
    _app = this;
}

[JSInvokable]
public static void UpdateTextInBlazor(string text)
{
    jsText = text;
    contentEditable = false;
    _app.StateHasChanged();
}

Invoke a C# instance method from within a static method in Blazor using DotNet.invokeMethodAsync called by JavaScript

Answer №1

Answer №2

Similar questions

Deleting a directory with files using Renci SSH.NET

Discovering the method to access a local function within a static function in Javascript ES6 (ES2015) or Typescript

How can I create two interconnected search inputs with React Hooks to efficiently filter results?

What is the best charting component, tool, or library for JavaScript or ASP.NET that would be suitable for this

Optimizing nested collections with JavaScript arrays of boolean values

Utilizing Cytoscape JS in Conjunction with JHipster Angular

What is the correct method for inserting a div block?

Calculate the total length of the nested arrays within an object

Server-side access to form data has been restricted

Adding a javascript file to a Vue component

Tips for embedding query values within a mongoose query

Can a Nuxt 2 project support the coexistence of both JavaScript and TypeScript?

What is the best way to obtain the clicked ID when a user clicks on an element within

What is the process for incorporating Visual Basic power packs references into a C# Windows Form project?

Using the Loop Function in Node.js with EJS Templates

Adding up values of objects in a different array using Vue.js

extract element from a string with the help of jquery

Tips for updating the URL in the browser address bar after loading content using AJAX with angular.js

What is the best way to create and save an Excel file using Node.js, then how can I facilitate

Just getting started with Apache Cordova: build unsuccessful