Как вернуть значения JSON со страницы ASP.NET

Question

Я создаю простую систему crud с использованием asp.net ajax JSON, я создал функцию 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();

Answer 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>