ASP.NET中通过JavaScript触发GridView动态按钮的OnClick事件

核心思路 #

去掉冗余的隐藏按钮，直接通过LinkButton触发后端逻辑完成数据查询，写入隐藏TextBox后，由后端注册前端脚本执行复制操作，确保先完成后端数据获取，再执行前端剪贴板操作，同时解决行索引不匹配的问题。

1. 修改GridView中的LinkButton #

移除原有的OnClientClick，绑定后端点击事件，通过CommandArgument直接传递行索引（比通过控件层级查找更可靠）：

<asp:LinkButton ID="lbtnCopy" runat="server" Text="Copy" style="float:right" 
                OnClick="lbtnCopy_Click" CommandArgument='<%# Container.DataItemIndex %>'>
</asp:LinkButton>

<!-- 保留全局隐藏TextBox用于存储待复制数据 -->
<asp:TextBox ID="txtText" runat="server" Style="display:none"></asp:TextBox>

2. 调整后端点击事件方法 #

在lbtnCopy_Click中完成数据查询、写入TextBox，最后注册前端复制脚本：

protected void lbtnCopy_Click(object sender, EventArgs e)
{
    LinkButton copyBtn = (LinkButton)sender;
    int rowIndex = Convert.ToInt32(copyBtn.CommandArgument);
    string dataId = gvSubDetails.DataKeys[rowIndex].Value.ToString();

    // 执行存储过程获取数据（替换为你的实际逻辑）
    using (SqlConnection sqlCon = new SqlConnection("你的数据库连接字符串"))
    {
        using (SqlCommand cmd = new SqlCommand("你的存储过程名称", sqlCon))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Id", dataId); // 匹配存储过程参数

            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);

            if (dt.Rows.Count > 0)
            {
                txtText.Text = dt.Rows[0].Field<string>(0);
            }
            else
            {
                txtText.Text = string.Empty;
            }
        }
    }

    // 注册前端复制脚本，回发后自动执行
    string copyScript = $@"
        function doCopy() {{
            var targetTxt = document.getElementById('{txtText.ClientID}');
            targetTxt.style.display = 'block'; // 临时显示才能选中
            targetTxt.select();
            document.execCommand('copy');
            targetTxt.style.display = 'none';
            alert('复制成功');
        }}
        doCopy();";
    ClientScript.RegisterStartupScript(this.GetType(), "CopyOperation", copyScript, true);
}

3. 方案优势 #

• 移除冗余的隐藏按钮，直接通过LinkButton关联行索引，彻底解决行对应错误的问题。
• 后端通过CommandArgument直接获取行索引，避免控件嵌套结构变化导致的查找失败。
• 利用ClientScript.RegisterStartupScript确保后端数据写入完成后，再触发前端复制操作，逻辑顺序正确。
• 临时显示TextBox是因为隐藏状态的控件无法被选中，复制完成后立即恢复隐藏，不影响页面布局。

无回发替代方案（使用UpdatePanel） #

如果不想页面整体回发，可通过UpdatePanel实现局部刷新：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvSubDetails" runat="server" DataKeyNames="Id">
            <Columns>
                <!-- 其他列 -->
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lbtnCopy" runat="server" Text="Copy" 
                                        OnClick="lbtnCopy_Click" CommandArgument='<%# Container.DataItemIndex %>'>
                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:TextBox ID="txtText" runat="server" Style="display:none"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
    // 监听UpdatePanel刷新完成事件，触发复制
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
        copyToClipboard();
    });

    function copyToClipboard() {
        var $txt = $('#<%= txtText.ClientID %>');
        if (!$txt.val().trim()) return;
        
        $txt.show();
        $txt.select();
        try {
            document.execCommand('copy');
            alert('复制成功');
        } catch (e) {
            alert('复制失败');
        }
        $txt.hide();
    }
</script>

后端方法与之前一致，页面仅局部刷新，体验更流畅。

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