2016-08-22 12 views
0

asp.net webformではjqueryデータシートを使用してサーバーサイドページングを実装しようとしていますが、URLで渡されたバックエンドメソッドを呼び出すことはできません。DataTableを使用してasp.net Webフォームでサーバーサイドページングを実行できません

は、私は、HTML以下でTestServerSidePaging.aspxページを持っている:

<div > 
<table id="example"> 
    <thead> 
     <tr style="text-align:left;"> 
      <th>Name</th> 
      <th>Age</th> 
      <th>DoB</th> 
     </tr> 
    </thead> 

    <tfoot> 
     <tr style="text-align:left;"> 
      <th>Name</th> 
      <th>Age</th> 
      <th>DoB</th> 
     </tr> 
    </tfoot> 
</table> 

スクリプト:

$('#example').DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax":{ 
       "url": "TestServerSidePaging.aspx/Test", 
       "type": "GET", 
       "data": "" 
      } 
     }); 

バックエンドTestServerSidePaging.aspx.cs:

[WebMethod] 
    public string Test() 
    { 
     // returns data 
    } 

メソッドTest()は起動されません。私が紛失しているものはありますか?

+0

あなたは '$(ドキュメント).ready()' –

+0

でスクリプトコードを入れてのコンソールをチェックする必要がブラウザ、エラーがありますか? –

答えて

0

あなたのメソッドにstaticを追加してみてください。例えば私は$.ajaxを使用して[WebMethod]を呼び出し、DataTable()への応答をバインドするあなたのための回避策を作成しましたので、

[WebMethod] 
public static string Test() { 
    return "test"; 
} 
+0

申し訳ありません静的なものを含めるのを忘れていましたが、静的な静的なものも含めています。私はTrigger Test() – jayanta

0

DataTable ajax:パラメータでの作業、それを取得できませんでした。背後

コード:

public partial class TestServerSidePaging : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 

    [WebMethod] 
    public static List<Data> Test() 
    { 
     var d1 = new Data { Name = "Name1", Age = 1, DOB = "27/10/1988" }; 
     var d2 = new Data { Name = "Name2", Age = 2, DOB = "27/10/1988" }; 
     var d3 = new Data { Name = "Name3", Age = 3, DOB = "27/10/1988" }; 
     return new List<Data> { d1, d2, d3 }; 
    } 
} 

public class Data 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
    public string DOB { get; set; } 
} 

.ASPX:

<head runat="server"> 
    <title></title> 
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" /> 
    <script src="//code.jquery.com/jquery-1.12.3.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 

      $.ajax({ 
       type: "POST", 
       url: "TestServerSidePaging.aspx/Test", 
       contentType: "application/json;charset=utf-8", 
       success: function (data) { 
        var example = $('#example').DataTable({ 
         data: data.d, 
         columns: [ 
          { data: "Name" }, 
          { data: "Age" }, 
          { data: "DOB" } 
         ] 
        }); 
       }, 
       error: function (errordata) { 
        console.log(errordata); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <table id="example"> 
      <thead> 
       <tr style="text-align:left;"> 
        <th>Name</th> 
        <th>Age</th> 
        <th>DoB</th> 
       </tr> 
      </thead> 
      <tfoot> 
       <tr style="text-align:left;"> 
        <th>Name</th> 
        <th>Age</th> 
        <th>DoB</th> 
       </tr> 
      </tfoot> 
     </table> 
    </form> 
</body> 
関連する問題