Blazor天气应用：求助用C#替代JS实现逻辑及CSS解析方案

一、ExCss解析CSS快速落地 #

首先安装ExCss的NuGet包：

Install-Package ExCSS

或者在Visual Studio的NuGet包管理器里直接搜索ExCss安装。

核心解析代码示例：

using ExCSS;
using System.IO;

// 读取CSS内容（根据项目类型调整读取方式）
var cssContent = File.ReadAllText("./wwwroot/css/weather-styles.css");

// 解析CSS
var parser = new StylesheetParser();
var stylesheet = parser.Parse(cssContent);

// 提取需要的样式规则，比如天气卡片的背景色
var sunnyCardRule = stylesheet.StyleRules.FirstOrDefault(r => r.SelectorText == ".weather-card.sunny");
if (sunnyCardRule != null)
{
    var bgDeclaration = sunnyCardRule.Declarations.FirstOrDefault(d => d.Name == "background-color");
    if (bgDeclaration != null)
    {
        // 拿到颜色值，后续可以绑定到Blazor组件
        string sunnyBgColor = bgDeclaration.Term.ToString();
    }
}

• 注意：Blazor WebAssembly项目中，若CSS是嵌入式资源，需用程序集读取：

var assembly = typeof(YourWeatherComponent).Assembly;
using var stream = assembly.GetManifestResourceStream("YourProjectName.Resources.weather-styles.css");
using var reader = new StreamReader(stream);
var cssContent = reader.ReadToEnd();

二、原JS天气逻辑转C#实现 #

直接把JS里的业务逻辑一对一转成C#方法即可，比如：

1. 温度转换 #

原JS代码：

function convertTemp(temp, toFahrenheit) {
    return toFahrenheit ? (temp * 9/5) + 32 : temp;
}

转C#：

public double ConvertTemp(double temp, bool toFahrenheit)
{
    return toFahrenheit ? (temp * 9/5) + 32 : temp;
}

2. 天气状态样式切换 #

原JS可能通过DOM操作加类，Blazor里直接绑定类名：

// 组件类内属性
public string WeatherCardClass { get; set; } = "weather-card";

// 根据天气类型更新类
public void UpdateCardStyle(string weatherType)
{
    WeatherCardClass = weatherType switch
    {
        "sunny" => "weather-card sunny",
        "rainy" => "weather-card rainy",
        "cloudy" => "weather-card cloudy",
        _ => "weather-card"
    };
}

对应Blazor HTML：

<div class="@WeatherCardClass">
    <p>@CurrentTemp° @(IsFahrenheit ? "F" : "C")</p>
</div>

三、Blazor整合注意事项 #

• 缓存解析结果：把解析后的Stylesheet存在组件的私有字段里，避免每次渲染都重复解析CSS。
• 动态样式绑定：如果需要根据解析出的CSS属性动态调整组件样式，直接绑定到内联样式：

<div style="background-color: @SunnyBgColor; color: @SunnyTextColor;">
    晴天
</div>

• 处理CSS兼容性：ExCss对部分CSS新特性（如CSS变量、嵌套规则）支持有限，若你的CSS用到这些，可手动提取变量值：

// 提取CSS变量
var rootRule = stylesheet.StyleRules.FirstOrDefault(r => r.SelectorText == ":root");
var primaryColor = rootRule?.Declarations.FirstOrDefault(d => d.Name == "--primary-color")?.Term.ToString();

四、常见问题解决 #

• 解析失败：检查CSS语法是否标准，ExCss对非法CSS的容错性较低，尽量用标准语法编写。
• 文件读取错误：确保CSS文件的路径正确，WebAssembly项目中文件需放在wwwroot目录，Server项目注意文件权限。

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