I am iterating through a LARGE list of objects all of which will open the same modal window that will be loaded with dynamic information. To make this work, I create a counter called MenuCounter that I know increments just fine.
That said, I am attempting to wrap a hyperlink around the icons I need to use and the injection of the method keeps pointing to the last value of the MenuCounter.
I first tried this:
<a href="#" onclick="@(() => SetupChangeName(MenuCounter))" class="menuButton">...</a>
When I ran into the issue, I tried reducing the code to the following but then the page somehow activates the hyperlink and the modal window appears and will not go away.
<a href="#" onclick="SetupChangeName(MenuCounter)" class="menuButton">...</a>
Can somebody please help me out?
Thank you!
You should apply a lambda expression to the Blazor @onclick
directive instead of using the onclick
Html attribute, in which case it should call a JS function, which you did not mean.
Note that I've introduced a new directive to prevent the default action of the anchor element: @onclick:preventDefault
Test this code:
@page "/"
<a href="#" @onclick:preventDefault @onclick="@(() => SetupChangeName(MenuCounter))" >Click me...</a>
<div>Counter is @output</div>
@code
{
private int MenuCounter = 10;
private int output;
private void SetupChangeName (int counter)
{
output = counter;
}
}
Note: If you use a for loop to render a list of anchor elements, you must define a variable local to the loop, and provide it as the input to your lambda expression, something like this:
@for(int MenuCounter = 0; MenuCounter < 10; MenuCounter++)
{
int local= MenuCounter;
<a href="#" @onclick:preventDefault @onclick="@(() =>
SetupChangeName(local))" >Click me...</a>
}
otherwise, all the lambda expressions will have the the same value for MenuCounter
, which is the value incremented for the last iteration. See For loop not returning expected value - C# - Blazor explaining the issue.