如何从javascript加载MVC部分视图中的Blazor组件

Question

我有一个MVC.net 6项目，它有很多局部视图。当我想通过点击某个元素来动态加载部分视图时，我必须这样做：

$.ajax({
type: "GET",
url: url,
success: function (data) {
$partialPlaceholder.html(data);          
}});

但是部分视图中的Blazor组件不会被正确加载：

1. 服务器渲染模式将留下一个空标记，如下所示：

<!--Blazor:{"sequence":0,"type":"server","descriptor":"CfDJ8B99I0cbbItAhZMgQjSIqXhJKeLkYV1Xkv3sOuZEwlnX9K3nAexD73o6LSCwe7KAcr5PSyQ0v2MGUtpX/9Lcp1EtxWGUDbHI1xB3WhU4FZJ6gM2rhbmBu002BU2kGlrOXdlQKhu002BJeoWHJVx2QwHV7oTqfu002BYKrdJNM4yeHzc5cAKR6CcoDU5OML2z2sX2Cixy6jxgAEyarks7sVmFW9UVlEbqDgxSGZFgiJHRITkr0STkdoba4eVwVTxbqloWHUOVv6CPXqoV7NyOTJiiUGLPQLIIAyj1oQjjKys7mjcA1CaKUG4Y2TrM7GtDdnOBWl72cpsl6u002Bbaf8MggGFm2l7UmoTS3U81EoGSbxWdVjpCXlzpmbu002B8uofdD6iP3SCu002B0JASevvFVA=="}-->

2. ServerPrerendered模式将渲染组件，但它不会是交互式的，就像它没有连接到集线器一样

如果我渲染像这样的组件

Blazor.renderComponent(element, { componentName: "ShoppingCart" }, parameters: { shoppingCartId: "asdf" });

那么它将有多个根组件，我不想这样做。部分装载剃须刀组件的正确方法是什么？

Answer 1

有一个"破解"；解决方案。将<script src="_framework/blazor.server.js"></script>放在组件的partial后面会使其具有交互性(在服务器模式下也会渲染它(，但会创建一个额外的signalR电路，并且在同一页面上有多个组件要渲染的情况下不会工作。