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:

ss.png

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

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])));
            page.ClientScript.RegisterStartupScript(page.GetType(), 
                              optionsName, script.ToString(), true);
        }
    }
}

License

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

Share

About the Author

Chris_Green
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 CodingLifestyle.com

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