CODEWITHSUNDEEP
asp.net-coreonclickblazor
StuartV
StuartV

Reputation: 107

onclick in Core 3.1 Blazor app doesn't work

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://learn.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:

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.

Upvotes: 2

Views: 2584

Answers (2)

Alaa Fadhel
Alaa Fadhel

Reputation: 1

I had the same problem

To solve it, go to your project's Properties >> Debug >> uncheck Enable SSL. Then run your project by clicking e.g. IIS Express.

Upvotes: 0

StuartV
StuartV

Reputation: 107

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.

Upvotes: 4

Related Questions