Click here to Skip to main content
12,896,517 members (75,237 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked
Posted 8 Aug 2011

Pass a Name Value Pair Collection to JavaScript

, 8 Aug 2011 CPOL
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.

/// <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])));
                              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

Architect Avaya Inc.
Ireland Ireland
Formerly a C++ client developer, nowadays I'm all about C# and ASP.NET. 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

You may also be interested in...

Comments and Discussions

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