如何使用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> 

使用此，如果您使用的是按鈕式的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> 

使用此，如果您使用的是按鈕式的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

您需要將客戶端事件偵聽器附加到Update [link]按鈕的click事件。如果你這樣做，我認爲不能使用AutoGenerateEditButton =「true」來完成。您需要使用TemplateField，以便操作按鈕。然後你可以使用jQuery綁定到按鈕的點擊事件。

Answer 3

將更新列添加到列模板。將它轉換爲一個自定義列，然後修改它，讓它可以用jquery綁定到它，即向它添加一個css類。

Answer 4

好的，這裏是我的解決方案，從按鈕只捕獲一個更新（或更多）。

這是我在更新點擊運行

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

這裏的JavaScript代碼的頁面代碼

`<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 5

Gridview只不過是一堆「tr」和「td」表。如果你理解了這個概念，那麼你很容易在客戶端處理任何事情。如果您啓用了自動設置，那麼它將成爲編輯，刪除，更新或取消（檢查視圖源）的鏈接。下面給出的代碼應該捕獲更新click事件：

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