Tag Archives: JSON

Make IE displays JSON file to the screen

When we have a JSON builder, say a MVC Controller with method returns JSON, and we want to debug this method using Internet Explorer, IE will prompt for download the JSON file hence we can’t see the result immediately. Really annoying behavior.

However we can alter this by update Windows Registry. Below are the steps on how to do so:

  1. We need to be login as user with administrator privilege
  2. Open any text editor (Notepad will do) and create a file called js_ie.reg or any name with .reg extension and put below as content

    Windows Registry Editor Version 5.00
    ;
    ; Tell IE to open JSON documents in the browser. 
    ; 25336920-03F9-11cf-8FD0-00AA00686F13 is the CLSID for the "Browse in place" .

    [HKEY_CLASSES_ROOT\MIME\Database\Content Type\application/json]
    "CLSID"="{25336920-03F9-11cf-8FD0-00AA00686F13}"
    "Encoding"=hex:08,00,00,00

    [HKEY_CLASSES_ROOT\MIME\Database\Content Type\text/json]
    "CLSID"="{25336920-03F9-11cf-8FD0-00AA00686F13}"
    "Encoding"=hex:08,00,00,00

  3. Double click .reg file, it will prompt us for confirmation to change registry, choose OK
  4. Now, you our IE will immediately shows JSON results on screen rather than prompt us to download

Make sure your JSON script returns something

This post will be short. I want to highlight important of each of our JSON code return something. Why ? because another program who read our JSON expect to retrieve something and most of JQuery – JSON centric also expect to retrieve something even though only zero length or array.

if no object is returned by JSON script, an error will be raised by JQuery, and this error is really not debug friendly.

Make sure your JSON script returns something, and you will save other programmers within your group from being heart attacked.

Handling ASP.NET MVC JsonResult Date Type

Working with MVC, JSON and jQuery is fun. Lots of challenges and solutions can be explored. But there always a nightmare on every challenge, and for this case is date data type returned by JSONResult of ASP.Net MVC. 

When I populate a date data type using ASP.Net MVC and return it through JSON, somehow it is serialized as something like below.

image

See that funny representation of date “\/Date(1333209600000)\/” which equals to 1-Apr-2012. I don’t know why Microsoft decided to use this lousy pattern as their data serialization for date type variable. Yes, PHP won’t do that, but currently my solution is based on Microsoft technology and port it to PHP or Java would be a big efforts if root cause is just to avoid data serialization issue.

After removing “\/” and “Date” and remains only number part, it turns the number is big integer number for date type until ticks level of accuracy.

I can’t change the way MSFT serialized their JsonResult, it is their call. But I can manage to change it on script level. And since I am a lazy programmer, rather than do like “select field1, field2, doSomeFancyDateToStr(field3) as date from some table” I will prefer to run “select * from some table”. I still need to do some data manipulation to follow local date pattern anyway on UI level. Hence I decided to change the way data represented on UI level. And I choose JavaScript as my media to change it.

So I create a simple JavaScript function and attach it to any script needs data translation from any JSON output. The script is a simple as below:

 

   1:  function jsonDate(strDt) {
   2:      return new Date(parseInt(strDt.substr(6)));
   3:  }

Then, when I want to use it on my MVC, i just call the function as neccessary. For example as below, where I use KendoGrid UI for my UI framework:

   1:  $("#gridLine").kendoGrid({
   2:      dataSource: dsLine,
   3:      columns: [
   4:          { field: "TimeSheetLineId", title: " ", 
   5:              width: 30,
   6:              template: '<input type="checkbox" id="checkme" 
   7:                  dataId="#= TimeSheetLineId #">'
   8:          },
   9:          { field: "TransDate", title: "Date", 
  10:              width: 100, 
  11:              template: '#= kendo.toString(jsonDate(TransDate)
  12:                  ,"dd-MMM-yyyy") #' }
  13:      ],
  14:      resizable: true,
  15:      autoBind: false
  16:  });

And screen will loks like as below

image

Problem solved.