onclick in Core 3.1 Blazor app doesn't work

Question

I just installed Visual Studio 2019 (v16.4.3, immediately updated to 16.4.4). I have VS2017 on my system, but no prior versions of VS2019.

I created a new Blazor app project. It automatically created Index, Counter, and other pages. It created it as a .NET Core 3.1 app (as 3.1 is now installed automatically with VS2019 v16.4 and later, apparently).

I am literally following this "Get started" page:

https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio

I run the app with no changes from what was generated. Clicking the button on the Counter page does nothing. I don't see any messages in the Debug Output window that have any relations.

I did some searches and found reports of similar issues but the solutions don't seem to apply.

Any idea what is wrong? (it is SO annoying when a freshly generated, unmodified project does not work!)

The code for the Counter page was generated as:

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

_Host.cshtml is:

@page "/"
@namespace ToDoList.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToDoList</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Update:

Per comment suggestions:

I rebooted my computer
Went straight into VS2019 and created a New Project. Selected Blazor App. Accepted all defaults. So, ended up with a project named BlazorApp1.
Hit F5 to start it up. Same results. Clicking the 'Click me' button the Counter does not do anything.

Entire contents of BlazorApp1.csproj:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

</Project>

Note that the Get Started link I am following specifically says to use .NET Core 3.1 (vs 2.1). It says to OPTIONALLY update to the 3.2 preview, but that's only needed if I want to do a Blazor WebAssembly (which I don't). I prefer to only have released code on my system, so I don't want to updated to 3.2 Preview for something that is supposed to work with 3.1.

Check the web browser console for error messages. Also change output window in VS to show your project debug from IIS Or change to run using Kestrel so you can see the output. — Mister Magoo
A Blazor app should target anetstandard2.1 framework but VS Blazor templates can be outdated. Did you check the framework target ? Update also donet template with dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1 — agua from mars
@MisterMagoo I checked the web server output window also. Nothing noteworthy there. — StuartV
@aguafrommars I'm not sure why you are saying the app should target netstandard2.1. Plus, the point is, this is a brand new project, generated from scratch. Completely unmodified by me. If it generates a target of 3.1, it seems to me that it should work. — StuartV

StuartV StuartV · Accepted Answer · 2020-02-07T21:22:39

VS2019 defaulted to launching the app in Internet Explorer.

I changed it to launch it in Edge. It works in Edge.

Final update:

I got it to work in IE11. To do so:

I downloaded the Daddoon Blazor Polyfill package from here:

https://github.com/Daddoon/Blazor.Polyfill

From the downloaded zip, I copied Publish\Blazor.Polyfill.Publish\blazor.polyfill.min.js to a subfolder that I created, named "js", under the wwwroot subfolder in my project folder. I.e. in ToDoList\wwwroot, I created a subfolder named 'js' and then copied the blazor.polyfill.min.js file into that subfolder.

Then, I edited the file _Host.cshtml. I added the first line here (in front of the second line, which was already there, generated by VS and the Blazor Server template):

<script src="js/blazor.polyfill.min.js"></script>
<script src="_framework/blazor.server.js"></script>

I found a bunch of things that said "use Polyfills", but I couldn't find anything that said "here is how you actually do that." So, hopefully this helps someone else. Also, if I did something in a way that is suboptimal, hopefully someone will see this and tell me how to do it in a better way.

onclick in Core 3.1 Blazor app doesn't work

2 Answers