如何在Razor组件的C#代码中获取JS传入的标记ID值

核心思路 #

无需通过label中转DOM值，直接利用Blazor的JavaScript互操作（JS Interop）将标记ID传递给C#方法，或绑定到组件字段，是更高效的实现方式。以下是几种可行方案：

方案1：直接通过JS互调传递ID（推荐） #

跳过DOM元素中转，在JS打开模态框时直接调用C#方法传入标记ID，同时触发数据库查询。

1. 在Razor组件的C#代码中定义可被JS调用的方法

@inject IJSRuntime JSRuntime
@inject YourDbContext DbContext

<!-- 模态框代码 -->
<div class="modal fade" id="Vertice" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">标记详情</h5>
            </div>
            <div class="modal-body">
                @if (_currentDetails != null)
                {
                    <p>ID：@_currentDetails.Id</p>
                    <p>名称：@_currentDetails.Name</p>
                    <!-- 其他详情字段 -->
                }
            </div>
        </div>
    </div>
</div>

@code {
    private YourDetailModel? _currentDetails;
    private int _currentMarkerId;

    // 标记为可被JS调用的方法
    [JSInvokable]
    public async Task LoadMarkerDetails(int markerId)
    {
        _currentMarkerId = markerId;
        // 从数据库加载详情
        _currentDetails = await DbContext.YourDetailsTable
            .FirstOrDefaultAsync(d => d.Id == markerId);
        // 刷新组件UI
        StateHasChanged();
    }

    // 组件销毁时移除事件监听
    public void Dispose()
    {
        var modal = document.getElementById('Vertice');
        modal.removeEventListener('show.bs.modal', null);
        modal.removeEventListener('shown.bs.modal', null);
    }
}

2. 修改JS函数，调用C#方法并打开模态框

function markerOnClick(e) {
    const markerId = e.target.ID;
    const exampleModal = document.getElementById('Vertice');

    // 调用Blazor的C#方法传ID并加载详情
    DotNet.invokeMethodAsync('YourProjectAssemblyName', 'LoadMarkerDetails', parseInt(markerId))
        .then(() => {
            // 详情加载完成后打开模态框
            const modal = new bootstrap.Modal(exampleModal);
            modal.show();
        });
}

注意：YourProjectAssemblyName是你的项目程序集名称，可在项目属性→应用程序中查看，或用typeof(YourComponentName).Assembly.GetName().Name动态获取。

方案2：通过绑定隐藏输入框获取DOM值 #

如果想保留现有JS修改label的逻辑，可添加隐藏输入框绑定到C#字段，让Blazor自动同步值：

1. 在Razor组件中添加绑定的隐藏输入框

<div class="modal-body">
    <label id="Lbl_Id_vertice">@_currentMarkerId</label>
    <!-- 隐藏输入框，绑定到C#字段 -->
    <input type="hidden" @bind="_currentMarkerId" id="Hidden_MarkerId" />
    
    @if (_currentDetails != null)
    {
        <!-- 显示详情 -->
    }
</div>

@code {
    private int _currentMarkerId;
    private YourDetailModel? _currentDetails;

    // 模态框显示后加载详情
    [JSInvokable]
    public async Task OnModalShown()
    {
        if (_currentMarkerId > 0)
        {
            _currentDetails = await DbContext.YourDetailsTable
                .FirstOrDefaultAsync(d => d.Id == _currentMarkerId);
            StateHasChanged();
        }
    }
}

2. 修改JS函数，同步更新隐藏输入框并触发绑定

function markerOnClick(e) {
    const markerId = e.target.ID;
    const exampleModal = document.getElementById('Vertice');

    exampleModal.addEventListener('show.bs.modal', function (event) {
        // 更新label文本
        exampleModal.querySelector('#Lbl_Id_vertice').textContent = markerId;
        // 更新隐藏输入框值，并触发input事件让Blazor同步
        const hiddenInput = exampleModal.querySelector('#Hidden_MarkerId');
        hiddenInput.value = markerId;
        hiddenInput.dispatchEvent(new Event('input'));
    });

    // 监听模态框显示完成事件，触发C#加载逻辑
    exampleModal.addEventListener('shown.bs.modal', function () {
        DotNet.invokeMethodAsync('YourProjectAssemblyName', 'OnModalShown');
    });
}

方案3：通过模态框事件传递label中的值 #

直接从label中读取文本，再通过JS互调传给C#：

function markerOnClick(e) {
    const exampleModal = document.getElementById('Vertice');

    exampleModal.addEventListener('show.bs.modal', function (event) {
        exampleModal.querySelector('#Lbl_Id_vertice').textContent = e.target.ID;
    });

    // 模态框显示完成后，读取label值传给C#
    exampleModal.addEventListener('shown.bs.modal', function () {
        const markerId = parseInt(exampleModal.querySelector('#Lbl_Id_vertice').textContent);
        DotNet.invokeMethodAsync('YourProjectAssemblyName', 'LoadMarkerDetails', markerId);
    });
}

C#代码同方案1中的LoadMarkerDetails方法。

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