title: Updating Blazor via JS that calls C# code
body: <p>I am trying to update my <code>Blazor</code> page on an event generated by <code>js</code>.<code>Js</code> with interop invokes C# code on an event and i need to somehow call <code>this.StateHasChanged</code> in the  c# callback :</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>window.methods = {
      timeout: null,
      setTimeout: function () {
          timeout = window.setInterval(async function () {
              console.log("From js timeout occured ,sending to .net");
              await DotNet.invokeMethodAsync('[assembly name]', "TimeoutCallback", Date.now().toString());
          }, 2000);
      },
  
      clearTimeout: function () {
          if (this.timeout == null || this.timeout == undefined) {
              return;
          }
          console.log("Clearing timeout");
          window.clearTimeout(timeout);
      }
  }
  </code></pre>
  
  <p><strong>C#</strong></p>
  
  <pre><code>@inherits StuffBase
  @page "/test"
  
  Current value: @val
  &lt;button onclick="@(async()=&gt;await StartTimeout())"&gt;Start timeout &lt;/button&gt;
  &lt;button onclick="@(async()=&gt;await ClearTimeout())"&gt;Clear timeout&lt;/button&gt;
  
  public class StuffBase : BlazorComponent {
  
          protected static string val { get; set; }
          protected async Task StartTimeout() {
              await JSMethods.SetTimeout();
          }
          [JSInvokable("TimeoutCallback")]  //gets called by js on event !
          public static async Task TimeoutCallback(string data) {
  
              val = data; 
              Console.WriteLine("From callback ,received:" + data); //gets updated
              await Task.Delay(1000);
             //how can i call this.StateHasChanged
          }
          protected async Task ClearInterval() {
              await JSMethods.ClearInterval();
          }
      }
  </code></pre>
  
  <p><strong>Interop</strong></p>
  
  <pre><code>public class JSMethods {
          public static async Task SetTimeout() {
              await JSRuntime.Current.InvokeAsync&lt;string&gt;("methods.setTimeout");
          }
          public static async Task ClearTimeout() {
              await JSRuntime.Current.InvokeAsync&lt;string&gt;("methods.clearTimeout");
          }   
      }
  </code></pre>
  
  <p>As you can see first i call from <code>c#</code> -> <code>setTimeout</code> that in js attaches the timeout with its handler.
  What happens is that i manage to get the <code>TimeoutCallback</code>  called from <code>js</code> but and while in <code>console</code> i get my value updated , i somehow need to notify the <code>UI</code> to update itself.</p>
  
  <p>How can i achieve this since all my <code>.NET</code> methods that are called from <code>js</code> <strong>have</strong> (according to the documentation) to be <code>static</code> ?</p>