Schotime.net » jQuery

Dataset, Datatable to Json

Schotime — Sun, 27 Jul 2008 05:51:36 +0000

After my previous posts about returning data to the client as a JSON object, I decided to have a go at returning a generic Datatable/Dataset. This however is not as easy as simple returning a Datatable in your code behind method or web service. There is a solution though and here it is.

If you break a Datatable down it is really only a List of Dictionary objects so that’s how we’ll approach this problem. This is compatible with .NET 2.0 and above, with the Ajax installed.

I’d like to acknowledge RichardD for the idea.

Below is the solution.

using System.Collections.Generic;
using System.Data;

public static class JsonMethods
{
    private static List<Dictionary<string, object>>
        RowsToDictionary(DataTable table)
    {
        List<Dictionary<string, object>> objs =
            new List<Dictionary<string, object>>();
        foreach (DataRow dr in table.Rows)
        {
            Dictionary<string, object> drow = new Dictionary<string, object>();
            for (int i = 0; i < table.Columns.Count; i++)
            {
                drow.Add(table.Columns[i].ColumnName, dr[i]);
            }
            objs.Add(drow);
        }

        return objs;
    }

    public static Dictionary<string, object> ToJson(DataTable table)
    {
        Dictionary<string, object> d = new Dictionary<string, object>();
        d.Add(table.TableName, RowsToDictionary(table));
        return d;
    }

    public static Dictionary<string, object> ToJson(DataSet data)
    {
        Dictionary<string, object> d = new Dictionary<string, object>();
        foreach (DataTable table in data.Tables)
        {
            d.Add(table.TableName, RowsToDictionary(table));
        }
        return d;
    }
}

The static class JsonMethods exposes two public static methods and a private method. The public method ToJson() takes either a Dataset or a Datatable, and returns a Dictionary object. The key to this class is the RowsToDictionary() method.

This method iterates through all the rows creating a dictionary entry for each column in the row using the column name as the key and storing the data value into the object. It then adds the Dictionary object to a List of Dictionary Objects and returns this to the ToJson() method. This Dictionary list is then added to another Dictionary object using the table name as the key. We’ll see how this all works together soon.

Lets have a look at the code behind now.

[System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
[System.Web.Services.WebMethod]
public static Dictionary<string, object> getTable()
{
    string sql = "select user_name, active_indicator, create_date from users";
    string connString = "database=db; server=localhost; user id=sa;";

    return JsonMethods.ToJson(GetDataTable(sql, connString));
}

private static DataTable GetDataTable(string sql, string connString)
{
    using (SqlConnection myConnection = new SqlConnection(connString))
    {
        using (SqlCommand myCommand = new SqlCommand(sql, myConnection))
        {
            myConnection.Open();
            using (SqlDataReader myReader = myCommand.ExecuteReader())
            {
                DataTable myTable = new DataTable();
                myTable.TableName = "mydt";
                myTable.Load(myReader);
                myConnection.Close();
                return myTable;
            }
        }
    }
}

So what I have above is two static methods. One is GetTable which is the one we will access from the client. The other is a generic method for loading a results set into a Datatable. Note how I have set the TableName property. You will see why soon.

So using the jMsAjax plugin as below will return the following JSON object.

$.jmsajax({
    type: "POST",
    url: "Default.aspx",
    method: "getTable",
    data: {},
    dataType: "msjson",
    success: function(data) {
        $(outputDT(data.mydt)).appendTo("body");
    }
});

Results (data):

{"mydt":{"user_name":"000001","active_indicator":"Y","create_date":"\/Date(1170892765197)\/"}, {"user_name":"000002","active_indicator":"Y","create_date":"\/Date(1170892765197)\/"}]}

In the resulting data, the table name is the key to referencing the array of values. In this case we use ‘mydt’ as the key. In the success function on the client request you may also notice an outputDT function. This is a little helper function which takes a JSON Datatable and returns a the results in a table. This is very useful for debugging. Here is the client side code.

"); for (var name in dataTable[0]) headers.push(""); headers.push(""); for (var row in dataTable) { rows.push(""); for (var name in dataTable[row]) { rows.push(""); } rows.push(""); } var top = "

