Cách chụp sự kiện bấm 'Cập nhật' trong ASP.NET GridView với jQuery

Question

Tôi cần nắm bắt sự kiện bấm 'Cập nhật' với jQuery trong GridView asp.net và không biết cách bắt đầu từ đâu. Tôi vẫn còn khá mới với jQuery. GridView của tôi được gắn vào một SQLDataSource và, tự nhiên, có tất cả các chuông và còi mà sự kết hợp đó chi phối. Mọi sự trợ giúp sẽ rất được trân trọng.

Answer 1

Chỉ cần thêm khối tập lệnh vào bất kỳ nơi nào sau khi GridView được khai báo và nó sẽ hoạt động với cột GridView không được tạo mẫu mặc định. Không có mã trong codebehind vì nó hoàn toàn là một giải pháp Javascript.

Sử dụng này nếu bạn đang sử dụng một liên kết kiểu GridView cột:

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

Sử dụng này nếu bạn đang sử dụng một cột GridView Nút-type và bạn không muốn Javascript của bạn để ngăn chặn các postback:

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

sử dụng này nếu bạn đang sử dụng một cột GridView nút-type và bạn muốn có quyền kiểm soát xem có nên tiếp tục với postback hay không:

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

---

Cập nhật: Tôi nghĩ rằng đây sẽ là một giải pháp tốt hơn để thay thế của (3) khối kịch bản cuối cùng tôi đã trình bày ở trên, vì bạn sẽ không cần phải cập nhật chức năng __doPostBack gọi bằng tay dựa trên tên lệnh và như vậy, nó sẽ ít bị lỗi hơn:

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

Tín dụng cho Aristos cho ý tưởng này. :)

Answer 2

Bạn cần đính kèm trình xử lý sự kiện phía máy khách vào sự kiện nhấp chuột của nút Cập nhật [liên kết]. Tôi không nghĩ rằng nó có thể được thực hiện bằng cách sử dụng AutoGenerateEditButton = "true" nếu bạn đang làm theo cách đó. Bạn sẽ cần phải sử dụng một TemplateField để bạn có thể thao tác nút. Sau đó, bạn có thể sử dụng jQuery để liên kết với sự kiện nhấp chuột của nút.

Answer 3

Thêm cột cập nhật vào mẫu cột. Chuyển đổi nó thành cột tùy chỉnh và sửa đổi nó theo cách bạn có thể móc vào nó bằng jquery, ví dụ như thêm một lớp css vào nó.

Answer 4

Ok đây là giải pháp của tôi để chỉ chụp một bản cập nhật (hoặc nhiều hơn) từ một nút.

Đây là mã javascript mà tôi chạy vào cập nhật nhấp chuột

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

và đây là mã trang

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

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

Đây là mã Thats chạy phía sau và thiết lập các 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 không là gì ngoài một bảng có nhiều "tr" và "td". Nếu bạn hiểu khái niệm đó thì bạn sẽ dễ dàng xử lý mọi thứ ở phía khách hàng. Nếu bạn đã bật tự động mọi thứ thì đó sẽ là một liên kết dẫn đến Chỉnh sửa, Xóa, Cập nhật hoặc Hủy (Kiểm tra Xem Nguồn).Mã đưa ra dưới đây nên nắm bắt sự kiện cập nhật nhấp chuột:

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