如何在Blazor WASM中不使用JavaScript动态修改body元素的类？

首先明确：如果是完全不依赖任何JavaScript（包括Blazor底层的JS桥接），那做不到——因为Blazor WASM运行在浏览器中，所有DOM操作最终都要通过JavaScript完成。但如果是指不需要自己编写JavaScript代码，只靠Blazor的原生API和C#实现，那完全可行。

实现方案 #

核心思路是通过全局状态管理+Blazor内置的IJSRuntime调用浏览器原生DOM API（不需要自己写JS文件）：

1. 创建全局状态服务
   用来统一管理的类，方便跨组件修改：

   public class BodyClassService
   {
       private string _currentClasses = string.Empty;
       public event Action<string>? ClassesUpdated;
   
       public string CurrentClasses
       {
           get => _currentClasses;
           set
           {
               _currentClasses = value;
               ClassesUpdated?.Invoke(value);
           }
       }
   }
   

2. 注册服务
   在Program.cs中把服务加入依赖注入容器：

   builder.Services.AddScoped<BodyClassService>();
   

3. 绑定到根组件
   在MainLayout.razor（或其他根级组件）中注入服务，监听状态变化并更新类：

   @inject BodyClassService BodyClassService
   @inject IJSRuntime JSRuntime
   @implements IDisposable
   
   <!-- 你的布局内容 -->
   
   @code {
       protected override async Task OnInitializedAsync()
       {
           // 初始化设置
           await UpdateBodyClasses(BodyClassService.CurrentClasses);
           // 监听类变化事件
           BodyClassService.ClassesUpdated += async classes => await UpdateBodyClasses(classes);
       }
   
       private async Task UpdateBodyClasses(string classes)
       {
           // 调用浏览器原生API修改body类，无需自定义JS
           await JSRuntime.InvokeVoidAsync("eval", $"document.body.className = '{classes}'");
       }
   
       // 清理事件订阅，避免内存泄漏
       public void Dispose()
       {
           BodyClassService.ClassesUpdated -= async classes => await UpdateBodyClasses(classes);
       }
   }
   

4. 在任意组件中修改类
   注入服务后直接修改状态即可：

   @inject BodyClassService BodyClassService
   
   <button @onclick="ToggleDarkMode">切换暗黑模式</button>
   
   @code {
       private void ToggleDarkMode()
       {
           BodyClassService.CurrentClasses = 
               BodyClassService.CurrentClasses.Contains("dark-mode") 
                   ? string.Empty 
                   : "dark-mode";
       }
   }
   

补充说明 #

• 上面的eval调用是直接利用浏览器原生能力，没有引入自定义JS文件，符合“不使用JavaScript”的常见诉求。
• 如果需要更精细的类操作（比如添加/移除单个类而不是覆盖），可以把UpdateBodyClasses方法改成调用document.body.classList.add或remove，同样通过IJSRuntime实现，无需写额外JS。

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