我得到一個錯誤，以綁定數據與jQuery數據表

我想綁定數據庫數據與jQuery數據在asp.net中，爲此我寫了代碼。但是我在這裏獲取JSON格式的數據到aspx頁面。我得到一個錯誤，以綁定數據與jQuery數據表

爲什麼我無法將數據綁定到jQuery數據表？

CS Code: 
using System; 
using System.Data; 
using System.Data.SqlClient; 
using System.Configuration; 
using System.Collections.Generic; 
using System.Web.Services; 
using System.Web.Script.Serialization; 

public partial class Example_JqueryDataTable : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
     { 
      if(!IsPostBack) 
      { 
       GetState(); 
      } 
     } 

     //Getting all state 
     [WebMethod] 
     public void GetState() 
     { 
      string cs = 
      ConfigurationManager.ConnectionStrings["conString2"].ConnectionString; 
      List<State> stateList = new List<State>(); 
      using(SqlConnection con=new SqlConnection(cs)) 
      { 
       SqlCommand cmd = new SqlCommand("SELECT StateId,StateName,IsUnionTerritory FROM State_Master ORDER BY StateName ASC", con); 
       //cmd.CommandType = CommandType.StoredProcedure; 
       con.Open(); 
       SqlDataReader dr = cmd.ExecuteReader(); 
       while (dr.Read()) 
       { 
        State objState = new State(); 
        objState.StateId = Convert.ToInt32(dr["StateId"]); 
        objState.StateName = dr["StateName"].ToString(); 
        objState.IsUnionTerritory = Convert.ToBoolean(dr["IsUnionTerritory"]); 
        stateList.Add(objState); 
       } 
      } 
      JavaScriptSerializer js = new JavaScriptSerializer(); 
      Context.Response.Write(js.Serialize(stateList)); 
     } 
    // Properties 
     public class State 
     { 
      public int StateId { get; set; } 
      public string StateName { get; set; } 
      public bool IsUnionTerritory { get; set; } 
     } 
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryDataTable.aspx.cs" 
 
    Inherits="Example_JqueryDataTable" %> 
 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 
 
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $.ajax({ 
 
       url: 'JqueryDataTable.aspx/GetState', 
 
       method: 'post', 
 
       dataType: 'json', 
 
       success: function (data) { 
 
        $('#tblState').DataTable({ 
 
         data: data, 
 
         sort: true, 
 
         searching: true, 
 
         columns: [ 
 
        { 'data': 'StateId' }, 
 
        { 'data': 'StateName' }, 
 
        { 'data': 'IsUnionTerritory' } 
 
        ] 
 
        }); 
 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div class="container"> 
 
     <div class="row col-lg-6"> 
 
      <div style="border: 1px solid black; padding: 3px; width: 1200px"> 
 
       <table id="tblState" class="table table-bordered"> 
 
        <thead> 
 
         <tr> 
 
          <th> 
 
           State Id 
 
          </th> 
 
          <th> 
 
           State Name 
 
          </th> 
 
          <th> 
 
           Status 
 
          </th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
          <th> 
 
           State Id 
 
          </th> 
 
          <th> 
 
           State Name 
 
          </th> 
 
          <th> 
 
           Status 
 
          </th> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

我重視我的問題的圖像。

Image Link

來源

2017-04-20 Siddhartha Goswami

希望你能快樂。首先嚐試自己，然後張貼在這裏... http://stackoverflow.com/users/328193/david –

Jquery : 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $.ajax({ 
       url: 'JqueryDataTable.aspx/GetState', 
       contentType: 'application/json; charset=utf-8', 
       method: 'POST', 
       dataType: 'JSON', 
       success: function (data) { 
        $('#tblState').DataTable({ 
         data: jQuery.parseJSON(data.d), 
         sort: true, 
         searching: true, 
         columns: [ 
        { 'data': 'StateId' }, 
        { 'data': 'StateName' }, 
        { 'data': 'IsUnionTerritory' } 
        ] 
        }); 
       } 
      }); 
     }); 
    </script> 
CS: 

[WebMethod] 
    public static string GetState() 
    { 
     string cs = ConfigurationManager.ConnectionStrings["conString2"].ConnectionString; 
     List<State> stateList = new List<State>(); 
     using(SqlConnection con=new SqlConnection(cs)) 
     { 
      SqlCommand cmd = new SqlCommand("SELECT StateId,StateName,IsUnionTerritory FROM State_Master ORDER BY StateName ASC", con); 
      cmd.CommandType = CommandType.Text; 
      con.Open(); 
      SqlDataReader dr = cmd.ExecuteReader(); 
      while (dr.Read()) 
      { 
       State objState = new State(); 
       objState.StateId = Convert.ToInt32(dr["StateId"]); 
       objState.StateName = dr["StateName"].ToString(); 
       objState.IsUnionTerritory = Convert.ToBoolean(dr["IsUnionTerritory"]); 
       stateList.Add(objState); 
      } 
     } 
     JavaScriptSerializer js = new JavaScriptSerializer(); 
     return js.Serialize(stateList); 
    } 

    public class State 
    { 
     public int StateId { get; set; } 
     public string StateName { get; set; } 
     public bool IsUnionTerritory { get; set; } 
    }

來源

2017-07-12 22:06:24

試試這個：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      url: 'JqueryDataTable.aspx/GetState', 
      method: 'post', 
      dataType: 'json', 
      success: function (response) { 
       var data = JSON.parse(response); 
       $('#tblState').DataTable({ 
        data: data, 
        sort: true, 
        searching: true, 
        columns: [ 
       { 'data': 'StateId' }, 
       { 'data': 'StateName' }, 
       { 'data': 'IsUnionTerritory' } 
       ] 
       }); 
      } 
     }); 
    }); 
