ASP.NET Web Form中GridView更新后自动调用客户端JS方法

在ASP.NET Web Form中，GridView2通过SQL查询完成数据更新后，需要自动调用指定的客户端JavaScript函数。目前GridView可正常从数据库更新数据，也能通过按钮手动触发该JS函数，但需实现更新完成后自动执行。该JS函数用于向three.js场景添加对象，所需数据来自GridView的文件路径、唯一对象名字段。已知可以给其他控件添加事件监听器，但不清楚如何为GridView对象添加事件监听器，求实现方法。

附相关代码：

function yourJavaScriptFunction(rowIndex) {
    var x = rowIndex;
    var file_path = getCellValue(x, 7); // 获取指定行第8列的值
    if (file_path) {
        console.log("Cell value: " + file_path);
    } else {
        console.log("Row or cell not found, get filepath."+ ' '+file_path);
        alert("Row or cell not found,get filepath.");
    }

    var object_name = getCellValue(rowIndex, 1);
    if (object_name) {
        console.log("Cell value: " + object_name);
    } else {
        console.log("Row or cell not found, get object name.");
        alert("Row or cell not found, get object name.");
    }

    module.add_Object(file_path, object_name);
    return false; // 按需阻止回发
}

<asp:GridView ID="GridView2" runat="server" Height="100%" Width="100%" HorizontalAlign="Center" AutoGenerateColumns="False" DataSourceID="SqlDataSource3" >
    <Columns>
        <asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
        <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
        <asp:BoundField DataField="SUBTYPE1" HeaderText="SUBTYPE1" SortExpression="SUBTYPE1" />
        <asp:BoundField DataField="IMAGE_FILE_PATH" HeaderText="IMAGE_FILE_PATH" SortExpression="IMAGE_FILE_PATH" />
        <asp:BoundField DataField="TYPE" HeaderText="TYPE" SortExpression="TYPE" />
        <asp:BoundField DataField="COUNT" HeaderText="COUNT" SortExpression="COUNT" />
        <asp:BoundField DataField="LOCATION" HeaderText="LOCATION" SortExpression="LOCATION" />
        <asp:BoundField DataField="TRADE_SIZE" HeaderText="TRADE_SIZE" SortExpression="TRADE_SIZE" />
    </Columns>
    <EditRowStyle HorizontalAlign="Left" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>

方法1：利用GridView的DataBound服务器端事件 #

GridView完成数据绑定（即更新后）会触发DataBound事件，在该事件中可以注册客户端脚本，让页面（或异步回发）完成后自动执行目标JS函数。

1. 修改GridView的服务器端标记，添加OnDataBound事件绑定：

<asp:GridView ID="GridView2" runat="server" OnDataBound="GridView2_DataBound" 
    Height="100%" Width="100%" HorizontalAlign="Center" 
    AutoGenerateColumns="False" DataSourceID="SqlDataSource3" >
    <!-- 原有列配置不变 -->
</asp:GridView>

2. 在后台代码（.aspx.cs）中实现GridView2_DataBound方法：

protected void GridView2_DataBound(object sender, EventArgs e)
{
    // 判断是否为UpdatePanel异步回发场景
    if (ScriptManager.GetCurrent(this).IsInAsyncPostBack)
    {
        // 注册异步回发完成后执行的脚本
        ScriptManager.RegisterStartupScript(this, this.GetType(), "AutoRunGridJS", "executeAfterGridViewUpdate();", true);
    }
    else
    {
        // 同步回发场景下注册脚本
        ClientScript.RegisterStartupScript(this.GetType(), "AutoRunGridJS", "executeAfterGridViewUpdate();", true);
    }
}

3. 新增客户端函数遍历GridView行并调用原有逻辑，同时完善getCellValue函数：

// 新增：GridView更新完成后自动执行的入口函数
function executeAfterGridViewUpdate() {
    var grid = document.getElementById('<%= GridView2.ClientID %>');
    if (!grid) return;

    // 遍历所有数据行（跳过表头，从索引1开始）
    var rows = grid.getElementsByTagName('tr');
    for (var i = 1; i < rows.length; i++) {
        yourJavaScriptFunction(i);
    }
}

// 原有函数保持不变
function yourJavaScriptFunction(rowIndex) {
    var x = rowIndex;
    var file_path = getCellValue(x, 7);
    if (file_path) {
        console.log("Cell value: " + file_path);
    } else {
        console.log("Row or cell not found, get filepath."+ ' '+file_path);
        alert("Row or cell not found,get filepath.");
    }

    var object_name = getCellValue(rowIndex, 1);
    if (object_name) {
        console.log("Cell value: " + object_name);
    } else {
        console.log("Row or cell not found, get object name.");
        alert("Row or cell not found, get object name.");
    }

    module.add_Object(file_path, object_name);
    return false;
}

// 完善单元格值获取函数
function getCellValue(rowIndex, cellIndex) {
    var grid = document.getElementById('<%= GridView2.ClientID %>');
    if (!grid || rowIndex >= grid.rows.length) return null;
    var row = grid.rows[rowIndex];
    if (!row || cellIndex >= row.cells.length) return null;
    return row.cells[cellIndex].textContent.trim();
}

方法2：监听UpdatePanel的异步回发结束事件（仅适用于异步场景） #

如果GridView在UpdatePanel内部，可以直接在客户端监听UpdatePanel的EndRequest事件，触发目标函数：

// 监听UpdatePanel异步回发结束事件
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {
    // 判断是否为目标UpdatePanel触发的回发（替换为你的UpdatePanel ID）
    var targetPanelId = '<%= UpdatePanel1.ClientID %>';
    if (sender._postBackSettings.panelsToUpdate.includes(targetPanelId)) {
        executeAfterGridViewUpdate();
    }
});

// 上述executeAfterGridViewUpdate及相关函数保持不变

注意事项 #

• 确保页面已包含ScriptManager控件（使用UpdatePanel时默认已添加）。
• 若只需处理新增行而非所有行，可在后台更新数据时记录新增行索引，通过脚本传递到客户端，避免重复处理旧数据。
• getCellValue中的列索引为从0开始的计数，需与GridView的列顺序严格对应。

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