Blazor JsInterop问题：调用JS时目标Div元素未就绪

问题背景 #

我有一个客户端Blazor组件，通过布尔变量opened控制.options-wrapper元素的显示和隐藏。需求是在这个Div显示后执行JavaScript代码调整它的屏幕位置，但目前在OnClick事件中调用JS时，该Div还没完成渲染，导致JS无法获取到元素。虽然用JS定时器能临时解决，但想找个更优雅的方案。

原代码如下：

Component.razor #

<div id="select-@Id" class="select-component" style="position: relative;">
    <div class="option-selected" @onclick="@OnClick" style="border: 1px solid black;">
        @if (opened)
        {
            <div class="options-wrapper" style="position: absolute; top: 30px; left: 0; border:1px solid red; background-color: white; z-index: 100;">
                Sample Content
            </div>            
        }
    </div>
</div>  

Component.razor.cs #

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace Accounting.Web.Components.Select
{
    public partial class Select
    {
        [Parameter]
        public int Id { get; set; } = default!;
        
        [Parameter]
        public RenderFragment ChildContent { get; set; } = default!;

        [Inject]
        public IJSRuntime JSRuntime { get; set; }

        private IJSObjectReference jsModule;

        public bool opened = false;


        public void OnClick()
        {
            opened = !opened;

            if (opened)
            {
                jsModule.InvokeVoidAsync("adjustPosition", "select-" + Id);                
            } 
        }

        protected override async Task OnInitializedAsync()
        {
            jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/test.js");
        }        
    }
}

test.js #

export function adjustPosition(node) {
    console.log(node);
    console.log($("#" + node + " .options-wrapper").length);   // 始终返回0
}

优雅解决方案：利用Blazor生命周期方法OnAfterRenderAsync #

Blazor的OnAfterRenderAsync生命周期方法会在组件完成渲染（DOM已更新）后调用，正好适合处理这种需要操作刚渲染完成的DOM元素的场景。

步骤1：添加状态标记变量 #

在组件类中添加一个私有变量_shouldAdjustPosition，用来标记是否需要执行位置调整操作，避免每次渲染都触发JS。

步骤2：修改点击事件逻辑 #

点击时设置opened状态的同时，标记需要调整位置。

步骤3：重写OnAfterRenderAsync方法 #

在这个方法中检查标记和opened状态，确认需要调整时调用JS方法，执行后重置标记。

修改后的Component.razor.cs代码：

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace Accounting.Web.Components.Select
{
    public partial class Select
    {
        [Parameter]
        public int Id { get; set; }
        
        [Parameter]
        public RenderFragment ChildContent { get; set; }

        [Inject]
        public IJSRuntime JSRuntime { get; set; }

        private IJSObjectReference jsModule;
        private bool opened = false;
        private bool _shouldAdjustPosition; // 标记是否需要执行位置调整


        public void OnClick()
        {
            opened = !opened;

            if (opened)
            {
                _shouldAdjustPosition = true; // 标记需要调整位置
            } 
        }

        protected override async Task OnInitializedAsync()
        {
            jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/test.js");
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (_shouldAdjustPosition && opened)
            {
                await jsModule.InvokeVoidAsync("adjustPosition", "select-" + Id);
                _shouldAdjustPosition = false; // 执行后重置标记，避免重复触发
            }
            await base.OnAfterRenderAsync(firstRender);
        }
    }
}

进阶优化：使用ElementReference直接定位元素 #

如果不想依赖ID定位DOM元素，可以使用Blazor的ElementReference直接获取元素引用，这样更高效也避免ID冲突问题：

修改Component.razor #

给.options-wrapper添加@ref属性：

<div id="select-@Id" class="select-component" style="position: relative;">
    <div class="option-selected" @onclick="@OnClick" style="border: 1px solid black;">
        @if (opened)
        {
            <div @ref="_optionsWrapperRef" class="options-wrapper" style="position: absolute; top: 30px; left: 0; border:1px solid red; background-color: white; z-index: 100;">
                Sample Content
            </div>            
        }
    </div>
</div>  

修改Component.razor.cs #

添加ElementReference变量，并调整OnAfterRenderAsync的JS调用：

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace Accounting.Web.Components.Select
{
    public partial class Select
    {
        [Parameter]
        public int Id { get; set; }
        
        [Parameter]
        public RenderFragment ChildContent { get; set; }

        [Inject]
        public IJSRuntime JSRuntime { get; set; }

        private IJSObjectReference jsModule;
        private bool opened = false;
        private bool _shouldAdjustPosition;
        private ElementReference _optionsWrapperRef; // 元素引用


        public void OnClick()
        {
            opened = !opened;

            if (opened)
            {
                _shouldAdjustPosition = true;
            } 
        }

        protected override async Task OnInitializedAsync()
        {
            jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/test.js");
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (_shouldAdjustPosition && opened)
            {
                await jsModule.InvokeVoidAsync("adjustPosition", _optionsWrapperRef);
                _shouldAdjustPosition = false;
            }
            await base.OnAfterRenderAsync(firstRender);
        }
    }
}

修改test.js #

直接接收元素引用：

export function adjustPosition(element) {
    console.log(element);
    console.log($(element).length); // 现在能正确获取到元素
}

方案优势 #

• 完全利用Blazor的生命周期机制，确保DOM渲染完成后再执行JS，没有定时器的延迟和不确定性。
• 通过状态标记精准控制JS执行时机，避免不必要的重复调用。
• 进阶方案使用ElementReference，比ID定位更高效、更可靠。

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