Json.NET - Simplifying .NET <-> JavaScript communication

JSON (JavaScript Object Notation) is lightweight data interchange format. In recent times JSON has achieved widespread use due to the ease of which it can be parsed and then the data accessed from within JavaScript compared to alternatives like XML.

While many JavaScript libraries exist for converting JSON text to and from a JavaScript object, working with JSON in .NET has been much more problematic. Correctly escaping strings and building up objects when writing JSON text can be difficult and error prone, while parsing values back out of JSON text is harder still.

Json.NET

Json.NET is a JSON .NET API for simply and safely reading and writing valid JSON text. At the core of Json.NET, similar to the .NET XML APIs, are two classes: JsonReader and JsonWriter. Also like XML in .NET, Json.NET includes a JsonSerializer class.

Reading JSON

JsonReader is a fast, forward only, readonly cursor. Like XmlTextReader it works over the top of a TextReader and maximizes performance while minimizing memory use.

The following code is a brief example of how to read a JSON object.

string jsonText = "['JSON!',1,true,{property:'value'}]";
 
JsonReader reader = new JsonReader(new StringReader(jsonText));
 
Console.WriteLine("TokenType\t\tValueType\t\tValue");
 
while (reader.Read())
{
    Console.WriteLine(reader.TokenType + "\t\t" + WriteValue(reader.ValueType) + "\t\t" + WriteValue(reader.Value))
}

Resulting in...

TokenTypeValueTypeValue
StartArray null null
String System.String JSON!
Integer System.Int32 1
Boolean System.Boolean True
StartObject null null
PropertyName System.String property
String System.String value
EndObject null null
EndArray null null

Writing JSON

JsonWriter is also forward only, and writes JSON text to a TextWriter. It handles formatting numbers, escaping strings and validating that the object is valid.

The following code is a brief example of how to write a JSON object.

StringWriter sw = new StringWriter();
JsonWriter writer = new JsonWriter(sw);
 
writer.WriteStartArray();
writer.WriteValue("JSON!");
writer.WriteValue(1);
writer.WriteValue(true);
writer.WriteStartObject();
writer.WritePropertyName("property");
writer.WriteValue("value");
writer.WriteEndObject();
writer.WriteEndArray();
 
writer.Flush();
 
string jsonText = sw.GetStringBuilder().ToString();
 
Console.WriteLine(jsonText);
// ['JSON!',1,true,{property:'value'}]

Which prints out: ['JSON!',1,true,{property:'value'}].

Serializing and deserializing JSON and .NET objects

JsonSerializer, similar to XML serialization, provides a hassle free way to automatically convert .NET objects to and from JSON text.

The following code is a brief example of how to serialize and deserialize JSON and .NET objects.

string jsonText = "['JSON!',1,true,{property:'value'}]";
 
JsonSerializer serializer = new JsonSerializer();
 
JavaScriptArray jsArray = (JavaScriptArray) serializer.Deserialize(new JsonReader(new StringReader(jsonText)));
 
Console.WriteLine(jsArray[0]);
// JSON!
 
JavaScriptObject jsObject = (JavaScriptObject)jsArray[3];
 
Console.WriteLine(jsObject["property"]);
// value
 
StringWriter sw = new StringWriter();
 
using (JsonWriter jsonWriter = new JsonWriter(sw))
{
    serializer.Serialize(sw, jsArray);
}
 
Console.WriteLine(sw.GetStringBuilder().ToString());
// ['JSON!',1,true,{property:'value'}]

Json.NET - Json.NET Homepage

Getting into WinFX... sorry .NET 3.0

Beta 2 of WinFX was released a couple of weeks ago. Even though I've been quite excited about what Microsoft has been doing with WinFX, I've learn't to stear clear of Microsoft community previews and the beta 1 release. APIs are too volatile, there is little support out on the web for when you run into problems (which you will) and chances are that even when a more stable version does get released something from a previous version will cause problems. CTP Madness indeed.

Strangely, even before I'd managed to install WinFX it ceased to exist. A name changed was announced, with WinFX now a part of .NET. Although there has been much nashing of teeth and rendering of clothing both from the usual suspects and some Microsoft developers, I believe the name change was a good move. One name are one download will be less confusing for users and to most developers. All they need to know is that to run or develop an application they need a specific version of .NET. Having to worry about X version of .NET, Y version of WinFX, plus whatever else comes out in the next couple of years is too much for most and really, 99% of the public don't need to know. One download, one name. KISS.

Back on task; first .NET 3.0 impression:

Hmmm, this may take a while.

Preventing Spam With An ASP.NET CAPTCHA Control

The source and dll for the project can be downloaded here: CaptchaControl.zip About A CAPTCHA image displays text that is readable to humans, but not to computers. The concept is useful because it provides a means to filter out automated programs while allowing real users to pass through. Bots for example, which spam comments on weblogs and other dynamic websites, are a fairly pervasive problem and even a regularly new and low traffic blog like this was getting dozens of spam comments every day. CAPTCHA is a means to stop them while still allowing real users to post.CaptchaControl is an ASP.NET server control that is designed to start working by just being dropping onto the page, without any modification. This version is based off Michael Trefry’s implementation, which is in turn based off Dan Burke’s. My update fixes a couple of issues around storing the code in a browser cookie and adds features like client validation. CatchaControl OverviewThe CaptchaControl class is a composite control and encapsulates the CAPTCHA image, a textbox for capturing the result and a validator for verifying the correct code was entered. It handles hooking all the controls together, pointing the image src towards the image handler and maintaining the state of the code, which is stored encrypted in a hidden form field and then decrypted on postback.

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
 
    RegenerateCode();
 
    Page.ClientScript.RegisterHiddenField(ClientID + "__hidden", _encryptedCode);
    Page.RegisterRequiresPostBack(this);
 
    SetChildProperties();
}
 
