Javascript - Work With JSON Datetime

Sometimes when we work with JSON datetimes we get a little stuck, because we want to do all the work client side, using javascript only.

 So, to achieve this, to transform something like this:

"/Date(1392291352347)/"

into this:

"2014-02-13 11:35:52"

we can use a function like this one:

function formatDatetime(jsondate) {

    var match;
    if (jsondate == null || !(match = jsondate.match(/\d+/))) {
        return "";
    }

    var d = new Date();
    d.setTime(match[0] - 0);

    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hour = d.getHours();
    var minute = d.getMinutes();
    var second = d.getSeconds();

    var output = d.getFullYear() + '-' +
    (('' + month).length < 2 ? '0' : '') + month + '-' +
    (('' + day).length < 2 ? '0' : '') + day + ' ' +
    (('' + hour).length < 2 ? '0' : '') + hour + ':' +
    (('' + minute).length < 2 ? '0' : '') + minute + ':' +
    (('' + second).length < 2 ? '0' : '') + second;

    return output;
}

References:
http://stackoverflow.com/questions/9050763/format-date-in-jquery
http://stackoverflow.com/questions/4586424/how-do-i-convert-this-json-datetime

Endpoint on ASP.NET page returning JSON from DataTable

I was trying to get an web service, on my aspx page which returned data would be JSON.

The structure of JSON returned usually is something similar to this:

{ "d" :  [ {...}, {...}, {...} ] }

To achieve this, I purpose this approach:


First - Create an WebMethod on your page, at server side, like this:

        [System.Web.Services.WebMethod]
        public static string GetData()
        {
            DataTable dt = GetDataTable();
            
            return BuildJSONFromDT(dt);
        }

Second - Create the method "BuildJSONFromDT"

 

        private static string BuildJSONFromDT(DataTable dt)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();

            List<object> resultMain = new List<object>();

            foreach (DataRow row in dt.Rows)
            {
                Dictionary<string, object> result = new Dictionary<string, object>();
                foreach (DataColumn column in dt.Columns)
                {
                    result.Add(column.ColumnName, "" + row[column.ColumnName]);
                }

                resultMain.Add(result);
            }

            return serializer.Serialize(resultMain);
        }

Third - At client side, do an ajax call with jquery like this:

$.ajax({
        type: "POST",
        async: true,
        contentType: "application/json; charset=utf-8",
        data: "{}",
        url: "page.aspx/GetData",
        dataType: "json",
        success: function (result) {
            var myData = eval(result.d);
            // Work on myData object (JSON)
        },
        error: function (data, textStatus, jqXHR) {
            alert("Error: " + textStatus);
        }
    });

At this point, you should have an valid JSON at client side reflecting your DataTable retrieved on server side.

Hope this helps someone.

Cheers!


Reference:
http://geekswithblogs.net/aghausman/archive/2009/05/16/datatable-to-json.aspx

Request JSON using WCF DS 5.0

So, I was start using WCF OData Services 5.0.1.0 and when I made an ajax call requesting the response in JSON I get the 415 error: "Unsupported media type requested".

Detail: "A supported MIME type could not be found that matches the acceptable MIME types for the request. The supported type(s) 'application/atom+xml;type=feed, application/atom+xml, application/json;odata=verbose' do not match any of the acceptable MIME types 'application/json'".

This happens because the serialization json light format will be part of the OData v3 protocol: "The new serialization format will be part of the OData v3 protocol, and we believe that the much-improved JSON format should be the default response when requesting application/json." (http://blogs.msdn.com/b/astoriateam/archive/2012/04/11/what-happened-to-application-json-in-wcf-ds-5-0.aspx)

In conclusion, you have the next code on your WCF OData Service:

public class api : DataService <DataModel>
{
 public static void InitializeService(DataServiceConfiguration config)
 {
  config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
  config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V3;
 }
}

And to call the service using javascript/jquery you can use the next code for that:

$.ajax({
  type: "GET",
  url: "api.svc/Entity()?$top=10",
  dataType: "json",
  beforeSend: function (xhr) {
    xhr.setRequestHeader("Accept", "application/json;odata=verbose");
  },
  success: function (data) {
    //success func
  },
  error: function (error) {
    //error func
  }
});

References:
http://blogs.msdn.com/b/astoriateam/archive/2012/04/11/what-happened-to-application-json-in-wcf-ds-5-0.aspx
http://blogs.msdn.com/b/astoriateam/archive/2012/04/09/wcf-data-services-5-0-rtm-release.aspx
http://social.msdn.microsoft.com/Forums/en-US/adodotnetdataservices/thread/ae80bb85-ad26-48c4-a399-4d76db5c346b

jQuery - Dynamic Table Creation Using Templates

Sometimes you really need to do things at client side, and one of them could be like a table creation with data on demand. Example, if you do a jQuery Ajax call, receive data in JSON format and present this data in a table, this is a pretty good and clean approach.

The example code goes like this:

As you can see above, is simple and clean, even if you want to apply classes to <tr> or <td> tags for instance. The expected result from this code is a really dummy table.

References:
http://api.jquery.com/jquery.tmpl/

Post JSON to MVC Controller with XDomainRequest, XmlHttpRequest and jQuery Ajax Call

Once I try to post a JSON to a MVC controller, I use jQuery.post method and all works fine as you can see in this site, the first in the below references.

But when I try to use XDomainRequest or XmlHttpRequest, the JSON parameter at server side has null properties, in others words, the data is sent but not serialized to our serializable Type.

So, in order to receive data at server side, i used the DataContractJsonSerializer class to read the Stream sent in the Request, like this:

Of course, to make use of DataContractJsonSerializer, we need a class representing JSON with [DataContract] attribute and respective [DataMember] just like a WCF service for instance.

Then, the code at server side, looks like this:

And, at client side, making use of XDomainRequest and XmlHttpRequest Objects, and jquery the code is

This way, you have a MCV controller that can receive JSON using the JSON serializing capacities of MCV3 from XDomainRequest, XmlHttpRequest and jQuery ajax call.


References:
http://lozanotek.com/blog/archive/2010/04/16/posting_json_data_to_mvc_controllers.aspx
http://msdn.microsoft.com/en-us/library/bb412170.aspx
http://msdn.microsoft.com/en-us/library/bb412179.aspx