Blazor: Browser doen't update style attribute of HTML button - html

Question

I am using Blazor. I have a grid of buttons in a component and am dynamically setting their individual background-image and border-style attributes with variables returned by methods as users perform certain clicks in other components.
#for (int id = 0; id < 24; id++)
{
var buttonId = id;
<button style="background-image: url(#GetImageFilePath(id)); border-style: #GetBorderStyle(id)"
#onclick="#(e => PlayerGridClick(e, buttonId))"></button>
}
Both methods in the above code return strings and so the code dynamically updates when NotifyStateChanged() action is invoked by the service that provides the data for the component.
If I view the source code in the browser I confirm that both attributes change just as I require, however, only the image attribute is rendered by the browser. If I refresh the browser the border-style attribute is then actioned.
I have tried Chrome and Firefox and both act the same.
Anyone out there have any clues?
Thanks
Further info requested:
The data service implements NotifyStateChanged like this:
public event Action OnChange;
private void NotifyStateChanged() => OnChange?.Invoke();
The client components subscribe like this:
// Subscribe to the state of change notification for the TurnSerice
protected override void OnInitialized()
{
turnService.OnChange += StateHasChanged;
}
// Remove subscription to avoid memory leak
public void Dispose()
{
turnService.OnChange -= StateHasChanged;
}
The client retrieves the data like this:
protected override async Task OnInitializedAsync()
{
player = await turnService.GetPlayerAsync(nPlayer);
// if player has piece in hand:
if(player.pieceInHand.pieceType!=ePieceType.none)
{
// calculate where they can place the piece without it being flipped
// which column?
int column = player.nPlotSource % 6;
// highlight all square in this column
bButtonBorderOn[column] = true;
bButtonBorderOn[column+6] = true;
bButtonBorderOn[column+12] = true;
bButtonBorderOn[column+18] = true;
// which row?
int row = player.nPlotSource / 6;
// highlight all square in this row
bButtonBorderOn[row * 6] = true;
bButtonBorderOn[row * 6+1] = true;
bButtonBorderOn[row * 6+2] = true;
bButtonBorderOn[row * 6+3] = true;
bButtonBorderOn[row * 6+4] = true;
bButtonBorderOn[row * 6+5] = true;
}
else
{
for (int i = 0; i < 24; i++)
bButtonBorderOn[i] = false;
}
//turnService.Test();
}
The setting of the bButtonBorderOn is rather crude but it is just to get it working. Finally the variable is set during the rendering of the component like this:
protected string GetBorderStyle(int id)
{
if (bButtonBorderOn[id])
return "solid";
return "none";
}
Thanks again :)

Answer 1

I have solved it.
The purpose of the dynamic styling was to highlight to a player of the game where they could potentially place a token and get bonus points. So despite the highlighting not working, I moved on to implement the placement rules and found that the data had not initialised properly - extra points were not being awarded.
To solve the placement rule problem I moved the data variable for the styling to the data source class. In doing this the styling problem was also solved.
I am still a beginner to Blazor. Lesson learned: Components are not reliable keepers of data :)
Thanks to all those who took the time to read my question.