如何从 javascript 在 MVC 部分视图中加载 Blazor 组件答案

【问题标题】：How to load Blazor component in MVC partial view from javascript如何从 javascript 在 MVC 部分视图中加载 Blazor 组件
【发布时间】：2022-01-14 11:33:45
【问题描述】：

我有 MVC .net 6 项目，其中有很多部分视图。当我想通过单击某个元素来动态加载局部视图时，我必须执行以下操作：

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

但是该局部视图内的 Blazor 组件将无法正确加载：

服务器渲染模式会留下这样的空标签：

<!--Blazor:{"sequence":0,"type":"server","descriptor":"CfDJ8B99I0cbbItAhZMgQjSIqXhJKeLkYV1Xkv3sOuZEwlnX9K3nAexD73o6LSCwe7KAcr5PSyQ0v2MGUtpX/9Lcp1EtxWGUDbHI1xB3WhU4FZJ6gM2rhbmB\u002BU2kGlrOXdlQKh\u002BJeoWHJVx2QwHV7oTqf\u002BYKrdJNM4yeHzc5cAKR6CcoDU5OML2z2sX2Cixy6jxgAEyarks7sVmFW9UVlEbqDgxSGZFgiJHRITkr0STkdoba4eVwVTxbqloWHUOVv6CPXqoV7NyOTJiiUGLPQLIIAyj1oQjjKys7mjcA1CaKUG4Y2TrM7GtDdnOBWl72cpsl6\u002Bbaf8MggGFm2l7UmoTS3U81EoGSbxWdVjpCXlzpmb\u002B8uofdD6iP3SC\u002B0JASevvFVA=="}-->

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

如果我渲染像 this 这样的组件

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

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

【问题讨论】：

我相信 blazor.server.js 需要知道它在启动时必须管理的组件，即当页面在浏览器中加载时。如果您稍后添加它们 - 动态 - 那么它们不会“注册”并且它们不会被渲染。没有更多细节，很难做出推荐。我建议预先添加组件，然后打开和关闭它们，但这可能不适合您的设计....谁知道呢？
嗯，是的，我在想我可能需要在渲染部分后在 javascript 中添加一些额外的代码，因为它只会将纯 HTML 放在某个元素中，Blazor 服务器应该以某种方式知道它应该与它交互，但我在任何地方都找不到类似的东西。

标签： c# asp.net asp.net-mvc razor blazor

【解决方案1】：

对此有一个“破解”解决方案。在部分组件之后放置<script src="_framework/blazor.server.js"></script> 将使其具有交互性（并且在服务器模式的情况下也呈现它）但会创建一个额外的 signalR 电路并且在同一页面上有多个组件要呈现的情况下将不起作用。

【讨论】：