Blazor WASM项目中Telerik基础组件无法响应交互的问题

问题场景 #

基于.NET 8创建的Blazor Web App采用WebAssembly模式，拆分出Project.Server和Project.Client项目，将Razor页面迁移至Client并引入Telerik组件后，出现以下问题：

• Telerik下拉框、颜色选择器等组件样式正常，但无法点击交互
• 移除页面中的@inject HttpClient Http语句后，组件交互恢复正常
• 尝试添加交互式服务器渲染模式未解决问题

核心原因 #

1. HttpClient服务注册冲突 #

Server端同时注册了命名HttpClient和全局Scoped HttpClient，覆盖了Blazor WASM框架默认提供的HttpClient实例。Telerik组件依赖JS Interop完成交互，当HttpClient注入过程中出现异常（如BaseAddress配置错误、服务解析失败），会阻塞组件的JS初始化流程，导致交互失效。

2. 渲染模式配置混乱 #

Server端重复调用AddRazorComponents并同时添加WASM和Server渲染模式，导致组件渲染上下文混淆，进一步加剧了HttpClient注入后的异常影响。

3. 潜在的BaseComponent异常 #

页面继承的BaseComponent可能包含影响HttpClient初始化或组件生命周期的代码，注入HttpClient后触发异常，中断了Telerik组件的初始化。

可行解决方案 #

方案一：修正HttpClient注册逻辑，避免覆盖默认实例 #

1. 修改Server端Program.cs，移除全局Scoped HttpClient注册：

// 移除这一行
// builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("Project.Server"));

2. 在Client项目的Program.cs中配置命名HttpClient：

builder.Services.AddHttpClient("Project.Server", client => 
{ 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress); 
    // 如果API是外部地址，直接替换为实际API地址
    // client.BaseAddress = new Uri(builder.Configuration["ApiUrl"]);
});

3. 页面中注入IHttpClientFactory获取命名客户端：

@inject IHttpClientFactory HttpClientFactory

4. 在业务代码中使用：

var httpClient = HttpClientFactory.CreateClient("Project.Server");
var response = await httpClient.GetAsync($"{_diUrl}/document-types/{_selectedModelId}");

方案二：使用默认HttpClient并配置API代理 #

如果希望使用Blazor WASM默认的HttpClient（自动指向Server地址），可在Server端配置反向代理转发请求到实际API：

1. 保留Server端的命名HttpClient注册，但移除全局Scoped注册。
2. 在Server端Program.cs的请求管道中添加代理规则：

app.MapForwarder("/document-types/{**catch-all}", 
    $"{builder.Configuration["ApiUrl"]}/document-types/{**catch-all}");

3. 页面中直接注入默认HttpClient：

@inject HttpClient Http

此时WASM的HttpClient请求会先发送到Server，再由Server转发到目标API。

方案三：排查BaseComponent影响 #

暂时移除页面的@inherits BaseComponent语句，测试组件是否恢复交互：

• 如果恢复正常，说明BaseComponent中存在影响HttpClient或组件初始化的代码，需检查其OnInitializedAsync等生命周期方法是否有异常逻辑。

方案四：确认Telerik资源加载正确性 #

确保Telerik的CSS和JS资源在Client项目的wwwroot/index.html中正确引入（而非仅在Server的App.razor中）：

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

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