我在我的 ASP.NET Core 6 MVC 项目中包含了 Blazor 组件，但它不起作用
[英]I included Blazor component to my ASP.NET Core 6 MVC project but it doesn't work
问题描述
It displays but doesn't work button click.
它显示但不起作用按钮单击。
Index.cshtml:索引.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 (it is the test component): 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";
}
1 个解决方案
解决方案1
1 已采纳 2022-06-01 07:21:49
You can check if the JS you are referencing in _Layout.cshtml is <script src="_framework/blazor.server.js"></script> or <script src="_framework/blazor.webassembly.js"></script> .您可以检查您在_Layout.cshtml中引用的 JS 是<script src="_framework/blazor.server.js"></script>还是<script src="_framework/blazor.webassembly.js"></script> 。
server.js needs to use render-mode="ServerPrerendered" , and webassembly.js needs to use render-mode="WebAssemblyPrerendered" . server.js需要使用render-mode="ServerPrerendered" ，而webassembly.js需要使用render-mode="WebAssemblyPrerendered" 。
Index.cshtml:索引.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>
Add @using Microsoft.AspNetCore.Components and @using Microsoft.AspNetCore.Components.Web in razor.在razor 中添加@using Microsoft.AspNetCore.Components和@using Microsoft.AspNetCore.Components.Web 。
ShiftsEditor.razor: 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: _Layout.cshtml：
<base href="~/" />
<script src="_framework/blazor.server.js"></script>
Program：程序：
builder.Services.AddServerSideBlazor();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
}
Test Result:测试结果：
Before click:点击前：
After click:点击后：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.