ASP.NET中如何在外部JS文件获取触发调用的用户控件Client ID

我明白你遇到的困扰：多个用户控件在父页面下渲染，共用同一个外部JS文件，但JS里用服务器标签<%= Me.grdDataTable.ClientID%>总是返回null，因为这个标签会在父页面渲染时被解析成固定值，而每个用户控件的Grid都有自己唯一的ClientID。而且部分Infragistics事件的参数无法修改，那我们可以从以下几个方向解决：

1. 优先利用Infragistics事件自带的控件实例参数 #

先看你的WebDataGridControl_RowSelection_Changed函数，Infragistics已经把触发事件的Grid实例作为第一个参数webDataGrid传进来了！你完全不需要再用$find去查找，直接用这个参数就行，这是最直接的解决方案：

function WebDataGridControl_RowSelection_Changed(webDataGrid, evntArgs) {
    // 直接使用传入的webDataGrid实例，不用再$find
    var gridBehaviors = webDataGrid.get_behaviors();
    var selectedRows = gridBehaviors.get_selection().get_selectedRows();
    
    // 先判断是否有选中行，避免报错
    if (selectedRows.get_count() > 0) {
        var row = selectedRows.getItem(0);
        // 这里的隐藏域也可以通过Grid的ID关联找到对应的控件
        var hdnEditRowId = webDataGrid.get_id().replace('grdDataTable', 'hdnEditRow');
        document.getElementById(hdnEditRowId).value = row.get_index();
    }
}

这样不管哪个用户控件触发这个事件，webDataGrid都是当前的Grid实例，完美解决ClientID不匹配的问题。

2. 为每个用户控件动态生成绑定ClientID的专属JS函数 #

对于像WebDataGridControl_AddRow这种没有直接传入控件实例的方法，我们可以在用户控件的后台代码中，为每个控件实例动态生成专属的JS函数，把当前Grid的ClientID硬编码到函数里，再绑定到对应的触发事件上。

以C#后台代码为例：

protected void Page_PreRender(object sender, EventArgs e)
{
    // 生成当前用户控件专属的AddRow函数
    string addRowScript = $@"
        function WebDataGridControl_AddRow_{this.ClientID}() {{
            var grid = $find('{grdDataTable.ClientID}');
            if (grid) {{
                grid.get_behaviors()
                    .get_editingCore()
                    .get_behaviors().get_rowAdding()._commitRow();
            }}
        }}";
    
    // 将脚本注册到页面
    ScriptManager.RegisterStartupScript(this, this.GetType(), $"AddRow_{this.ClientID}", addRowScript, true);
    
    // 假设触发按钮是btnAddRow，修改它的客户端点击事件
    btnAddRow.OnClientClick = $"WebDataGridControl_AddRow_{this.ClientID}(); return false;";
}

这样每个用户控件都会生成一个带有自身ClientID后缀的函数，点击按钮时只会调用当前控件对应的函数，自然能找到正确的Grid实例。

3. 利用DOM上下文关联查找（备选方案） #

如果你的用户控件内部元素有统一的容器（比如一个class为uc-container的<div>包裹整个控件），也可以通过触发事件的元素向上查找容器，再在容器内定位Grid和隐藏域：

修改WebDataGridControl_AddRow函数：

function WebDataGridControl_AddRow() {
    // 获取触发点击的按钮（依赖浏览器的event对象，确保调用时事件上下文正确）
    var btn = event.target;
    // 向上查找用户控件的容器
    var ucContainer = $(btn).closest('.uc-container');
    // 在容器内查找标记了自定义属性的Grid控件
    var gridId = ucContainer.find('[data-control-type="webgrid"]').attr('id');
    var grid = $find(gridId);
    
    if (grid) {
        grid.get_behaviors()
            .get_editingCore()
            .get_behaviors().get_rowAdding()._commitRow();
    }
}

然后在用户控件的Grid标签上添加自定义属性：

<ig:WebDataGrid ID="grdDataTable" runat="server" data-control-type="webgrid">
    <!-- 其他配置 -->
</ig:WebDataGrid>

这种方法不需要修改后台代码，但依赖DOM结构的稳定性，适合结构固定的用户控件。

总结一下，优先利用Infragistics事件自带的控件实例参数是最省心的方式；对于没有参数的方法，动态生成专属JS函数是最可靠的方案；DOM关联查找则是灵活的备选。

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