从模板创建 Blazor 应用程序时，“交互位置”是什么意思？
ham*_*tar 2 project-template blazor visual-studio-2022
我认为这是指客户端或服务器，但使用这些作为选项我无法完全理解这一点。
有很多选择，但是当你不明白它们的意思时？？？？？？
不同之处在于为 SPA 设置渲染模式的位置。
当您选择GlobalApp.razor时，渲染模式将在两个组件上设置。这会覆盖子组件中的任何“较低”设置。
下面的示例将其设置为InterActiveServer。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="SSR.Server.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
当您选择 时Page/Component，App看起来像这样。没有定义渲染模式，因此服务器端渲染是默认的，除非在页面或组件级别专门设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="SSR.Server.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
将这个简单的组件添加到您的解决方案中并将其添加到任何页面。它会告诉您该页面正在使用什么渲染状态。当组件从预渲染切换到完全交互时，它也会改变状态。
RenderContextState.razor
<div class="@_alertCss m-2">
@_alertText
</div>
@code {
private bool _rendered;
private string _alertCss => _rendered ? "alert alert-success" : "alert alert-danger";
private string _alertText => _rendered ? "Interactively Rendered" : "Statically Rendered";
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
_rendered = true;
// We Shouldn't really do this but we need to display the result of the component mutation
// OnAfterRender should only normally be used for JSInterop code
this.StateHasChanged();
}
}
}
例如：
@page "/"
<PageTitle>Home</PageTitle>
<RenderContextState />
<h1>Hello, world!</h1>
Welcome to your new app.
模板上的所有 WebAssembly 模式Blazor Web App都是 AspNetCore Hosted。该模板部署服务器和客户端项目。
如果您想要独立的 WASM，请使用Blazor WebAssembly Standalone App模板。
我正在写一篇关于这个非常[令人困惑]的主题的文章。完成后我会添加对此答案的引用。
| 归档时间： |
|
| 查看次数： |
1568 次 |
| 最近记录： |