Blazor does not refresh UI when parameter is passed with onclick function

Question

In Blazor ServerSide Asp.net core 3.0 Preview 6 the UI does not refresh. I have altered the counter.razor as an example. If you click the buttons "Set counter to ..." the counter is not refreshed. When you click the "Click me" button (is without a parameter) the UI is refreshed and 1 is added to the counter previous clicked.

The buttons seems to work, but the UI is not refreshed.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>
<br />

<p>
    <button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>
</p>

    @for (int i = 0; i < 5; i++)
    {
        var a = i;
        <p><button class="btn btn-primary" onclick="@(() => test(a))">Set counter to @a</button></p>
    }

    @functions {
        int currentCount = 0;

        protected void IncrementCount()
        {
            currentCount++;
        }

        void test(int i)
        {
            currentCount = i;
        }
    }

Any suggestions how to fix this is or is it a bug in Blazor?

I'm not (yet :)) familiar with Blazor... is the difference of @onclick(Click me) and onclick (Set counter) on purpose? — mu88
– mu88, Commented Jun 20, 2019 at 13:20
Was not on purpose, but I read below it is the difference between preview 5 and 6 — Marco Duindam
– Marco Duindam, Commented Jun 21, 2019 at 14:10

Henk Holterman · Accepted Answer · 2019-06-20 14:34:26Z

3

The @functions { } syntax suggests this was started with Preview5, but in Preview6 (current) the syntax for eventhandlers has changed:

Specifying event handlers in Blazor now uses the new directive attribute syntax instead of the normal HTML syntax. The syntax is similar to the HTML syntax, but now with a leading @ character. This makes C# event handlers distinct from JS event handlers.
  <button @onclick="@Clicked">Click me!</button>
When specifying a delegate for C# event handler the @ prefix is currently still required on the attribute value, but we expect to remove this requirement in a future update.

So you need @onclick="@(() => test(a))

answered Jun 20, 2019 at 14:34

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marco Duindam Over a year ago

This is working correctly. It worked also when I added StateHasChanged();

Collectives™ on Stack Overflow

Blazor does not refresh UI when parameter is passed with onclick function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related