Question posted in
You can find the official documentation here.

Jquery ajax – Returning all field from Datatable to AJAX

My problem is, it doesn’t display table from c# after I input text and click search button. I have tried many ways, but it can’t work. Below is my code.

Below is my javascript:

url: "/Testing/TraceReport/traceReport.aspx/app",
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',    
success: function (response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var EquipmentList = xml.find("Table1");
    var content = "";
    if (EquipmentList.length > 0) {
        $(EquipmentList).each(function () {
            content += "<tr align='center'>";

            if ($(this).find('Column1').text() == "") { content += "<td><b><font color='red'>UNKNOWN</font></b></td>"; }
            else { content += "<td><b>" + $(this).find('Column1').text() + "</b></td>"; }

            if ($(this).find('Column2').text() == "") { content += "<td><b><font color='red'>UNKNOWN</font></b></td>"; }
            else { content += "<td><b>" + $(this).find('Column2').text() + "</b></td>"; }

            if ($(this).find('Column3').text() == "") { content += "<td><b><font color='red'>UNKNOWN</font></b></td>"; }
            else { content += "<td><b>" + $(this).find('Column3').text() + "</b></td>"; }

            if ($(this).find('Column4').text() == "") { content += "<td><b><font color='red'>UNKNOWN</font></b></td>"; }
            else { content += "<td><b>" + $(this).find('Column4').text() + "</b></td>"; }

            if ($(this).find('Column5').text() == "") { content += "<td><b><font color='red'>UNKNOWN</font></b></td>"; }
            else { content += "<td><b>" + $(this).find('Column5').text() + "</b></td>"; }

            if ($(this).find('Column7').text() == "") { content += "<td><b><font color='red'>UNKNOWN</font></b></td>"; }
            else { content += "<td><b>" + $(this).find('Column7').text() + "</b></td>"; }

            content += "</tr>";
        });
    }

Below is my c#:

DataTable table = new DataTable();
table = ConvertListToDataTable(list);
DataSet ds = new DataSet();
ds.Tables.Add(table);

return ds.GetXml();
Tags:

2

Answers


  1. 0

    The dataType property tells the server what type of data to return.

    You’re telling the server you want to receive json. Yet, it looks like the server is sending xml. Update the dataType in the ajax method:

    ...
dataType: 'xml', 
...
    Login or Signup to reply.
  2. 0

    Well as far as I understand, You are returning the DataTable object itself from your WebMethod and you want to read all the returned rows from the column.

    Here is my suggestion to do it, Make a model and copy your values from the DataTable to a C# class object Generic List. Below is the idea:

    // Sample Class
public class MyData
{
    public string Column1 {get; set;}
    public string Column2 {get; set;}
    public string Column3 {get; set;}
    public string Column4 {get; set;}
    // ... and so on
}

    Then in your WebMethod:

    [WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]  // To Force the service method to return JSON only
public static List<MyData> DoStuff()
{
    DataTable table = FetchMyTable(); // method that gets your data from SQL
    List<MyData> data = new List<MyData>();
    foreach(DataRow row in table.Rows)
    {
        MyData dataItem = new MyData
        {
            Column1 = row["Column1"].ToString(),
            Column2 = row["Column2"].ToString(),
            // And So on...
        };
        data.Add(dataItem);
    }
    return data;
}

    Then in your ajax call:

    $.ajax({
// your other parameters
contentType: 'application/json; charset=utf-8;',
accept: 'application/json; charset=utf-8;',
dataType: 'json',
success: function(response){
        // Now from here you can loop through it
        for(var i = 0; i < response.length; i++){
            var column1 = response[i].Column1;
            var column2 = response[i].Column2;
            // and so on....
        }
    }
});

    This is a rough idea how to achieve the task you are doing. Hope it helps.

    PS: I didn’t used any compiler so the code is not tested, it may need some love.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search