Blazor设置组件位置时double值输出逗号替代小数点如何解决

Blazor渲染数值类型插值时，默认会使用当前线程的区域性格式化数值，你遇到的10,5格式输出，是当前运行环境的区域性配置将小数点定义为逗号导致的，不符合CSS的数值语法规范，确实需要用固定区域性（Invariant Culture）处理。

方案1：全局配置固定区域性（推荐） #

一次性配置后所有数值渲染都会默认使用点作为小数点分隔符，适配CSS、API交互等通用场景：

• Blazor WebAssembly 项目配置
  在Program.cs入口文件中添加以下代码：

  using System.Globalization;
  
  var builder = WebAssemblyHostBuilder.CreateDefault(args);
  builder.RootComponents.Add<App>("#app");
  
  // 新增以下两行配置固定区域性
  CultureInfo.DefaultThreadCurrentCulture = CultureInfo.InvariantCulture;
  CultureInfo.DefaultThreadCurrentUICulture = CultureInfo.InvariantCulture;
  
  await builder.Build().RunAsync();
  

• Blazor Server 项目配置
  在Program.cs入口文件中添加以下配置：

  using System.Globalization;
  using Microsoft.AspNetCore.Localization;
  
  var builder = WebApplication.CreateBuilder(args);
  
  // 新增固定区域性配置
  builder.Services.Configure<RequestLocalizationOptions>(options =>
  {
      options.DefaultRequestCulture = new RequestCulture(CultureInfo.InvariantCulture);
      options.SupportedCultures = new List<CultureInfo> { CultureInfo.InvariantCulture };
      options.SupportedUICultures = new List<CultureInfo> { CultureInfo.InvariantCulture };
  });
  
  var app = builder.Build();
  
  // 注意要在路由、静态文件等中间件之前注册请求本地化中间件
  app.UseRequestLocalization();
  
  // 其余中间件配置保持原有逻辑不变
  app.UseRouting();
  // ...
  

方案2：局部格式化（仅针对当前场景使用） #

如果不想修改全局区域性配置，也可以在渲染CSS属性时显式指定用固定区域性格式化数值：

1. 先在razor页面顶部引入命名空间（如果已经在_Imports.razor全局引入可跳过）：

   @using System.Globalization
   

2. 修改你的style属性代码：

   style="position: relative ; top: @(_offsetY.ToString(CultureInfo.InvariantCulture))%; left: @(_offsetX.ToString(CultureInfo.InvariantCulture))%;"
   

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