ASP.NET DataPager Next/Previous按鈕客戶端onlick事件

Question

如何將客戶端（javascript）onclick事件添加到DataPager中的Next/Previous鏈接？

Answer 1

您可以在數據尋呼機中添加一個新按鈕，並處理它的單擊事件。

<asp:ListView runat="server" ID="ListView1" 
    DataSourceID="SqlDataSource1"> 
    <LayoutTemplate> 
     <table runat="server" id=" table1"> 
      <tr runat="server" id="itemPlaceholder"> 
      </tr> 
     </table> 
     <!-- This is the pager. Define all necessary markup here. --> 
     <asp:DataPager runat="server" ID="DataPager" PageSize="5"> 
      <Fields> 
       <asp:TemplatePagerField>    
        <PagerTemplate> 
         <asp:Button ID="btn_Submit" runat="server" Text="Button" onclientclick="eventHandler(this)" /> 
        </PagerTemplate> 
       </asp:TemplatePagerField> 
      </Fields> 
     </asp:DataPager> 
    </LayoutTemplate> 
</asp:ListView> 

Answer 2

上面的答案（通過Sheery）適用於自定義尋呼機元素。但是，使用ListView或DataGrid的庫存Numeric或Next/Previous pager樣式時，您沒有太多的控制權。通過使用客戶端jQuery/JavaScript選擇器，您可以不顯眼地將客戶端處理程序附加到尋呼機元素。對於這個例子，我正在跟蹤是否有任何表單字段值發生了變化，如果是這樣，那麼在允許尋呼機執行回發到服務器的默認行爲之前，我們向用戶確認他們有未保存的更改。

$(function() { 

     var _formChanged = false; 

     // grabs all pager links in last row of table named dgQuestions 
     // and attachs a click eventhandler via jQuery library 
     $("#dgQuestions tr:last a").click(function(e) {    
      if (!_formChanged) 
       return true; 

      var ok = confirm('You have UNSAVED changes. Continue?'); 
      if (ok) {    
       return true; 
      } 
      else { 
       //Prevent the submit event and remain on the screen 
       e.preventDefault(); 
       return false; 
      } 
     }); 

     // delegates change event handling to the form to indicate if ANY 
     // form field value changed for testing prior to paging 
     $("#form1").change(function(e) { 
      _formChanged = true; 
     }); 


    }); 
}); 

OR

還可以利用窗口beforeunload事件捕捉任何導航外賣行動，以測試未保存的更改也是如此。此代碼不包括「保存」按鈕的實際點擊。

$(window).on('beforeunload', function (e) { 
    if (e.originalEvent.explicitOriginalTarget.id != "btnSave") { 
     if (_formChanged) 
      return 'You have UNSAVED changes. Continue?'; 
}