JSON, ASHX and Datatables

Hi anyone who can help.

I am trying to get my datatables working with an C# ASHX file. Firstly, let me show you how I am building up the JSON data.

>8 --snip--
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "application/json";
    string connString = System.Configuration.ConfigurationManager.ConnectionStrings["DBConn"].ToString();
    using (SqlConnection conn = new SqlConnection(connString))
    {
        conn.Open();
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.Connection = conn;
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.CommandText = "dbo.sp_StoredProcedureName";
            SqlDataReader rdr = cmd.ExecuteReader();
            StringBuilder sb = new StringBuilder();
            StringWriter sw = new StringWriter(sb);
            using (JsonWriter jsonWriter = new JsonTextWriter(sw))
            {
                jsonWriter.WriteStartArray();
                int totalrecords = 0;
                while (rdr.Read())
                {
                    jsonWriter.WriteStartObject();
                    int fields = rdr.FieldCount;
                    for (int i = 0; i < fields; i++)
                    {
                        jsonWriter.WritePropertyName(rdr.GetName(i));
                        jsonWriter.WriteValue(rdr[i]);
                    }
                    jsonWriter.WriteEndObject();
                    totalrecords++;
                }
                jsonWriter.WriteEndArray();
                context.Response.Write("{\"sEcho\":1,\"iTotalRecords\":" + totalrecords + ",\"iTotalDisplayRecords\":" + totalrecords + ", ");
                context.Response.Write("\"aaData\":" + sb + "}");
            }
        }
        conn.Close();
    }
}
--snip--8<

This code gives me a correctly formatted JSON stream (as confirmed by JSLint). This is what I see in Chrome when I browse directly to the ASHX file.

{"sEcho":1,"iTotalRecords":5,"iTotalDisplayRecords":5, 
aaData:[
{"SmplKey":905995,"CoyName":"Really Nice CoyName Value","CoyUnitId":"210"},
{"SmplKey":928804,"CoyName":"Really Nice CoyName Value","CoyUnitId":"210"},
{"SmplKey":950127,"CoyName":"Really Nice CoyName Value","CoyUnitId":"210"},
{"SmplKey":980006,"CoyName":"Really Nice CoyName Value","CoyUnitId":"210"},
{"SmplKey":1007621,"CoyName":"Really Nice CoyName Value","CoyUnitId":"210"}
]}

When I try to build this into my HTML file, it get an error and an empty table (link to screenshot - http://www.stevenwoolston.com/wp-content/uploads/2013/06/datatables-debug1.png). Below is the HTML code (here is the debug data too - http://debug.datatables.net/iforeq).

        <table cellpadding="0" id="example" cellspacing="0" border="0" class="table table-striped table-bordered">
	    <thead>
		    <tr>
			    <th class="pri-bg-colour">SmplKey</th>
			    <th class="pri-bg-colour">CoyName</th>
			    <th class="pri-bg-colour">CoyUnitID</th>
		    </tr>
	    </thead>
        <tbody>
        </tbody>
        </table>

</body>
</html>
<script>
    $(function () {
        $("#example").dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxDataProp": "aaData",
            "sAjaxSource": "/Handlers/data.ashx"
        });
    });
</script>

The debug data is kind of weird because it is showing 3 additional columns with null values. However, the JSON only has three columns. I am guessing there is something wrong with the way I am binding the JSON to the table in the Javascript but I cannot see the problem.

Any assistance would be appreciated.

Thanks
Steven
e: dev@webdesignwith.net
w: http://www.webdesignwith.net