如何从ASP.NET页返回JSON值

时间:2018-12-24 05:20:33

标签: asp.net ajax

我正在使用asp.net ajax JSON创建简单的Crud系统,我创建了函数get all以从all_data.aspx页面中检索JSON类型的值。但我无法检索数据。到目前为止,我在下面添加了

表格设计

 <table id="tbl-category" class="table table-responsive table-bordered" cellspacing="0" width="100%">              
                        <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </table>

ajex函数

function get_all() {
                    $('#tbl-category').dataTable().fnDestroy();
                    $.ajax({
                        url: 'all_data.aspx',
                        type: "GET",
                        dataType: "JSON",
                        success: function (data) {
                            $('#tbl-category').dataTable({
                                "aaData": data,
                                "scrollX": true,
                                "aoColumns": [
                                    { "sTitle": "fname", "mData": "fname" },
                                   { "sTitle": "age", "mData": "age" },

                                    {
                                        "sTitle": "Edit",
                                        "mData": "id",
                                        "render": function (mData, type, row, meta) {
                                            return '<button class="btn btn-xs btn-success" onclick="get_category_details(' + mData + ')">Edit</button>';
                                        }
                                    },
                                    {
                                        "sTitle": "Delete",
                                        "mData": "id",
                                        "render": function (mData, type, row, meta) {
                                            return '<button class="btn btn-xs btn-primary" onclick="RemoveCategory(' + mData + ')">Delete</button>';

                                        }
                                    }

                                ]

                            });

                    },

记录表仅由名字,年龄列组成,在这里如何将该列设置为JSON类型我不知道这样做,请帮我完成此操作,我将其附加到到目前为止我所累的内容下面

** all_data.aspx *

    string sql = "select * from records";
    SqlCommand cmd = new SqlCommand(sql, con);
    con.Open();
    cmd.ExecuteNonQuery();
    DataTable dt = new DataTable();
    SqlDataAdapter da = new SqlDataAdapter();
     da.Fill(dt);

    string sql = "{\"fname\":\"fname\",\"age\":\"age\"}";
    Response.Clear();
    Response.ContentType = "application/json; charset=utf-8";
    Response.Write(json);
    Response.End();

1 个答案:

答案 0 :(得分:1)

安装using Newtonsoft.Json;。如何安装Newtonsoft.Json

创建一个班级:

public class Employee
{
  public string fname {get; set;}
  public int age {get; set;}
}

在方法中:

public string GetEmployees()
{
   string sql = "select * from records";
   SqlCommand cmd = new SqlCommand(sql, con);
   con.Open();
   cmd.ExecuteNonQuery();
   DataTable dt = new DataTable();
   SqlDataAdapter da = new SqlDataAdapter();
   da.Fill(dt);
   List<Employee> employees = new List<Employee>();

   employees = dt.AsEnumerable()
           .Select(x => new Employee()
            {
              fname = x.Field<string>("fname"),
              age = x.Field<int>("age"),
            }).ToList();

   return JsonConvert.SerializeObject(employees);
}

如果您从C#方法中获取了正确的数据,请附加以下数据:

$.ajax({
 type: "GET",
 url: "https://jsonplaceholder.typicode.com/todos/1",
 success: function(res) {
  $.each(res, function(i, data) {
   $("table.table").append("<tr><td>" + res.userId + "</td><td>" + res.title + "</td></tr>");
  })
 },
 error: function(xhr, status, errorThrown) {
  alert("An error occered, " + errorThrown);
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl-category" class="table table-responsive table-bordered" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Id</th>
         <th>Name</th>
      </tr>
</table>