Tuesday, January 31, 2012

Traditional option in jquery ajax calls

I've started getting into Wcf Web Api, which is really nice tech. One issue I was having though is that in my ajax calls, that used json style data parameters, arrays were ending up being null on the .Net side (both mvc and my web api service). After some investigation I found that jquery used to have a different format for array inputs in their ajax call, which they later changed. It appears microsoft is still expecting that older style. The fix is simply to add traditional: true inside of your ajax calls. I've included some code below.

$.ajax({
                type: "POST",
                url: "your url",
                data: { input1: 10, input2: 1000, array1: [1, 2] },
                dataType: "json",
                traditional: true,
                success: function (data) {
                    // do something
                },
                error: function (data) {
                    alert("failed " + data);
                }
});

Monday, January 30, 2012

Dealing with .Net Date format issues in javascript

I've started a new job doing primarily web development. One thing I've been having to do is create a last updated message along the lines of "last updated x hours ago". My current web application is using Wcf Web Api (its really cool by the way). One issue that I've run into is microsoft's chosen format for date/time. It basically looks like this /Date(xxxxxxxxxxxxx-xxxx)/. Lovely isn't it? This format is the millisecond format for displaying the date in milliseconds. Suffice it to say that standard javascript methods like getTime() don't work with this format due to the additional "-xxxx" at the end. So here's a javascript method that does the job, enjoy.

 function getFormattedLastDateString(dateInput) {
    // setup last used date
    var lastModifiedMsg;
    var milliSecondsInOneDay = 24 * 60 * 60 * 1000;
    var milliSecondsInOneHour = 1 * 60 * 60 * 1000;
    var today = new Date();
    var created = dateInput.replace(/[-]{1}[0-9]{4}/, "");
    created = created.replace(/\/Date\(/, "");
    created = created.replace(/\)\//, "");
    console.log("created: " + created);
    console.log("today: " + today.getTime());
    var daysDiff = Math.round(Math.abs(today.getTime() - created) / milliSecondsInOneDay);
    if (daysDiff <= 1) {
        var hoursDiff = Math.round(Math.abs(today.getTime() - created) / milliSecondsInOneHour);
        if (hoursDiff != 1) {
            lastModifiedMsg = "updated " + hoursDiff + " hours ago.";
        }
        else {
            lastModifiedMsg = "updated " + hoursDiff + " hour ago.";
        }
    }
    else {
        if (daysDiff != 1) {
            lastModifiedMsg = "updated " + daysDiff + " days ago.";
        }
        else {
            lastModifiedMsg = "updated " + daysDiff + " day ago.";
        }
    }
    return lastModifiedMsg;
}

Saturday, January 14, 2012

State vs Strategy Design Patterns

I had to use one of these for a project I'm working on now. At first couldn't understand what the difference was between them. I mean they look identical structurally. So I started digging a little deeper into a book I use for design patterns called Professional Asp.Net Design Patterns by Scott Miller. If I can distill the answer down a bit, to me it seems like its the difference between a static and a dynamic pattern. In the case of state you give your context class the specific instance of a State object upfront (you can do this in the constructor if you like). In the case of Strategy you decide at runtime which Strategy object your context will be using. When you break it down in this way I think it makes the difference very clear. Of course there's lots of ways to do the dynamic runtime decision for which Strategy type you will use, but I chose to use the example from the book--which is to have a factory spit out the appropriate instance depending on a Strategy type enum value. Its clean and works well.