我将 Blazor 组件包含到我的 ASP.NET Core 6 MVC 项目中，但它不起作用

Question

显示但点击按钮不起作用。

Index.cshtml:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css">
</head>
<body>
<component type="typeof(ShiftsEditor)" render-mode="WebAssemblyPrerendered"/>
</body>
</html>

ShiftsEditor.razor（是测试组件）：

@page "/ShiftsEditor"

<h3>ShiftsEditor</h3>
<p>@prgf</p>
<button @onclick="UpdateHeading">button</button>

@code {
    public string prgf = "str";

    public void UpdateHeading() => prgf = "content updated";
}

Answer 1

您可以检查您在 _Layout.cshtml 中引用的 JS 是 <script src="_framework/blazor.server.js"></script> 还是 <script src="_framework/blazor.webassembly.js"></script>.

server.js需要用render-mode="ServerPrerendered"，webassembly.js需要用render-mode="WebAssemblyPrerendered".

Index.cshtml:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css">
</head>
<body>
    <component type="typeof(ShiftsEditor)" render-mode="ServerPrerendered"/>
</body>
</html>

在剃须刀中添加@using Microsoft.AspNetCore.Components和@using Microsoft.AspNetCore.Components.Web。

ShiftsEditor.razor:

@page "/ShiftsEditor"
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;

<h3>ShiftsEditor</h3>
<p>@prgf</p>
<button @onclick="UpdateHeading">button</button>
@code {
    public string prgf = "str";
    public void UpdateHeading() => prgf = "content updated";
}

_Layout.cshtml:

<base href="~/" />
<script src="_framework/blazor.server.js"></script>

程序：

builder.Services.AddServerSideBlazor();
app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub();
}

测试结果：

点击前：

点击后：

我将 Blazor 组件包含到我的 ASP.NET Core 6 MVC 项目中，但它不起作用

I included Blazor component to my ASP.NET Core 6 MVC project but it doesn't work

asp.net-core

blazor