function outputDT(dataTable)
{
    var headers = [];
    var rows = [];

    headers.push("

"+name+"

"); rows.push(dataTable[row][name]); rows.push("

"; var bottom = "

"; return top + headers.join("") + rows.join("") + bottom; }

So as you can see, its now very easy to return a Datatable or Dataset as a JSON object ready for use on the client.

Hope this is as useful for you as it is for me.

Cheers,

Schotime

jQuery Plugin for ASP.net Ajax (jMsAjax)

Schotime — Tue, 01 Jul 2008 13:25:49 +0000

After my recent post on jQuery, JSON and dates in asp.net I decided that there must be a better solution so I set out writing my first jQuery plugin. And after a few hours I had it working to my delight.

It not only accepts a raw JSON object as input for method parameters, but safely parses and stringify’s the object using Crockford’s implementation (http://www.json.org/js.html). The syntax of the call doesn’t change if it is a “POST” or a “GET” as it is all handled inside the plugin. It also returns Dates without a problem.

I have add a Home page for the plugin at http://schotime.net/jMsAjax.aspx and also added it to the plugins pages on the jQuery website (http://plugins.jquery.com/project/jMsAjax).

Here is the basic syntax:

$.jmsajax({
    type: "POST",
    url: "jMsAjax.aspx",
    method: "getTime",
    data: { date_in: new Date() },
    success: function(data) {
        $("#div").html(String(data));
    }
});

You can find more information, a demo and the download at http://schotime.net/jMsAjax.aspx
Update: Just fixed the download page. Sorry for the inconvenience.

And at only 4kb + jQuery its significantly less size than MsAjax.

I hope this is as helpful to you as it is for me.

Schotime

jQuery, AJAX, ASP.NET and Dates

Schotime — Thu, 19 Jun 2008 09:30:01 +0000

Just recently I discovered jQuery and I have to say….I’m a huge fan already. So I decided to setup my first AJAX call through jQuery and call a page method. After some playing around I finally had it. Thanks also go out to www.encosia.com. Thanks Dave. The only problem was that I could not parse Dates.

Updated 04/07/08: Please see my latest post for a jQuery plugin that works perfectly with Asp.net. Dates and all.

So here I show you my solution which works pretty well and suits my needs. Maybe you might find it useful.

Firstly I’ll show you the aspx page and code behind use to make the AJAX call.
ASPX Page:

<html>
<head>
    <title>My jQuery Testtitle>
    <script src="jquery.min.js" type="text/javascript">script>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#mybutton").click(function() {
                  $.ajax({
                      type: "POST",
                      url: "Default.aspx/jQueryTest",
                      contentType: "application/json; charset=utf-8",
                      data: "{ 'dt_in': "+(new Date()).toMSJSON()+" }",
                      success: function(response) {
                        var data = parseMSJSONString(response);
                        alert(data.d.name);
                        alert(data.d.dt);
                      }
                  });
             });
        });
    script>
head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="mybutton" value="GetDate" />
    div>
    form>
body>
html>

Code Behind:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    [System.Web.Services.WebMethod]
    public static Test jQueryTest(DateTime dt_in)
    {
        Test t = new Test() { name = "My Name", dt = dt_in.AddDays(5) };
        return t;
    }

    public class Test
    {
        public string name { get; set; }
        public DateTime dt { get; set; }
    }
}

Note: I have not set a dataType setting of ‘json’ in the Ajax call to prevent the JSON string being evaluated into a JSON object before I can parse it. Also note that the name of the parameter passed in through the JSON string data must be the same as the static WebMethod parameter name. In this case “dt_in”.

So what we have above is a simple input button with the value of “GetDate” which is going to send the current date from JavaScript to the WebMethod, add 5 days to the Date, then add it to a custom class called Test and return an instance of it. At that point the Name and Date will be alerted to the screen, all without a PostBack.

Now usually this would not work however I have created to handy scripts to make it pretty seamless. One to convert a JavaScript Date object to a Date String that ASP.NET will accept, and the other to parse the JSON string returned into a JavaScript Date. Here are those two functions.

Date.prototype.toMSJSON = function () {
      var date = '"\\\/Date(' + this.getTime() + ')\\\/"';
      return date;
};

function parseMSJSONString(data)
{
    try {
        var newdata = data.replace(
            new RegExp('"\\\\\/Date\\\((-?[0-9]+)\\\)\\\\\/"', "g")
                        , "new Date($1)");
        newdata = eval('('+newdata+')');
        return newdata;
    }
    catch(e) { return null; }
}

The first of these two functions toMSJSON extends the Date object by adding the toMSJSON method to it. By doing this any Date object created in JavaScript can be converted to its MS JSON equivalent ready to be sent via Ajax.

The second one is a plain method used to parse the JSON string returned by the WebMethod to a JSON string that is ‘evaled’ and made a proper JSON object. Thereby making data.d.dt in the example above a Date object.