如何使用 jQuery 在 ASP.NET GridView 中捕获“更新”单击事件

Question

我需要在 asp.net GridView 中使用 jQuery 捕获“更新”单击事件，并且无法知道从哪里开始。我对 jQuery 还是比较陌生。我的 GridView 连接到 SQLDataSource，自然而然地，具有该组合提供的所有花里胡哨。任何帮助将不胜感激。

Answer 1

只需在声明 GridView 后的任意位置添加脚本块，它就可以与默认的非模板化 GridView 列一起使用。代码隐藏中没有代码，因为它纯粹是一个 Javascript 解决方案。

如果您使用的是链接类型的 GridView 列，请使用此选项：

<script type="text/javascript">
    // a:contains(The text of the link here)
    $('#<%= theGridViewID.ClientID %> a:contains(Update)').click(function () {
        alert('Update click event captured from the link!');
        // return false: stop the postback from happening
        // return true or don't return anything: continue with the postback
    });
</script>

如果您使用的是 Button 类型的 GridView 列并且您不希望您的 Javascript 阻止回发，请使用此选项：

<script type="text/javascript">
    // :button[value=The text of the button here]
    $('#<%= theGridViewID.ClientID %> :button[value=Update]').click(function () {
        alert('Update click event captured from the button!');
    });
</script>

如果您使用的是 Button 类型的 GridView 列并且想要控制是否继续回发，请使用此选项：

<script type="text/javascript">
    // :button[value=The text of the button here]
    var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
    updateButtons
        .attr('onclick', null)
        .click(function () {
            alert('Update click event captured from the button!');
            var doPostBack = true; // decide whether to do postback or not
            if (doPostBack) {
                var index = updateButtons.index($(this));
                // 'Update$' refers to the GridView command name + dollar sign
                __doPostBack('<%= theGridViewID.UniqueID %>', 'Update$' + index);
            }
        });
</script>

---

更新：我认为这将是替代我上面介绍的最后一个（第三个）脚本块的更好解决方案，因为您不需要手动更新 __doPostBack 函数调用命令名称，因此它应该不易出错：

<script type="text/javascript">
    // :button[value=The text of the button here]
    var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
    updateButtons.each(function () {
        var onclick = $(this).attr('onclick');
        $(this).attr('onclick', null).click(function () {
            alert('Update click event captured from the button!');
            var doPostBack = true; // decide whether to do postback or not
            if (doPostBack) {
                onclick();
            }
        });
    });
</script>

感谢 Aristos 的这个想法。 :)

Answer 2

好的，这是我从按钮中仅捕获一个（或多个）更新的解决方案。

这是我在更新点击时运行的 javascript 代码

<script type="text/javascript">         
  function NowRunTheUpdate(){
      alert("ok I capture you");
  } 
</script>

这是页面代码

    `<asp:GridView ID="MyGridView" runat="server" OnRowDataBound="MyGridView_RowDataBound" ... >`

    <asp:ButtonField Text="update" CommandName="Update" ButtonType="Button" />  
  ...

这是后面运行并设置 javascript 的代码。

protected void MyGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // loop all data rows
        foreach (DataControlFieldCell cell in e.Row.Cells)
        {
            // check all cells in one row
            foreach (Control control in cell.Controls)
            {
                // I go to get the button if exist
                Button button = control as Button;
                if (button != null && button.CommandName == "Update")
                    // Add delete confirmation
                    button.OnClientClick = "NowRunTheUpdate();";
            }
        }
    }
}

Answer 3

您需要将客户端事件侦听器附加到更新 [链接] 按钮的单击事件。如果你这样做，我认为它不能使用 AutoGenerateEditButton="true" 来完成。您需要使用 TemplateField 才能操作按钮。然后就可以使用jQuery绑定到按钮的点击事件了。

Answer 4

将更新列添加到列模板。将其转换为自定义列，并以您可以使用 jquery 挂钩的方式对其进行修改，即向其添加 css 类。

Answer 5

Gridview 只不过是一个包含一堆“tr”和“td”的表格。如果您了解该概念，那么您将很容易在客户端处理任何事情。如果您启用了自动一切，那么它将是一个链接，将导致编辑、删除、更新或取消（检查查看源代码）。下面给出的代码应该捕获更新点击事件：

    $("a:contains(Update)").live("click", function() { 
   //alert("hi"); do what needs to be done
    return false;//would not sent the control back to server 
    });

HTH