Click here to Skip to main content
Click here to Skip to main content

Pass a Name Value Pair Collection to JavaScript

, 8 Aug 2011
Rate this:
Please Sign up or sign in to vote.
Clean up the script hell in your projects.

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


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 JavaScript from 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
        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.

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.

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

    /// <span class="code-SummaryComment"><summary>
</span>    /// Registers all the key/values as an options script for access in the client.
    /// <span class="code-SummaryComment"></summary>
</span>    /// <span class="code-SummaryComment"><param name="page">The page</param>
</span>    /// <span class="code-SummaryComment"><param name="optionsName">Name of the options object</param>
</span>    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])));
                              optionsName, script.ToString(), true);


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) Storm Technology Ltd.
Ireland Ireland
Formerly a C++ client developer, nowadays I’m all about C# and ASP.NET. I work for a consulting firm which specializes in .NET technologies. Over the years I have mastered some and played with many aspects of .NET.
Follow my blog as I catalogue the more arcane problems I encounter and their solutions at

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 8 Aug 2011
Article Copyright 2011 by Chris_Green
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid