How to use Ajax calls from datatable in ASP.NET Web Forms project

Question

I'm working on an ASP.NET Web Forms application. Using Visual Studio 2012 standard template. I want to use DataTable 1.10 with Ajax calls to the server. Since I'm having troubles with using datatables at all, I start from the begining so I can confirm that when I use the simplier examples (like reading from txt file) it works fine. But now, following the examples from the official site I want to implement real Ajax call to a method and return some data.

I have page Test.aspx with this code there:

<script type="text/javascript">
    $(document).ready(function () {
        $('#example').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "/Table.aspx/TestAjax"
        });
    });

and a very simple HTML :

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
        </tr>
    </tfoot>
</table>

All this is taken from the example, also, minimized the number of columns for simplicity.

From an example I took this code for my method:

    [WebMethod]
    public static string TestAjax(string sEcho)
    {
        var list = new FormatedList();

        list.sEcho = sEcho;
        list.iTotalRecords = 1;
        list.iTotalDisplayRecords = 1;

        var item = new List<string>();
        item.Add("Gecko");
        list.aaData = new List<List<string>>();
        list.aaData.Add(item);

        return list.ToString();
    }

where FormatedList is a class defined like this:

public class FormatedList
{
    public FormatedList()
    {
    }
    public string sEcho { get; set; }
    public int iTotalRecords { get; set; }
    public int iTotalDisplayRecords { get; set; }
    public List<List<string>> aaData { get; set; }
}

So when I run my project in the console I can see Status 200 OK for the call to the Test.aspx/TestAjax but I also get an error from the browser for invalid Json. In the example for the server side code the returning type of the method was the actual class FormatedList but it gave the same result. I can understand that in both cases I'm not returning actual Json for which the browser is givign me an error but yet, I see in examples that people are using approaches like this and it sounds like it's working.

So where is my error, if there is, in the code, and what is the proper way to return data from the Server (using C#) so that I can use DataTable?

mason · Accepted Answer · 2014-07-10 13:51:43Z

1

You're just calling list.ToString(). That usually just results in the type name.

Instead, it's best to serialize to JSON. In my experience, ASMX/[WebMethod] doesn't handle that very well. You'll need to use a library to serialize it, the usual recommendation is Json.NET. Once you have that library and add the appropriate using statement using Newtonsoft.Json; to the top of your class, try changing your function to this:

[WebMethod]
    public static void TestAjax(string sEcho)
    {
        var list = new FormatedList();

        list.sEcho = sEcho;
        list.iTotalRecords = 1;
        list.iTotalDisplayRecords = 1;

        var item = new List<string>();
        item.Add("Gecko");
        list.aaData = new List<List<string>>();
        list.aaData.Add(item);
        string json=JsonConvert.SerializeObject(list);
        Response.ContentType= "application/json";
        Response.Write(json);
    }

I return void because we're going to write directly to the response.

By the way, have you thought about Web API? That's a better route to go down rather than ASMX/[WebMethod]. With a Web API function you can return list; and the framework will take care of converting the list to JSON (using Json.NET!) or XML depending on the content type requested.

edited Jul 10, 2014 at 13:51

answered Jul 10, 2014 at 13:42

mason

32.8k12 gold badges83 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leron Over a year ago

Thanks for the answer. I'm used to MVC3+ and there things happen a lot more easier. I thought about the Web API but there are several legacy issues, including what the other people are familiar with so at the end it should be done by doing something like this. Thanks again for the help!

Collectives™ on Stack Overflow

How to use Ajax calls from datatable in ASP.NET Web Forms project

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related