Blazor中如何拆分JSON的Ring_Position字段并格式化显示到HTML

直接按以下步骤修改即可，无需额外引入第三方依赖：

• 第一步：修正UnloadDetails类中Ring_Position的类型定义。你当前定义的值类型为object，但实际JSON返回的该字典值全为字符串，直接改成Dictionary<string, string>可以省去不必要的类型转换操作。
• 第二步：在组件代码中添加一个轻量的格式化方法，负责按冒号拆分原始值，拼接对应的单位后缀，同时做空值、格式异常的兼容处理，避免页面渲染报错。
• 第三步：修改Razor模板中的输出逻辑，不要直接输出原始字典值，调用格式化方法处理后再渲染。

修改后的后端C#代码如下：

private UnloadDetails[]? unloads;

protected override async Task OnInitializedAsync()
{
    unloads = await Http.GetFromJsonAsync<UnloadDetails[]>("sample-data/unload.json");
}

/// <summary>
/// 格式化RingPosition字段值为带单位的展示文本
/// </summary>
private string FormatRingPosition(string rawValue)
{
    // 空值或者格式不符合预期直接返回原始内容，避免报错
    if (string.IsNullOrWhiteSpace(rawValue) || !rawValue.Contains(':'))
    {
        return rawValue ?? string.Empty;
    }

    var valueParts = rawValue.Split(':', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
    return valueParts.Length == 2 
        ? $"{valueParts[0]} mm - {valueParts[1]} °C" 
        : rawValue;
}

public class UnloadDetails
{
    public string? Operator { get; set; }
    public string? Tool_ID { get; set; }
    public string? Notes { get; set; }
    // 修改字典值类型为string
    public Dictionary<string, string> Ring_Position { get; set; } = new();
}

修改后的Razor渲染代码：

<div class="ring-Details" style="font-weight: lighter; font-size: small;">
    @FormatRingPosition(labels.Ring_Position["1-03"])
</div>

以你给出的1-03点位对应值19.297:1200为例，上述代码最终渲染结果为19.297 mm - 1200 °C，完全匹配你需要的展示格式。如果后续需要批量渲染所有Ring_Position下的点位，直接遍历字典即可，所有值都可以复用这个格式化方法。

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