我已经编辑了整个问题以便更好地理解
我的示例解决方案由 2 个项目组成
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 中的支持。通过将他的示例应用程序调整到这个 Daniel Roth,我设法部分实现了我想要的(归功于 https://github.com/geeForceOne/BlazorWebAssemblyWithPrerendering)。 .
我用 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 的原始样本以这种方式运行一个组件吗?
最佳答案
看过您的应用程序并进行了一些调查后,这是我的新答案:
您无法在浏览器上执行嵌入在 Razor Pages 应用程序或 MVC 应用程序中的 Razor 组件。换句话说,您的组件不是使用 WebAssembly 执行的。
即使您在应用中引用 Blazor WebAssembly 应用,引用的组件也不会在使用 WebAssembly 的浏览器上运行。我在您的 MVC 解决方案中创建了默认的 Blazor WebAssembly 应用程序,并在您的 MVC 项目中添加了对它的引用。然后我在 Index.Html 中渲染了 Counter,它运行良好。但是计数器组件不是在浏览器上使用 WebAssembly 执行的。
当我使用这个版本时:
@(await Html.RenderComponentAsync<MyBlazorAssembly.Pages.Counter>(RenderMode.ServerPrerendered))
Counter
组件是交互式的,增加并显示新值。当我使用
RenderMode.Server
时会产生相同的行为.在这两种情况下,Counter
由于 RenderMode
,组件是交互式的选择,并且组件在服务器上预渲染。当RenderMode.Static
被选中,组件呈现为静态 Html,并且无法进行交互。这正是您尝试在 WebAssembly 上运行 Awesome 组件时发生的情况。不幸的是,它呈现为静态 Html,当您单击按钮时,不会引发任何响应......事件处理程序没有被触发,没有执行 lambda 表达式,并且无法将您的文本大写(您可以这样做使用纯 JavaScript)。
You can read here about the rendering modes.
请,如果我不够清楚,请不要犹豫,问我任何问题......
关于asp.net-core - 在 MVC View /Razor 页面中使用 RenderComponentAsync (Blazor WebAssembly),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58505969/