Question

我需要在asp.net GridView中使用jQuery捕获'Update'click事件，并且无法知道从哪里开始。我还是jQuery的新手。我的GridView附加到SQLDataSource，当然，它具有组合提供的所有功能。任何帮助将不胜感激。

Answer 1

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

如果您使用的是Link-type 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

您需要将客户端事件侦听器附加到Update [link]按钮的click事件。如果您这样做，我不认为可以使用AutoGenerateEditButton =“true”来完成。您需要使用TemplateField才能操作按钮。然后你可以使用jQuery绑定到按钮的click事件。

Answer 4

将更新列添加到列模板中。将它转换为自定义列，并以这样的方式修改它，你可以用jquery挂钩它，就像添加一个css类一样。

Answer 5

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

    $("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

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

5 个答案: