CODEWITHSUNDEEP
javascriptblazor
Tar270
Tar270

Reputation: 77

.NET method that invoke JS function

I have a function as below in index.js, which is invoked from navbar.razor

                    // gets the ID of button clicked - always gets the correct id
                    var BtnID = null 
                    var buttonElements = document.querySelectorAll('#items button');
                    for (var i = 0; i < buttonElements.length; i++) {
                        buttonElements[i].addEventListener('click', function () {                      
                            BtnID = this.getAttribute('id');
                        });
                    };
                    

                   // invoked from navbar.razor
                   // here is the problem, it works initially but does not work or set new ID when I switch from (page2-> page1-> page2). Remembers the old ID that was clicked before switching page.
                   window.getValues = function (val1, val2) {
                       yAxis[BtnID].setExtremes(val1, val2);                         
                 }

window.getValues works well initially. But once I switch pages, like page2 to page1 and come back again to page2(which is where this functionality is applied), it remembers only the old ID but not the new button ID that was clicked or does not take the new ID passed(BtnID) as shown above in index.js. May I now what would be the problem. Thank you.

Navbar.razor:

    <div id="items">
      <button id="0" @onclick=OpenDialog1>one</button>
      <button id="1" @onclick=OpenDialog2>two</button>
    </div>
                                  
    @code{
    private MyData model1 = new MyData { val1= 0, val2= 0 };
    private MyData model2 = new MyData { val1= 0, val2= 0 };
  
    private IModalDialog? modalDialog;

    private async Task OpenDialog1()
    {
        var request = new ModalRequest { InData = this.model1 };
        if (this.modalDialog is not null)
            await modalDialog.ShowAsync<MyForm>(request);      
        await JSRuntime.InvokeVoidAsync("getValues", this.model1.val1, this.model1.val2);
    }

    private async Task OpenDialog2()
    {
        var request = new ModalRequest { InData = this.model2};
        if (this.modalDialog is not null)
            await modalDialog.ShowAsync<MyForm>(request);      
        await JSRuntime.InvokeVoidAsync("getValues", this.model2.val1, this.model2.val2);
    }

}

Upvotes: 0

Views: 80

Answers (1)

Dimitris Maragkos
Dimitris Maragkos

Reputation: 11402

You can use ElementReference to pass the button elements to your js function. Then get the id attribute from the element reference.

Navbar.razor:

<div id="items">
  <button @ref="_btn1Ref" id="0" @onclick=OpenDialog1>one</button>
  <button @ref="_btn2Ref" id="1" @onclick=OpenDialog2>two</button>
</div>
                              
@code{
    private ElementReference _btn1Ref;
    private ElementReference _btn2Ref;
   
    private MyData model1 = new MyData { val1= 0, val2= 0 };
    private MyData model2 = new MyData { val1= 0, val2= 0 };
  
    private IModalDialog? modalDialog;

    private async Task OpenDialog1()
    {
        var request = new ModalRequest { InData = this.model1 };
        if (this.modalDialog is not null)
            await modalDialog.ShowAsync<MyForm>(request);      
        await JSRuntime.InvokeVoidAsync("getValues", this.model1.val1, this.model1.val2, _btn1Ref);
    }

    private async Task OpenDialog2()
    {
        var request = new ModalRequest { InData = this.model2};
        if (this.modalDialog is not null)
            await modalDialog.ShowAsync<MyForm>(request);      
        await JSRuntime.InvokeVoidAsync("getValues", this.model2.val1, this.model2.val2, _btn2Ref);
    }
}

index.js:

window.getValues = function (val1, val2, elem) {

    var BtnID = elem.getAttribute('id');
    yAxis[BtnID].setExtremes(val1, val2);                         
}

Upvotes: 1

Related Questions