我已经编辑了整个问题以更好地理解
我的示例解决方案由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 Server使用Blazor WebAssembly吗?
我做了一些尝试来使其工作(通过使用Blazor WebAssembly模板并将其与MVC App集成,尝试/出错),但是无法使其工作。我想知道我是否做错了什么,或者RendercomponentAsync
是否只能与Blazor Server结合使用。
整个源代码可以在这里找到(无需我尝试使用WebAssembly):https://github.com/geeForceOne/MvcWithBlazor
UPDATE
显然在Blazor WebAssembly中有RenderComponentAsync
支持。
通过使他的示例应用程序适应此Daniel Roth,我设法部分实现了我想要的(归功于https://github.com/geeForceOne/BlazorWebAssemblyWithPrerendering)。
我用try n错误尝试了不同的方法,并提出了此解决方案:
在Blazor.Client项目的Startup.cs中,我注册了两个组件:
app.AddComponent<Counter>("counter");
app.AddComponent<Awesome>("awesome");
然后,我创建了两个Razor页面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的原始样本以这种方式只运行一个组件?
即使您在应用程序中引用了Blazor WebAssembly应用程序,引用的组件也不会在使用WebAssembly的浏览器中运行。我已经在您的MVC解决方案中创建了默认的Blazor WebAssembly App,并在您的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.
请,如果我不够清楚,请随时问我任何问题...