Visual Studio 2010 Web Application Project Template Additions

• jQuery Intellisense – let Visual Studio write your jQuery for you
• AJAX-enabled WCF Service – item template that auto-generates the web.config entries for configuring a JSON service to be consumed and proxied by an ASP.Net ScriptManager
• Targeted web.config files – easy way to manage different service endpoints for different environments

What is JSON?

Java Script Object Notation – JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

var dog = {color: "grey", name: "Spot", size: 46};

SOAP Bloat

SOAP services are extremely verbose. This verbosity enables us to use tools like Visual Studio’s built-in ”Add Service Reference” to auto-generate client proxy classes.  The following examples demonstrate the XML that is used for requesting a stock price and the corresponding response:

Example SOAP Request

<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
  <soap:Body xmlns:m="http://www.example.org/stock">
    <m:GetStockPrice>
      <m:StockName>GOOG</m:StockName>
    </m:GetStockPrice>
  </soap:Body>
</soap:Envelope>

Example SOAP Response

<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
  <soap:Body xmlns:m="http://www.example.org/stock">
    <m:GetStockPriceResponse>
      <m:Price>534.5</m:Price>
    </m:GetStockPriceResponse>
  </soap:Body>
</soap:Envelope>

The above example when formatted as JSON is as follows:

GET Request

ticker=GOOG

JSON Response

{"d":534.5}

JSON Enabling a WCF Service

1. Using the AJAX-enabled WCF Service item template pretty much does it all.  An additional step can be taken to eliminate the need for the additions to the web.config by configuring the channel factory directly on the service declaration (.svc) file:

   <%@ ServiceHost Language="C#" Debug="true"
       Service="Trentacular.JsonWcfDemo.StockPriceService"
       Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"
       CodeBehind="StockPriceService.svc.cs" %>

2. Decorate the operation (service method) with the WebGetAttribute to enable the use of HTTP GET for data retrieval and return the response as JSON :

   [WebGet(ResponseFormat = WebMessageFormat.Json)]

Our resulting stock price service’s code behind will look like the following:

    [ServiceContract(Namespace = JsonWcfDemoNamespace.Value)]
    public class StockPriceService
    {
        // To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json)
        // To create an operation that returns XML,
        //     add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
        //     and include the following line in the operation body:
        //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        [OperationContract]
        [WebGet(ResponseFormat=WebMessageFormat.Json)]
        public StockPrice GetStockPrice(string ticker)
        {
            ...
        }
 
        // Add more operations here and mark them with [OperationContract]
    }

Converting Text to JSON and Back

eval() – invokes the JavaScript compiler. The compiler will correctly parse the text and produce an object structure. The eval function is very fast. However, it can compile and execute any JavaScript program, so there can be security issues.

JSON.parse() – To defend against security issues with the eval function, it is preferred to use a JSON parser. A JSON parser will recognize only JSON text, rejecting all scripts. In browsers that provide native JSON support, JSON parsers are also much faster than eval. It is expected that native JSON support will be included in the next ECMAScript standard.

jQuery’s $.getJSON() Method

jQuery provides the getJSON method for easily making calls to services providing JSON-formatted responses and performing the JSON conversion.  Its signature is as follows:

$.getJSON( url, [ data ], [ callback(data, textStatus) ] )

url – A string containing the URL to which the request is sent.

data – A map or string that is sent to the server with the request.

callback(data, textStatus) – A callback function that is executed if the request succeeds.

Consuming our stock price service using the getJSON method will look like the following:

$.getJSON("StockPriceService.svc/GetStockPrice", { ticker: tickerValue }, function (data, textStatus) {
 
    if (textStatus != 'success' || !data.d) {
        $("#stockPricePanel")
            .html('<span class="error">Error looking up stock price.  Did you enter a valid ticker?</span>');
    } else {
        var stockPrice = data.d;
        var isIncrease = (stockPrice.Delta >= 0);
        var deltaStyle = isIncrease ? 'gain' : 'loss';
 
        $("#stockPricePanel")
            .html('<span class="price">' + stockPrice.Price + '</span>')
            .append('<span class="delta ' + deltaStyle + '">' + stockPrice.Delta + '</span>')
            .append('<span class="percent ' + deltaStyle + '">(' + stockPrice.PercentChange + '%)</span>');
    }
});

Working with WCF Serialized JSON Dates

One caveat when working with JSON is that WCF serializes DateTimes to JSON in the format:

/Date({milliseconds since 01/01/1970}-{time zone})/

Unfortunately, native JSON conversion does not automatically convert the date string to a JavaScript date object. The following method shows an example of how to convert a JSON date string to a javascript Date object:

