asp.net-core - Core 3.1 Blazor 应用程序中的 onclick 不起作用

标签 asp.net-core onclick blazor

我刚刚安装了 Visual Studio 2019(v16.4.3,立即更新到 16.4.4)。我的系统上有 VS2017,但没有 VS2019 的早期版本。

我创建了一个新的 Blazor 应用项目。它自动创建索引、计数器和其他页面。它将其创建为 .NET Core 3.1 应用程序(显然,3.1 现在随 VS2019 v16.4 及更高版本自动安装)。

我正在关注这个“入门”页面:

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

我运行该应用程序时,生成的内容没有发生任何更改。单击计数器页面上的按钮不会执行任何操作。我在“调试输出”窗口中没有看到任何有任何关系的消息。

我进行了一些搜索并发现了类似问题的报告,但解决方案似乎并不适用。

知道出了什么问题吗? (当一个新生成的、未经修改的项目无法工作时,这真是太烦人了!)

计数器页面的代码生成为:

@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 是:

@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>

更新:

每条评论的建议:

  • 我重新启动了计算机
  • 直接进入 VS2019 并创建一个新项目。选定的 Blazor 应用程序。接受所有默认值。因此,最终形成了一个名为 BlazorApp1 的项目。
  • 按 F5 启动它。结果相同。单击“Click me”按钮,计数器不会执行任何操作。

BlazorApp1.csproj 的全部内容:

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

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

</Project>

请注意,我关注的“入门”链接特别指出要使用 .NET Core 3.1(与 2.1)。它说可以选择更新到 3.2 预览版,但只有当我想做 Blazor WebAssembly 时才需要(我不想)。我更喜欢只在我的系统上发布代码,因此我不想更新到 3.2 预览版来获取应该与 3.1 一起使用的内容。

最佳答案

VS2019 默认在 Internet Explorer 中启动应用程序。

我将其更改为在 Edge 中启动它。它适用于 Edge。

最终更新:

我让它在 IE11 中工作。为此:

我从这里下载了 Daddoon Blazor Polyfill 包:

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

从下载的 zip 中,我将 Publish\Blazor.Polyfill.Publish\blazor.polyfill.min.js 复制到我在项目文件夹的 wwwroot 子文件夹下创建的名为“js”的子文件夹。 IE。在 ToDoList\wwwroot 中,我创建了一个名为“js”的子文件夹,然后将 blazor.polyfill.min.js 文件复制到该子文件夹中。

然后,我编辑了文件_Host.cshtml。我在此处添加了第一行(在第二行前面,该行已经存在,由 VS 和 Blazor 服务器模板生成):

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

我发现了很多说“使用 Polyfills”的东西,但我找不到任何说“这就是你实际上如何做到这一点”的东西。所以,希望这对其他人有帮助。另外,如果我以次优的方式做了某件事,希望有人会看到这一点并告诉我如何以更好的方式去做。

关于asp.net-core - Core 3.1 Blazor 应用程序中的 onclick 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60104232/

相关文章:

asp.net-core - JsonPatchDocument<T> 调用 API 时抛出 400 错误

jquery - 单击选项即可显示元素

azure - 如何在运行时在 Blazor WebAssembly 客户端应用程序中使用 Azure 应用程序设置作为 appsettings.json 配置?

blazor - 服务器端 Blazor 的 WYSIWYG HTML 编辑器

reactjs - React : How to add onChange functionality inside of Function component using React Hooks? 需要复选框中的 onClick 事件来影响输入状态

c# - 使用 Blazor 加载外部 .NET Standard 2.0 程序集

entity-framework - 获取 Entity Framework 中两个日期之间的天数

c# 通过 FirebaseDatabase.net 查询 Firebase 数据的路径

api - Docker:Docker运行后无法在浏览器上启动.Net Core 3.1 Web Api

java - Android:你如何通过点击进入另一个 Activity ?