Blazor中如何向TradingView高级图表传递动态Symbol参数？

核心问题原因 #

TradingView的嵌入脚本依赖于script标签内的静态JSON配置，Blazor无法直接在这个静态脚本块中解析Razor变量（比如@symbol），直接拼接会导致语法错误或变量未被正确解析。

方案1：动态生成JSON配置（快速实现） #

在Razor组件中通过C#代码块构建配置对象，序列化为JSON后输出到script标签内，这样就能正确注入Blazor变量：

<div class="tradingview-widget-container" style="height:100%;width:100%">
    <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
    <div class="tradingview-widget-copyright">
        <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
            <span class="blue-text">Track all markets on TradingView</span>
        </a>
    </div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
        @{
            // 用Blazor变量拼接symbol值
            var chartConfig = new
            {
                autosize = true,
                symbol = $"COINBASE:{Symbol}",
                interval = "D",
                timezone = "Etc/UTC",
                theme = "light",
                style = "1",
                locale = "en",
                enable_publishing = false,
                gridColor = "rgba(255, 255, 255, 0.06)",
                allow_symbol_change = true,
                calendar = false,
                studies = new[] { "STD;MACD" },
                support_host = "https://www.tradingview.com"
            };
            // 序列化为合法JSON字符串
            var configJson = System.Text.Json.JsonSerializer.Serialize(chartConfig);
        }
        @configJson
    </script>
</div>

@code {
    // 定义组件参数，接收外部传入的symbol值
    [Parameter]
    public string Symbol { get; set; } = "BTCUSD";
}

方案2：封装可复用的Blazor组件（全应用复用） #

将TradingView图表封装成独立的Blazor组件，通过参数暴露所有可配置项，方便在全应用中重复使用：

创建TradingViewAdvancedChart.razor组件：

<div class="tradingview-widget-container" style="height:@Height; width:@Width">
    <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
    <div class="tradingview-widget-copyright">
        <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
            <span class="blue-text">Track all markets on TradingView</span>
        </a>
    </div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
        @{
            var chartConfig = new
            {
                autosize = Autosize,
                symbol = $"{Exchange}:{Symbol}",
                interval = Interval,
                timezone = Timezone,
                theme = Theme,
                style = Style,
                locale = Locale,
                enable_publishing = EnablePublishing,
                gridColor = GridColor,
                allow_symbol_change = AllowSymbolChange,
                calendar = Calendar,
                studies = Studies,
                support_host = "https://www.tradingview.com"
            };
            var configJson = System.Text.Json.JsonSerializer.Serialize(chartConfig);
        }
        @configJson
    </script>
</div>

@code {
    // 可配置参数，带默认值
    [Parameter]
    public bool Autosize { get; set; } = true;

    [Parameter, Required]
    public string Symbol { get; set; } = "BTCUSD";

    [Parameter]
    public string Exchange { get; set; } = "COINBASE";

    [Parameter]
    public string Interval { get; set; } = "D";

    [Parameter]
    public string Timezone { get; set; } = "Etc/UTC";

    [Parameter]
    public string Theme { get; set; } = "light";

    [Parameter]
    public string Style { get; set; } = "1";

    [Parameter]
    public string Locale { get; set; } = "en";

    [Parameter]
    public bool EnablePublishing { get; set; } = false;

    [Parameter]
    public string GridColor { get; set; } = "rgba(255, 255, 255, 0.06)";

    [Parameter]
    public bool AllowSymbolChange { get; set; } = true;

    [Parameter]
    public bool Calendar { get; set; } = false;

    [Parameter]
    public string[] Studies { get; set; } = new[] { "STD;MACD" };

    [Parameter]
    public string Height { get; set; } = "100%";

    [Parameter]
    public string Width { get; set; } = "100%";
}

使用方式

在任意Blazor组件中直接引用：

<!-- 基础用法 -->
<TradingViewAdvancedChart Symbol="BTCUSD" />

<!-- 自定义配置 -->
<TradingViewAdvancedChart Symbol="ETHUSD" Exchange="BINANCE" Theme="dark" Interval="1H" />

动态更新图表的额外处理 #

如果需要在运行时切换Symbol或其他配置，可通过@key属性强制组件重新渲染，从而刷新TradingView图表：

<TradingViewAdvancedChart Symbol="@CurrentSymbol" @key="@CurrentSymbol" />

<button @onclick="SwitchToETH">切换到ETHUSD</button>

@code {
    private string CurrentSymbol = "BTCUSD";

    private void SwitchToETH()
    {
        CurrentSymbol = "ETHUSD";
    }
}

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