Shared Client and Server configuration with custom ActionResult – Solving it in a DRY way

I’m developing a MVC application and there are some configurations I want to use both on client and server side but I don’t want to replicate them, I want it be DRY (Don’t Repeat Yourself). Having it gives me the hability of changing some value on both sides without deploying the application again.

I could have created my properties in my AppSettings section and then print the variables on a page, but the AppSettings would become huge and the page header a mess.

Here is the solution I end up with. I created a JSON file containing my propeties, like so:

common.json

{
	"highlightProductId": 5,
	"bannerEnabled": false,
	"passwordLength": 15,
	"adURL": "http://google.com/ad"
}

That allows me to use the Newtonsoft or any other JavaScript parser like the JavaScriptDeserializer from .Net and have that JSON as a class. You can also deserialize it as “dynamic” if you are using the Newtonsoft library.

Well, that solves the problem for the server side. The client side though would have to call jQuery.getJSON to be able to read that file but that slows the page loading down and doesn’t give the user a nice experience because the user has to wait until the ajax call gets finished, so it can continue processing the rest of the script.

What I did was to turn that JSON into a JS file. To do that, you just have to assign that JSON to a variable and then you can embed the result in the page as a JavaScript file!

var common = { };

That is a valid JS file!

Now let’s teach MVC how to do that. Create the file below:

namespace System.Web.Mvc
{
    using System;

    public class JsonToJavaScriptResult : ActionResult
    {
        public string Prefix { get; private set; }
        public string JsonFile { get; set; }

        public JsonToJavaScriptResult(string prefix, string jsonFile)
        {
            JsonFile = jsonFile;
            Prefix = prefix;
        }

        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
            {
                throw new ArgumentNullException("context");
            }

            HttpResponseBase response = context.HttpContext.Response;
            response.ContentType = "application/x-javascript";

            response.Write(Prefix);            
            response.WriteFile(JsonFile);
        }
    }
}

There we are creating a custom ActionResult that concatenates the prefix – which are the part that will hold our variable name – with the content of the file – our JSON – and writes it all to the page buffer.

Now let’s make our Controller that will use the newly created class.

    public class SharedController : Controller
    {        
        //
        // GET: /Shared/Script

        public JsonToJavaScriptResult Script()
        {
            const string fileName = "common.json"
            const string prefix = "var Shared = ";
            var jsonFile = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);

            return new JsonToJavaScriptResult(prefix, jsonFile);
        }
    }

The last step is just insert the script tag in your page that will embed our code.

<script src="@Url.Action("Script", "Shared")" type="application/x-javascript"></script>

and you can do something like that

<script type="text/javascript">
  alert(Shared.highlightProductId);
</script>

Any new ideas or improvements are welcome.

21 Things I learned from the jQuery Source

I know I’ve been posting only videos lately but this one deserves to be here too and I really don’t think videos are bad. Instead of reading and just listen to your mind you can watch the person talking, acting and see their personality.

In this two videos, the astonish Paul Irish tells us 10 things he learned from the jQuery Source and then 11 more things he learned from it. At first, when we look at the jQuery Source it looks scary and huge, but Paul Irish diggs in it and shows us that we can learn many things straight from the source, instead of looking for docs on the internet.

I personally already did this long time ago and I recommend to do it. It’s really like a wiki of javascript codes.

and here is the other

Click here to see the post in his blog.

jQuery Templates, Data Link, and Globalization Accepted as Official jQuery Plugins

Stephen Walther from the ASP.NET Team joins James Senior (@jsenior) on Web Camps TV to discuss an exciting announcement: Microsoft is making their first contributions to the jQuery open source project!
In the past 6 months, they’ve been busy working on three features:

1. Templating
2. Data-Linking
3. Globalization

In this video, they show demos of the contributions in action, take a look:

Focus doesn’t work on IE

I’m documenting this cause i took me a long while to solve it. For some reason, i don’t know why, my input field couldn’t get focused. Here is the code similar of the one i was using:

myInput = document.getElementById("selected");
myInput.focus();

My solution was to add the select() method after i call the focus(), like this:

myInput.focus().select();

I hope it can help people with the same problem.