在Umbraco-ASP.NET Core 6 MVC Razor视图中使用Telerik/MudBlazor组件可行吗？

核心结论 #

这种集成完全可行，无需局限于JavaScript组件。问题出在Blazor组件在Razor视图中的渲染方式和组件包的正确配置流程上，而非技术可行性。

解决MudBlazor语法不识别的问题 #

1. 确认完整配置流程
   • 通过NuGet安装MudBlazor包
   • 在Program.cs中注册服务：

     builder.Services.AddMudServices();
     

   • 在_Layout.cshtml的<head>中添加MudBlazor的样式和脚本：

     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
     

2. 在Razor视图(.cshtml)中渲染Blazor组件的正确方式
   不能直接在.cshtml里写<MudThemeProvider/>，需要使用Component.InvokeAsync方法：

   @await Component.InvokeAsync<MudThemeProvider>()
   

   若使用自定义Blazor组件，先创建.razor文件，再用同样方式调用：

   @await Component.InvokeAsync<YourCustomBlazorComponent>()
   

解决Telerik组件的程序集缺失问题 #

1. 放弃手动复制.dll的方式，改用NuGet安装完整包
   • 安装Telerik.UI.for.Blazor包（确保版本匹配ASP.NET Core 6）
   • 在Program.cs中注册Telerik服务：

     builder.Services.AddTelerikBlazor();
     

   • 在_Layout.cshtml中添加Telerik的样式和脚本：

     <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" rel="stylesheet" />
     <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
     

2. 在Razor视图中渲染Telerik组件
   同样使用Component.InvokeAsync，比如渲染网格组件：

   @await Component.InvokeAsync<TelerikGrid<YourModel>>(parameters =>
   {
       parameters.Add(p => p.Data, YourDataList);
   })
   

关键注意事项 #

• 确保Umbraco的布局文件(_Layout.cshtml)已引入Blazor的基础脚本：

  <script src="_framework/blazor.server.js"></script>
  

  （Umbraco通常使用Blazor Server模式，若为WebAssembly模式则替换为blazor.webassembly.js）
• 所有Blazor组件的渲染必须通过Component.InvokeAsync，不能直接在.cshtml中写Blazor组件标签
• 组件包版本必须与ASP.NET Core 6兼容，避免版本冲突

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