Coding Lifestyle

Pass a Name Value Pair Collection to JavaScript August 8, 2011

In my crusade against in-line code I am endevouring to clean up the script hell in my current project. My javascript is littered these types of statements:

var hid = <%=hidSelectedItems.ClientId%>;
var msg = <%=GetResourceString('lblTooManyItems')%>;

Part of the cleanup is to minimize script on the page and instead use a separate .js file. This encourages me to write static functions which take in ids and resources as parameters, allows for easier script debugging, and removes all in-line code making maintenance or future refactoring easier.

While moving code to a proper .js file is nice there are times we might miss the in-line goodness. Never fear, we can build a JavaScript object containing properties for anything we might need with ease. This equates to passing a name/value pair collection to the JavaScript from the code behind. Take a look at this example:

    ScriptOptions options = new ScriptOptions();
    options.Add("ok", GetResourceString("btnOK"));
    options.Add("oksave", GetResourceString("btnOkSave"));
    options.Add("cancel", GetResourceString("btnCancel"));
    options.Add("viewTitle", GetResourceString("lblAddressEditorView"));
    options.Add("editTitle", GetResourceString("lblAddressEditorEdit"));
    options.Add("createTitle", GetResourceString("lblAddressEditorCreate"));
    options.RegisterOptionsScript(this, "_OptionsAddressEditorResources");

Here we’re using the ScriptOptions class to create an object called _OptionsAddressEditorResources we can access in our script. Now let’s see these options in use:

function fnAddressEditDialog(address, args) {
    //Define the buttons and events
    var buttonList = {};
    buttonList[_OptionsAddressEditorResources.ok]     = function() { return fnAddressEditOnOk(jQuery(this), args); };
    buttonList[_OptionsAddressEditorResources.oksave] = function() { return fnAddressEditOnOkSave(jQuery(this), args); };
    buttonList[_OptionsAddressEditorResources.cancel] = function() { jQuery(this).dialog("close"); };

    //Display the dialog
    jQuery("#addressEditorDialog").dialog({
        title: _OptionsAddressEditorResources.editTitle,
        modal: true,
        width: 535,
        resizable: false,
        buttons: buttonList
    });
}

Above we see the jQuery dialog using the resources contained within the _OptionsAddressEditorResources object.

So this seems simple but pretty powerful. Below is the ScriptOptions class which simply extends a Dictionary and writes out the script creating a named global object. Good luck cleaning up your script hell. Hopefully this will help.

    /// <summary>
    /// Class for generating javascript option arrays
    /// </summary>
    public class ScriptOptions : Dictionary<string, string>
    {
        /// <summary>
        /// Adds the control id to the options script
        /// </summary>
        /// <param name="control">The control.</param>
        public void AddControlId(WebControl control)
        {
            this.Add(control.ID, control.ClientID);
        }

        /// <summary>
        /// Registers all the key/values as an options script for access in the client.
        /// </summary>
        /// <param name="page">The page</param>
        /// <param name="optionsName">Name of the options object</param>
        public void RegisterOptionsScript(Page page, string optionsName)
        {
            if (!page.ClientScript.IsStartupScriptRegistered(page.GetType(), optionsName))
            {
                StringBuilder script = new StringBuilder(string.Format("var {0} = new Object();", optionsName));
                this.Keys.ToList().ForEach(key => script.Append(string.Format("{0}.{1}='{2}';", optionsName, key, this[key])));
                page.ClientScript.RegisterStartupScript(page.GetType(), optionsName, script.ToString(), true);
            } 
        }
    }