1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Minify Json using JSON.NET

25/09/2014

In my current project I'm using Json stored in the SQL Server database to replicate the storage capability of the browser Session but allowing the data to persist on the user reloading/leaving the page.

One of the challenges is to store the serialized object in as few characters as possible while preserving meaning.

Without touching the settings, Json.Net stores the strings without extraneous whitespace, but even serializing a fairly small aggregate object can use a lot of characters.This post details a couple of the features I've used to minimise the number of characters.

Store Booleans as Integers in Json

JSON.NET supports custom conversions using a class which inherits from JsonConverter:

public class BooleanConverter : JsonConverter
{
    public override bool CanConvert(Type objectType)
    {
        return typeof(bool).IsAssignableFrom(objectType);
    }

    public override void WriteJson(JsonWriter writer,
        object value, JsonSerializer serializer)
    {
        bool? source = value as bool?;
        if (source == null) { return; }

        int valueAsInt = ((bool)source) ? 1 : 0;

        writer.WriteValue(valueAsInt);
    }

    public override object ReadJson(JsonReader reader, Type objectType,
        object existingValue, JsonSerializer serializer)
    {
        bool returnValue = (Convert.ToInt32(reader.Value) == 1);

        return returnValue;
    }
}

This converter will store booleans as 1 and 0 rather than true and false; this saves 3 and 4 characters respectively.

Shorten Field and Property Names

By using the built in [JsonProperty("Name")] we can save space in the serialized object. If we define one letter aliases for our properties we save a lot of space, especially when serializing an array of objects:

[JsonProperty("b")]
public bool IsAThing { get; set; } 

If the full object has IsAThing = false the string representing the serialized object stores this as "b":0 which is the shortest representation possible (unless you set the default value to false and only serialize where the boolean value is true).

Serializing an HtmlString

This isn't a space saving tip but where you need HtmlStrings to be serialized and deserialized you can use the converter below:

...

Simple Introduction to MVC Ajax (Post 3)

16/09/2014

Now we have partial views loading forms using Ajax and we can call controller methods using Ajax it's time to put everything together.

A picture of a cat.

We're going to start with a blank scenario to make it easier to follow. This makes this a very long post but it puts together everything we learned.

Code files

I managed to coerce PHP into creating a new route on my website. You can see the full code for the classes/views in this demo as follows:

...

Simple Introduction to MVC Ajax (Post 2)

14/09/2014

So far we have seen how to add a very simple ActionLink and attach actions. Now let's load a PartialView using Ajax. Also we want to load a partial view with a different model into our page.

Getting a Partial View using ActionLink

We're going to deal with an object a Dog could "own", so we create a collar class. Let's accessorize our dog with some fabulous collars / add an ActionLink to the Dog/Details view (Details.cshtml):

@Ajax.ActionLink(linkText: "Call An Action Returning a partial view",
    actionName: "GetCollarCreate",
    routeValues: new { id = @Model.Id },
    ajaxOptions: new AjaxOptions
    {
        UpdateTargetId = "ajaxpartialtarget",
        InsertionMode = InsertionMode.Replace
    })
<div id="ajaxpartialtarget"></div>

We can pass the Id of the dog in using RouteValues as normal. The InsertionMode.Replace is default so doesn't need to be defined explicitly, I'm just doing it because it doesn't hurt to be reminded. This ActionLink calls the following method on the Dog Controller (DogController.cs):

public ActionResult GetCollarCreate(int id){
    return RedirectToAction(actionName: "_Create", 
        controllerName: "Collar", 
        routeValues: new { id });
}

This then directs us to an action on our Collar Controller class (CollarController.cs):

[HttpGet]
public PartialViewResult _Create(int id){
    Collar collar = new Collar { DogId = id };
    return PartialView(viewName: "_Create", model: collar);
}

Where our collar is a simple view model:

public class Collar
{
    public int DogId { get; set; }

    public string Color { get; set; }

    public bool HasTag { get; set; }
}

We will create a more detailed view in the next part but for now we have this simple view (Create.cshtml):

@model JunkCode.Collar
<div> Loaded the partial view for dog with Id = @Model.DogId </div>

When we build and run this we get the result we want, the view is loaded using an Ajax request, the dog woofs for joy:

...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17