</script>

來源

2017-04-20 11:10:19 kritikaTalwar

Maám，不工作:( –

檢查控制檯的錯誤 – kritikaTalwar

能不能請你如下執行AJAX POST方法：

$(document).ready(function() {  
    BindStateListTable(); 
}); 

function BindStateListTable() { 
    $("#tblState").DataTable({ 
     "processing": false,  
     "serverSide": true, 
     "ajax": { 
      url: "JqueryDataTable.aspx/GetState", 
      type: "post" 
     }, 
     "columns": [ 
      { 'data': 'StateId' }, 
      { 'data': 'StateName' }, 
      { 'data': 'IsUnionTerritory' } 
     ] 
    }); 
}

來源

2017-04-20 11:15:03

沒有爲我工作。 –

的GetState方法需要返回數據的字符串。您可以按如下方式返回stateList對象。

[WebMethod] 
    public string GetState() // string instead of void 
    { 
     string cs = 
     ConfigurationManager.ConnectionStrings["conString2"].ConnectionString; 
     List<State> stateList = new List<State>(); 
     using(SqlConnection con=new SqlConnection(cs)) 
     { 
      SqlCommand cmd = new SqlCommand("SELECT StateId,StateName,IsUnionTerritory FROM State_Master ORDER BY StateName ASC", con); 
      //cmd.CommandType = CommandType.StoredProcedure; 
      con.Open(); 
      SqlDataReader dr = cmd.ExecuteReader(); 
      while (dr.Read()) 
      { 
       State objState = new State(); 
       objState.StateId = Convert.ToInt32(dr["StateId"]); 
       objState.StateName = dr["StateName"].ToString(); 
       objState.IsUnionTerritory = Convert.ToBoolean(dr["IsUnionTerritory"]); 
       stateList.Add(objState); 
      } 
     } 
     JavaScriptSerializer js = new JavaScriptSerializer(); 
     return js.Serialize(stateList); // return your list 
    }

來源

2017-04-20 11:20:23 NEER

我得到一個錯誤，以綁定數據與jQuery數據表

回答

相關問題