如何在Blazor组件中设置href？求无需JavaScript的实现方案

我需要基于appsettings.json中的配置值设置导航链接，当前用JavaScript设置href的方案存在问题——页面加载后DOM结构里看不到href属性，只有在开发者控制台查询元素时才显示。

当前使用的Navigation.razor组件代码：

@inject IConfiguration Configuration
@inject IJSRuntime JSRuntime

<a id="test-link">Test</a>

<script>
    function SetNavlinks(url){
        var a = document.getElementById('test-link')
        a.setAttribute("href", url);
    }
</script>

@code{
    protected override async Task OnInitializedAsync()
    {       
        await InitializeNavigation();
        InvokeAsync(StateHasChanged);
    }

    Task InitializeNavigation(){
        var testLinkURL = Configuration.GetValue<string>("ContentURLs:Values:TestLink");
        JSRuntime.InvokeVoidAsync("SetNavlinks", testLinkURL);
        return Task.CompletedTask;
    }
}

页面加载后查看DOM结构：

<a id="test-link">Test</a>

开发者控制台查询元素结果：

<a href="https://itworks.com" id="test-link">Test</a>

最优解决方案（无需JavaScript） #

直接通过Blazor的数据绑定功能，将配置值直接绑定到<a>标签的href属性，代码更简洁且不存在DOM操作时序问题：

@inject IConfiguration Configuration

<a href="@TestLinkURL">Test</a>

@code{
    private string TestLinkURL { get; set; }

    protected override void OnInitialized()
    {
        // 从appsettings.json读取配置值
        TestLinkURL = Configuration.GetValue<string>("ContentURLs:Values:TestLink");
    }
}

方案优势 #

• 完全不需要依赖JavaScript操作DOM，避免了Blazor渲染周期与JS执行的时序冲突
• 组件初始化时直接读取配置，页面渲染时会直接生成带有正确href的<a>标签，DOM结构会直接显示该属性
• 代码更简洁，维护成本更低

原方案问题原因 #

之前使用JS设置href的方式，因为Blazor组件渲染完成后才会执行JS代码，所以页面初始渲染的DOM结构中没有href属性，但JS执行后会修改实际DOM，因此开发者控制台能查到修改后的结果。而直接绑定的方式是Blazor在渲染阶段就把href值写入DOM，不存在时序问题。

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