Why does the onclick event not work, in my razor pages hosted blazor component, in .net 7.0?

Question

Why does the onclick event not work, in my razor pages hosted blazor component, in .net 7.0?

The Acme Cheese Company 0

I've used the following code in multiple blazor web assembly applications hosted on a razor pages page under .net 5.0 and .net 6.0 before now.
An application I was forced to upgrade to .net 7.0 has rendered the onclick command completely useless
What do I need to do to fix it, please?

<p>@(myinteger)</p>

<button @onclick="MyFunction">Click here</button>

@code
{
    private int myinteger = 0;

    private void MyFunction()
    {
       myinteger++;
    }
}

Anonymous

2023-01-19T01:50:30.6433333+00:00

Hi @The Acme Cheese Company

I've used the following code in multiple blazor web assembly applications hosted on a razor pages page under .net 5.0 and .net 6.0 before now.

Do you mean you create an Asp.net Core Hosted Blazor Webassembly application (it will have Client, Server and Shared projects)?

An application I was forced to upgrade to .net 7.0 has rendered the onclick command completely useless
What do I need to do to fix it, please?

Before upgrade to .Net 7.0, the code works well, right? Try to create a new .Net 7.0 application to check the code, whether it works well or not?

Based on your code, I create a Blazor Webassembly application and selected the Asp.net Core Hosted option, then add a Razor component in the Client project and Pages folder, then test your code, the code works well, check the following screenshot:

Finally, if it still not working on your application, try to use F12 developer tools to check if there has any error in the Console panel.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion
The Acme Cheese Company 0 Reputation points

2023-01-24T18:32:03.4966667+00:00

Thanks, Dillion,
Yes, I created an asp.net core hosted blazor webassembly application with a client, server and shared project.
Instead of using a static html host, I embedded my blazor web assembly in a razor pages page.
After creating several projects this way, in both .net 5.0 and 6.0, trying it in .net 7.0 has broken the onclick process.
The Acme Cheese Company 0 Reputation points

2023-01-24T18:40:13.87+00:00

I'm hoping I've missed something in the app.razor or program.cs files.
Anonymous

2023-01-31T03:00:47.83+00:00

Instead of using a static html host, I embedded my blazor web assembly in a razor pages page.

Whether you have solved the problem or not? If not, can you create a minimal sample to reproduce the problem? I don't know how do you embedded the blazor component in the Razor page?

2 answers

Your answer

Anonymous

2023-01-19T01:50:30.6433333+00:00

Hi @The Acme Cheese Company

I've used the following code in multiple blazor web assembly applications hosted on a razor pages page under .net 5.0 and .net 6.0 before now.

Do you mean you create an Asp.net Core Hosted Blazor Webassembly application (it will have Client, Server and Shared projects)?

An application I was forced to upgrade to .net 7.0 has rendered the onclick command completely useless
What do I need to do to fix it, please?

Before upgrade to .Net 7.0, the code works well, right? Try to create a new .Net 7.0 application to check the code, whether it works well or not?

Based on your code, I create a Blazor Webassembly application and selected the Asp.net Core Hosted option, then add a Razor component in the Client project and Pages folder, then test your code, the code works well, check the following screenshot:

Finally, if it still not working on your application, try to use F12 developer tools to check if there has any error in the Console panel.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion
The Acme Cheese Company 0 Reputation points

2023-01-24T18:32:03.4966667+00:00

Thanks, Dillion,
Yes, I created an asp.net core hosted blazor webassembly application with a client, server and shared project.
Instead of using a static html host, I embedded my blazor web assembly in a razor pages page.
After creating several projects this way, in both .net 5.0 and 6.0, trying it in .net 7.0 has broken the onclick process.
The Acme Cheese Company 0 Reputation points

2023-01-24T18:40:13.87+00:00

I'm hoping I've missed something in the app.razor or program.cs files.
Anonymous

2023-01-31T03:00:47.83+00:00

Instead of using a static html host, I embedded my blazor web assembly in a razor pages page.

Whether you have solved the problem or not? If not, can you create a minimal sample to reproduce the problem? I don't know how do you embedded the blazor component in the Razor page?

Answer 1

Bruce (SqlWork.com) 83,821

My guess is you have JavaScript code on the razor page interfering with the Blazor’s JavaScript event handling.

0 comments

Answer 2

Alex Stewart 0

These days one needs to "set the render mode" all over the place,

something like

@rendermode InteractiveServer

might do the trick

0 comments

Share via

Why does the onclick event not work, in my razor pages hosted blazor component, in .net 7.0?

2 answers

Your answer