trentacular

In this post I am going to walk through writing and consuming JSON services using ASP.Net, WCF, and jQuery to request the stock price for a company.

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

When managing users and groups within a SharePoint Web application configured to use Windows Integrated Authentication,  there is a convenient “Add all authenticated users” link that adds a special Active Directory group – NT AUTHORITY\authenticated users – to the Users/Groups People Editor.  This group refers to any non-anonymous user, which if you ask me, seems like a pretty common group to have around.  However, when working within a SharePoint Web application configured to use Forms Based Authentication (FBA), this convenient group is no longer available.

When using FBA, the only “non-SharePoint” groups available to us are the roles exposed by an ASP.Net Role Provider.  If you are already using a custom Role Provider and are not able to make changes to it, then you can stop here.  This post is not for you.  If you are like me though, and are using FBA merely for authentication and are leveraging SharePoint for all authorization, then the single “All Authenticated Users” role is all I need from my Role Provider.  As a result, there is no need to use a heavy weight Role Provider (i.e., the SQL Role Provider) to accomplish this, but rather roll your own very dumb role provider.  There is only a single method that you will need to implement – GetRolesForUser – in which you can assume the user is already authenticated and always return the “All Authenticated Users” role for the user. Here is the Role Provider I am currently using:

using System;
using System.Web.Security;
 
namespace Trentacular.Web.Security
{
    public class SimpleAllAuthenticatedUsersRoleProvider : RoleProvider
    {
        public const string AllAuthenticatedUsersRoleName = "All Authenticated Users";
 
        public override string ApplicationName { get; set; }
 
        public override string[] GetRolesForUser(string username)
        {
            return new[] { AllAuthenticatedUsersRoleName };
        }
 
        #region Methods Not Implemented
 
        public override string[] GetAllRoles() { throw new NotImplementedException(); }
        public override bool IsUserInRole(string username, string roleName) { throw new NotImplementedException(); }
        public override bool RoleExists(string roleName) { throw new NotImplementedException(); }
        public override void AddUsersToRoles(string[] usernames, string[] roleNames) { throw new NotImplementedException(); }
        public override void CreateRole(string roleName) { throw new NotImplementedException(); }
        public override bool DeleteRole(string roleName, bool throwOnPopulatedRole) { throw new NotImplementedException(); }
        public override string[] FindUsersInRole(string roleName, string usernameToMatch) { throw new NotImplementedException(); }
        public override string[] GetUsersInRole(string roleName) { throw new NotImplementedException(); }
        public override void RemoveUsersFromRoles(string[] usernames, string[] roleNames) { throw new NotImplementedException(); }
 
        #endregion
    }
}

After rolling your own role provider, you will need to register it in the web.config inside the <system.web> section as such:

<roleManager enabled="true" defaultProvider="SimpleAllAuthenticatedUsersRoleProvider">
    <providers>
        <add name="SimpleAllAuthenticatedUsersRoleProvider" type="Trentacular.Web.Security.SimpleAllAuthenticatedUsersRoleProvider, Trentacular.Web, Version=1.0.0.0, Culture=neutral, PublicKeyToken=aaaaaaaaaaaaaaaa" />
    </providers>
</roleManager>

I was recently asked to demonstrate how to use jQuery with ASP.Net, with a focus on AJAX.  So I spent a few hours and cooked up this demo web site.

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

So I just completed and released to production my first approval workflow application using ASP.Net forms and Visual Studio Workflow Designer. I have combed through hundreds of web pages working out many many kinks. These are the top 5 links for this month (measured on subjective scale of usefulness to me for completing my project):

Get Public Key Token Visual Studio Trick

SharePoint Workflow Basics

Design and Bind ASPX Forms to Workflow

Locked Workflow tasks Bug

WSS WebService DISCO and WSDL Generator

I’m not sure how much exposure these posts are receiving, so I am posting them here because they are well worth the read:

On the WebForms vs MVC Debate

ASP.NET WebForms: As *Component Frameworks* Go, It’s Pretty Good

Winston Fassett is a previous manager of mine when I was working at ORIX USA, where building rapid applications for demanding financial analysts was our focus.  When I made the move to racenation.com, the founder soon after lured Winston to join us, and from the ground up we architected and developed what is racenation.com.  I have learned an immense amount from working with him and can safely say he is the sharpest developer I’ve been in contact with throughout my career.  Also check out his self-developed mindmapping tool MindTree, which I am using extensively for a variety of tasks from meeting notes to project management.