function convertJSONToDate(json) {
    return eval(json.replace(/\/Date\((.*?)\)\//gi, "new Date($1)"));
}

Download the Demo Application

Download Now

For first time readers, Galleriffic is a jQuery photo gallery optimized to handle high volumes of photos while conserving bandwidth.  h0bbel has posted a nice read on some of the benefits of Galleriffic over other photo gallery scripts.

New Features

• Keyboard Navigation
• Support for synchronized transitions (image cross-fades)
• Ability to add or remove images after the gallery is initialized
• Support for custom hash identifiers (when using history)
• Better API to make it easier to customize
• Smarter pagination
• Integration with the jquery.history plugin for history support

Warnings to users attempting to upgrade from version 1.0

• The onChange event in 1.0 has been renamed to onSlideChange.
• All transition event handlers have new signatures, so you will need to make sure to update any transition event handlers you have implemented.
• Using synchronized transitions requires changes to your stylesheet – primarily the additional of relative and absolutely positioning so that two images can occupy the same space at the same time.

There are now 5 examples, each builds on the previous.  For a visual treat, check out the last example, whose colors I inverted.

The Web site demonstrates the following jQuery concepts:

• Basic jQuery selectors and API usage
• Wiring up javascript event handlers with jQuery
• AJAX autocomplete textbox using the Autocomplete plugin
• Maintaining AJAX navigation history and state using the History plugin
• Loading dynamic html into a panel using the jQuery.load API function
• Loading dynamic html into a modal dialog using the FaceBox plugin

The demo could be useful to both someone starting out with jQuery or an old-timer looking for some new AJAX approaches.  Let me know what you think.

Download

asp.net-jQuery-demo.zip
(Requires Visual Studio 2008 and the .Net Framework 3.5)

Preview

Update: Galleriffic 2.0 has been released. Read about it here.

*************************************************************

At long last, I have released the 1.0 version of Galleriffic, which packs all sorts of new features.

For first time readers, Galleriffic is a jQuery photo gallery optimized to handle high volumes of photos while conserving bandwidth. h0bbel has posted a nice read on some of the benefits of Galleriffic over other photo gallery scripts.

New Features

• Updated to work with jQuery 1.3 (apparently jQuery 1.3.2 introduces a flicker the gallery advances)
• OnTransitionIn and OnTransitionOut events that allow for plugging in custom transitions
• SlideShow auto start option
• Disable history and url hash writing option
• Support for showing an element (such as an animated loading image) when waiting for an image to load
• Thumbnails are now simply shown/hidden instead of being rebuilt which allows for any custom html to be used as a thumbnail
• Replaced invalid html attributes “description” and “original” with an optional caption element that can contain any custom html
• Changed the toggle slideshow span to a hyperlink

By exposing both image and page transition events, the doors of creativity are now open for plugging in your own image transitions.  This should also lend to a more modular approach for extending Galleriffic.

FAQ

Will Galleriffic generate the slide and thumbnail images automatically?

I have been asked a lot if Galleriffic automatically generates the thumbnails and slides.

Galleriffic by itself does not do any image processiong or generation; however, there is a great tool that does: jAlbum.  I have created a jAlbum skin that I use myself for creating my personal galleries.  After installing jAlbum and the Galleriffic jAlbum skin, simply choose your source image directory and an output directory, click “Make Album”, and wallah, you now have a complete html gallery with 3 different size versions of each image.

How can I center the slide image?

Thanks to Cristi for providing a solution to this problem. Click here to read her solution.

How can I change the number of thumbnail columns?

With the stylesheet used in the example, each thumbnail is floated left, and thus as many thumbnails that will fit in the width of the column will be displayed. If you want fewer or more columns, make the width of the navigation panel smaller or larger. I am currently setting its width using javascript with the following line in the html:

document.write(”
<!-- div.navigation{width:300px;float: left;}div.content{display:block;} -->
 
”);

It has been pointed out in the comments that a better way to do this is to use the jQuery.css() method just before initializing the gallery.

Where do I submit my issues or enhancement requests?

I started an issues list that I will start working off of for future releases here. Submit your issues and enhancement requests in this list.

Galleriffic is a dynamic photo gallery optimized to handle a high volume of photos. I would love feedback on how to improve this plugin.

02/03/2009 Update: Released v 1.0

• Read up on 1.0 release in this post.

10/05/2008 Update: Released v 0.7

• Added support for multiple galleries per page
• New 0.7 jAlbum skin release

9/30/2008 Update: Released v 0.6

• Now supports graceful degradation (see example for updated instructions on how to set up your gallery)
• Added configuration option to specify the number of slides to preload in advance

9/25/2008 Update: Released v 0.5

• Replaced several lingering hardcoded titles and link text with settings values to allow for internationalization
• Updated the jAlbum skin

9/20/2008 Update: Released v 0.4

• Added support for onFadeOut and onFadeIn events (see example for how this can be used)
• Removed unnecessary iframe that is created when using IE
• Released a new jAlbum skin that makes creating static albums a breeze (View the demo)

9/17/2008 Update: Released v 0.3

• Implemented additional options for title and description element selectors
• To enable the ‘Download Link’, a link element selector is now needed

9/16/2008 Update: Released v 0.2

• Reworked image preloading to load a single image at a time