在 MVC 视图/Razor 页面中使用 RenderComponentAsync (Blazor WebAssembly)

Question

我已经编辑了整个问题以便更好地理解

我的示例解决方案由 2 个项目组成

• MVC 应用程序 + Blazor 服务器
• 剃刀类库

Razor 类库有一个非常简单的组件“Awesome.razor”：

<h3>@name</h3>

<button @onclick="@(() => name = name.ToUpper())">Upper case me</button>

@code {
    string name = "Mr. Blazor";

}

MVC 应用程序有一个 Home/Index.cshtml：

看起来像这样：

<div id="MyComponent">
    @(await Html.RenderComponentAsync<Awesome>(RenderMode.ServerPrerendered))
</div>

如果我运行应用程序 ( <root>/home/index)

我可以点击按钮，Awesome 组件就可以工作了。

我可以使用相同的技术 ( Html.RenderComponentAsync) 而不是使用 Blazor 服务器来使用 Blazor WebAssembly？

我做了一些尝试使其工作（通过使用 Blazor WebAssembly 的模板并将其与 MVC 应用程序集成来尝试/错误），但无法使其工作。我想知道我是否做错了什么，或者是否RendercomponentAsync只能与 Blazor 服务器结合使用。

整个源代码可以在这里找到（没有我对 WebAssembly 的尝试）：https : //github.com/geeForceOne/MvcWithBlazor

更新

显然RenderComponentAsync在 Blazor WebAssembly 中有支持。

我设法通过将他的示例应用程序适应这个https://github.com/geeForceOne/BlazorWebAssemblyWithPrerendering来部分实现我想要的（归功于Daniel Roth）。

我用 try n error 尝试了不同的事情，并提出了这个解决方案：

在 Blazor.Client 项目的 Startup.cs 中，我注册了两个组件：

app.AddComponent<Counter>("counter");
app.AddComponent<Awesome>("awesome");

然后我创建了两个 Razor Pages MyTest.cshtml 和 MyTest2.cshtml。虽然 MyTest.cshtml 完全符合我的要求并且可以正常工作：

<awesome>
    @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static))
  </awesome>

<counter>
    @(await Html.RenderComponentAsync<Counter>(RenderMode.Static))
</counter>

<script src="_framework/blazor.webassembly.js"></script>

它不适用于 MyTest2.chshtml

@* To make this work, you need to 
    call
        app.AddComponent<Awesome>("awesome"); 
    before 
        app.AddComponent<Counter>("counter");
    in
        BlazorWebAssemblyWithPrerendering.Client.Startup
*@

<awesome>
    @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static))
</awesome>


<script src="_framework/blazor.webassembly.js"></script>

我的问题：我是否走在正确的道路上（我需要改变什么才能使其正常工作）？或者我可以按照 Daniel Roth 的原始样本以这种方式运行一个组件吗？

Answer 1

看过你的应用程序并做了一些调查后，这是我的新答案：

您无法在浏览器上执行嵌入 Razor Pages 应用程序或 MVC 应用程序中的 Razor 组件。换句话说，您的组件不是使用 WebAssembly 执行的。

即使您在应用程序中引用 Blazor WebAssembly 应用程序，引用的组件也不会使用 WebAssembly 在浏览器上运行。我已在您的 MVC 解决方案中创建了默认的 Blazor WebAssembly 应用程序，并在您的 MVC 项目中添加了对它的引用。然后我在 Index.Html 中渲染了计数器，效果很好。但计数器组件并未使用 WebAssembly 在浏览器上执行。

当我使用这个版本时：

@(await Html.RenderComponentAsync<MyBlazorAssembly.Pages.Counter>(RenderMode.ServerPrerendered))

该Counter组件是交互式的，可以递增并显示新值。当我使用时会产生相同的行为RenderMode.Server。在这两种情况下，Counter组件由于RenderMode选择而具有交互性，并且组件在服务器上预渲染。选择时RenderMode.Static，组件将呈现为静态 Html，并且无法进行交互。

这正是您尝试在 WebAssembly 上运行 Awesome 组件时发生的情况。不幸的是，它被渲染为静态 Html，当您单击按钮时，不会引发任何响应...事件处理程序不会被触发，不会执行 lambda 表达式，并且无法将文本大写（您可以这样做使用纯 JavaScript）。

您可以在此处阅读有关渲染模式的信息。

请，如果我不够清楚，请随时问我任何问题......