CODEWITHSUNDEEP
asp.netajax
Programmer Hari
Programmer Hari

Reputation: 179

How to Return JSON values from an ASP.NET page

i am creating the simple crud system using asp.net ajax JSON, i created the function get all to retrieve the values from the all_data.aspx page as type as JSON. but I couldn't retrieve the data.what i tried so far i added below

Table Design

 <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 

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>';

                                        }
                                    }

                                ]

                            });

                    },

record table consists of first name, age columns only here how to set this column as JSON type I don't know do it please some help me to do this i attached below what I tired so far

**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();

Upvotes: 1

Views: 368

Answers (1)

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

Install using Newtonsoft.Json;. How to install Newtonsoft.Json

Create one class:

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

In method:

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);
}

If you are getting proper data from C# method then append data like:

$.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>

Upvotes: 1

Related Questions