ASP.NET Framework 4.8下客户端JS如何监听服务端对RadGrid的DOM修改

以下是三种原生支持、无需额外依赖的落地方式：

方案1：服务端主动注册客户端脚本（最直接） #

这是ASP.NET Framework内置的能力，服务端完成RadGrid增删逻辑后，直接注册需要执行的JS函数即可，兼容普通全页回发和AJAX局部回发场景：

服务端代码（放在你增删RadGrid逻辑的最后）：

// 首先判断当前是否为AJAX回发场景（使用UpdatePanel或RadAjaxManager时生效）
var currentScriptManager = ScriptManager.GetCurrent(this.Page);
if (currentScriptManager != null && currentScriptManager.IsInAsyncPostBack)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "grid_op_done", "yourCustomJsFunction();", true);
}
else
{
    // 普通全页回发场景
    Page.ClientScript.RegisterStartupScript(this.GetType(), "grid_op_done", "yourCustomJsFunction();", true);
}

你只需要把yourCustomJsFunction替换为你自己的客户端处理函数名即可。

方案2：监听RadGrid原生客户端事件（无需修改服务端代码） #

Telerik RadGrid本身提供了完整的客户端生命周期事件，服务端操作后RadGrid重新渲染时会自动触发对应的事件，你只需要在RadGrid控件的配置中绑定监听函数即可：

.ascx中RadGrid配置新增客户端事件绑定：

<telerik:RadGrid ID="你的RadGridID" runat="server" .../* 原有其他配置 */>
    <ClientSettings>
        <!-- 行新增时触发 -->
        <ClientEvents OnRowCreated="handleGridRowAdd" />
        <!-- 行删除时触发 -->
        <ClientEvents OnRowDeleted="handleGridRowDelete" />
        <!-- 整个Grid数据绑定/刷新完成时触发 -->
        <ClientEvents OnGridCreated="handleGridUpdateComplete" />
    </ClientSettings>
    <!-- 原有其他配置，如MasterTableView等 -->
</telerik:RadGrid>

客户端JS中实现对应函数即可：

function handleGridRowAdd(sender, args) {
    // 新增行后的处理逻辑，args.get_gridDataItem()可以拿到新增的行对象
}
function handleGridRowDelete(sender, args) {
    // 删除行后的处理逻辑
}
function handleGridUpdateComplete(sender, args) {
    // 整个Grid刷新完成后的处理逻辑，不管增删都会触发
}

方案3：监听AJAX请求结束事件（适合全页使用RadAjax的场景） #

如果你使用了RadAjaxManager做页面局部刷新管理，可以直接监听全局的AJAX回发结束事件，判断触发源是增删按钮后执行对应逻辑：

首先在RadAjaxManager配置中绑定客户端事件：

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <ClientEvents OnResponseEnd="handleAjaxResponseEnd" />
</telerik:RadAjaxManager>

客户端JS实现处理函数：

function handleAjaxResponseEnd(sender, args) {
    // 获取触发本次回发的控件ID，判断是否为你的增/删按钮
    const triggerId = args.get_eventTarget();
    if (triggerId.includes("你的添加按钮ID") || triggerId.includes("你的删除按钮ID")) {
        // 执行你需要的逻辑
        yourCustomJsFunction();
    }
}

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