如何使用jQuery捕獲ASP.NET GridView中的“更新”單擊事件

Question

我需要在asp.net GridView中使用jQuery捕獲'Update'單擊事件，並且無法知道從哪里開始。 我還是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>

---

更新：我認為這將是替換上面提到的最后一個（第3個）腳本塊的更好的解決方案，因為您不需要根據命令名稱手動更新__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綁定到按鈕的單擊事件。

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