bool IPostBackDataHandler.LoadPostData(string postDataKey, NameValueCollection postCollection)
{
    _encryptedCode = postCollection[ClientID + "__hidden"];
    _code = Encryptor.Decrypt(_encryptedCode, GetKey(), GetIV());
 
    return true;
}

CaptchaControl has a number of properties for modifying its behavior such as the text of the error message, whether to display for authenticated users and whether the code should be validated on the client with JavaScript (note that the unencrypted code will be included with the page if this is enabled). It also an optional LayoutTemplate property of ITemplate that allows the encapsulated controls layout to be customized.Generating the CAPTCHA ImageThe CAPTCHA image is generated by CaptchaHandler, a HttpModule. Parameters in the querystring, including the encrypted code data, are passed to a class than handles generating the image, which is then rendered to the response.

void IHttpHandler.ProcessRequest(HttpContext context)
{
    HttpRequest request = context.Request;
    HttpResponse response = context.Response;
 
    string encryptedCode = request.QueryString["code"];
    string code = Encryptor.Decrypt(encryptedCode, CaptchaControl.GetKey(), CaptchaControl.GetIV());
 
    int width = Convert.ToInt32(request.QueryString["width"]);
    int height = Convert.ToInt32(request.QueryString["height"]);
 
    CaptchaImageGenerator captchaImage = new CaptchaImageGenerator(code, width, height);
 
    response.Clear();
    response.ContentType = "img/jpeg";
    response.Cache.SetCacheability(HttpCacheability.NoCache);
 
    captchaImage.RenderImage(response.OutputStream);
}

UsageRegister the CaptchaHandler by adding the following to your web.config’s httpModule element.

<addverb="*"path="captchahandler.axd"type="Newtonsoft.CaptchaControl.CaptchaHandler, Newtonsoft.CaptchaControl"/>

To add the CaptchaControl to a page simply place it where you want it to be displayed:

<%@ Register TagPrefix="ncc" Namespace="Newtonsoft.CaptchaControl" Assembly="Newtonsoft.CaptchaControl" %>
 
<ncc:CaptchaControl runat="server" ID="CaptchaControl" />

The IsValid property on the page will automatically be set when the page’s validators, including CaptchaControl, are evaluated on postback.

private void btnSubmit_Click(object sender, EventArgs e)
{
    if (IsValid)
    {
        // logic
    }
}

The important question: Does it work? Since adding CAPTCHA validation to this blog comment spam has dropped from dozens each day to zero.The source and dll for the project can be downloaded here: CaptchaControl.zip

Logging JavaScript Errors To ASP.NET

Over the past few years a huge jump in the complexity of JavaScript has occured on the browser, resulting in richer, more responsive and user friendly web applications. Unfortunatly this shift does not come without cost.Greater complexity on the client means more room for bugs, and without some effective means to log them you are left in the dark about problems until users are driven to complain.Solution OverviewThe client exception logger comprises of three parts: a script on the client that catches the exceptions and sends them to the server, a HttpHandler on the server that receives the error details and logs them, and an ASP.NET control that links the two together.Details logged include the following:

  • JavaScript exception message, line and file name
  • Date and time
  • IP Address
  • User agent (browser and platform details)
  • Session ID

Catching and Sending the Error on the Client Whenever an exception is not caught in JavaScript it triggers an onerror event on the browser's window object. It is comparable to ASP.NET’s Application_Error event in the global.asax.When the page is downloaded a ClientLogger object is created and a function is attached to the onerror event. That function calls a method on ClientLogger object which will send the error details to ASP.NET on the server using the XMLHttpRequest object. This is done asynchronously and does not effect the user.

var logger = new ClientLogger({handlerUrl:'../../ClientLogger.axd',sessionID:'2rnbawbkzuovsw55ymvflz45'});
window.onerror = function(message, url, line) { logger.Log(message, url, line); };

Receiving and Logging the Error on the Server When sending the error data back to the server, rather than the page calling back to itself, the logger posts the details a custom HttpHandler. This is done to minimize side effects or performance issues of creating the page again.Note that the handler does not contain any logic for logging the error details. Instead it uses the new ASP.NET 2.0 Web Event feature, and raises a custom WebJavaScriptErrorEvent event.

WebBaseEvent.Raise(new WebJavaScriptErrorEvent(jsMessage, this, jsUrl, jsLine, pageUrl, userAgent, sessionID));

Packaging Everything Together in a Control The ASP.NET control includes the JavaScript file (embedded in the dll) on the page and registers some JavaScript that creates the client object and attaches it to the onerror event. To enable JavaScript error logging include the control on your master page:

<%@ Register TagPrefix="ncl" Namespace="Newtonsoft.ClientLogger" Assembly="Newtonsoft.ClientLogger" %>
<ncl:ClientLogger runat="server" />

And register the HttpHandler in the web.config:

<addverb="*"path="clientlogger.axd"type="Newtonsoft.ClientLogger.ClientLoggerHandler, Newtonsoft.ClientLogger"/>

Consuming The Web EventThe great thing about ASP.NET Web Events is that you can decide how you want to log the event, and it is simple as modifying your web application's web.config file. For example in just a few lines you can configure ASP.NET to log all errors to your database or send them to an email address. The rule below for example will log all errors to the database. You can learn more about using ASP.NET Web Events here.

<addname="SqlServerWebErrorLogger"
    eventName="All Errors"
    provider="SqlWebEventProvider"/>

And that's it. You will now know about JavaScript errors as they happen.The source and dll for the project can be downloaded here: ClientLogger.zip