如何使用JavaScript将ViewComponent追加到DIV元素中

你的原有实现无法生效，原因如下：

• document.createElement仅支持传入单个标签名称作为参数（例如createElement('p')），不支持传入完整标签字符串，你当前的写法无法创建出可用的DOM节点
• <vc:direct-messages>是ASP.NET Core的服务器端Razor标签助手，仅会在服务端渲染阶段被解析为对应的HTML内容，发送到浏览器端后该标签没有任何特殊语义，浏览器不会主动渲染对应的ViewComponent内容

方案1：接口动态请求（推荐，支持动态传参） #

首先在后端新增一个接口用于返回ViewComponent渲染后的HTML：

// 对应你的Controller中新增Action
public IActionResult RenderDirectMessages(/* 这里可以加你的ViewComponent需要的参数*/)
{
    return ViewComponent("DirectMessages");
}

前端修改为通过AJAX请求拿到渲染结果后插入到目标节点：

const sideMenu = document.getElementById('SideMenu');
// 替换为你实际的接口路由
fetch('/YourControllerName/RenderDirectMessages')
  .then(response => response.text())
  .then(html => {
    // 将渲染好的HTML插入到侧边菜单末尾
    sideMenu.insertAdjacentHTML('beforeend', html);
  })
  .catch(error => console.error('组件加载失败：', error));

方案2：预渲染HTML（适合无动态参数场景） #

如果你的ViewComponent不需要接收动态参数，可以直接在Razor页面中将组件预渲染为HTML字符串，存在JS变量中直接调用：

<script>
// Razor会在服务端直接将组件渲染为HTML赋值给变量
const directMessagesHtml = `@await Component.InvokeAsync("DirectMessages")`;
const sideMenu = document.getElementById('SideMenu');
sideMenu.insertAdjacentHTML('beforeend', directMessagesHtml);
</script>

内容的提问来源于stack exchange，提问作者JAmes