JSRuntime.InvokeVoidAsync in Blazor Server app calling multiple functions when I only tell it to call one

Solution 1:

I was trying to understand your partial code, but it seems as though I've failed. However, you should take into account the following:

1. The OnAfterRenderAsync method is executed each time your component is being rendered. It is primarily used to initialize JavaScript objects. When you want to initialize your JavaScript objects (I guess only once, right ?), the code should be placed within an if statement checking that this is the first time:

   if( firstRender )
      {
          // Here's you place code that is executed only once
          // the parameter firstRender is evaluted to true only the first time 
          // the OnAfterRenderAsync method is executed
       }
   

2. Only UI events, such as the click event, cause your component to re-render. If you need to re-render your component in order to see changes made otherwise, you'll have to call the StateHasChanged method

3. If your app is pre-rendering ( render-mode="ServerPrerendered" ), your components are rendered twice, and thus you may see messages printed in the console window twice. This is OK.

Hope this helps... If you did not solve your issues, please post a complete repo of your code, and I'll try to help you with this.