Jquery使用数据库中的数据填充数据表

时间:2017-02-08 07:07:15

标签: c# jquery asp.net ajax

我试图使用ODBC从访问数据库填充数据表。我需要使用ajax从我的asp.net web表单中调用一个函数作为json字符串,但我在序列化对象错误时检测到了循环引用。

以下是我的HTML和网络表单代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employee.aspx.cs" Inherits="Login.Employee" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
        <script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: 'Employee.aspx/GetEmployee',
                    type: 'GET',
                    contentType: 'application/json; charset=utf-8',
                    datatype: 'json',
                    success: function (data) {
                        $('#datatable').dataTable({
                            data: data,
                            columns: [
                                { 'data': 'ID' },
                                { 'data': 'picture' },
                                { 'data': 'last_name' },
                                { 'data': 'first_name' },
                                { 'data': 'job_tile' },
                                { 'data': 'start_date' },
                                { 'data': 'end_date' }
                            ]
                        });
                    }
                });
            });
        </script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <table id="datatable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Picture</th>
                        <th>Last Name</th>
                        <th>First Name</th>
                        <th>Job Position</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                    </tr>
                </thead>
            </table>
            <div>
            </div>
        </form>
    </body>
</html>

网络表单:

public static string MyConnection = "DSN=myAccess2";
public OdbcConnection MyConn = new OdbcConnection(MyConnection);
OdbcCommand myCommand;
OdbcDataAdapter adapter;

[WebMethod]
public void GetEmployee() 
{
    List<Employees> emp = new List<Employees>();
    var query = "SELECT * FROM employee";
    MyConn = new OdbcConnection(MyConnection);
    myCommand = new OdbcCommand(query, MyConn);
    MyConn.Open();
    OdbcDataReader reader = myCommand.ExecuteReader();
    while (reader.Read()) 
    {
        Employees empl = new Employees();
        empl.Id = Convert.ToInt32(reader["ID"]);
        empl.image = reader["picture"].ToString();
        empl.lastName = reader["last_name"].ToString();
        empl.firstName = reader["first_name"].ToString();
        empl.jobTitle = reader["job_title"].ToString();
        empl.StartDate = Convert.ToDateTime(reader["start_date"]);
        empl.EndDate = Convert.ToDateTime(reader["end_date"]);
        emp.Add(empl);
    }

    MyConn.Close();
    JavaScriptSerializer js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(emp));
}

感谢任何帮助,谢谢!

1 个答案:

答案 0 :(得分:0)

您需要返回List<Employee>,以便获得ajax success中的数据。

同时创建您的WebMtehod static并允许GET通过添加此[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]

来调用您的网络方法
[WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public static List<Employees> GetEmployee() 
{
  List<Employees> emp = new List<Employees>();
  var query = "SELECT * FROM employee";
  MyConn = new OdbcConnection(MyConnection);
  myCommand = new OdbcCommand(query, MyConn);
  MyConn.Open();
  OdbcDataReader reader = myCommand.ExecuteReader();
  while (reader.Read()) 
  {
     Employees empl = new Employees();
     empl.Id = Convert.ToInt32(reader["ID"]);
     empl.image = reader["picture"].ToString();
     empl.lastName = reader["last_name"].ToString();
     empl.firstName = reader["first_name"].ToString();
     empl.jobTitle = reader["job_title"].ToString();
     empl.StartDate = Convert.ToDateTime(reader["start_date"]);
     empl.EndDate = Convert.ToDateTime(reader["end_date"]);
     emp.Add(empl);
   }

   MyConn.Close();
   return emp;
}