Adding multiple .NET User Controls that use JavaScript to the same page

The Background

Recently I was faced with the task of taking some existing VB.NET code and converting it to C#. Not so difficult so far you’ll say, and you’d be right. However, some of the code on this particular page was contained within a User Control which contained two lists of check boxes in two different categories, which for each category, when a check box item was clicked, was transferred via JavaScript to another (text) list for that category and the selected checkbox removed from the appropriate checkbox list.

Since the actions for both sets of check box lists and text lists was exactly the same, only the contents were different, it made sense to have only the one list of check box items and text list within the User Control, and simply alter the contents depending on what category it was. The different categories were also now going to be on separate tabs rather than grouped together anyway, so it made even more sense to do it this way.

The Problem

The main issue I came across was the fact that the User Control made heavy use of JavaScript (for transferring the selected check box items to the text list). With more than one instance of the User Control on the page, naturally just including a copy of the external JavaScript file was not going to work, as anything in the User Control instance defined first would simply be overwritten by the User Control defined second. So each User Control instance required it’s own instance of the JavaScript code, and this means creating an object for each instance. I will show you how this is done.

The User Control

(The contents of the User Control that I actually created are not important here. I am assuming, that as a .NET developer, you will be aware of how to create and add code to a User Control)

At the end of the .ascx file of the User Control, we add code to include the external JavaScript file:

<script type="text/javascript" src="js/category_list.js"></script>

Followed by the declaration of the JavaScript object:

<script type="text/javascript">
&nbsp;&nbsp;var <%= this.ClientID %>CatListObj = new CategoryList(&#039;<%= this.ClientID %>&#039;);
&nbsp;&nbsp;<%= this.ClientID %>CatListObj.init();
</script>

As you can see, within the constructor, we have also passed the client Id as a parameter, and then called the init() method on the object.

The JavaScript file, category_list.js is defined as follows:

function CategoryList(client_id_in) {
&nbsp;&nbsp;var client_id = client_id_in; // set internal variable
&nbsp;&nbsp;this.init = function() {
&nbsp;&nbsp;&nbsp;&nbsp;// initialise code here
&nbsp;&nbsp;}
&nbsp;&nbsp;// other code here
}

Each instance of the User Control will now create it’s own instance of the JavaScript object.

The Calling Page

In order to add two instances of this User Control to the calling .aspx page, we must first of all let the page know about the User Control’s existence, which is achieved by adding the following code to the top of the page:

<%@ Register TagPrefix="MY_IDENTIFIER" TagName="CategoryList" Src="category_list.ascx" %>

We then add the following code (ignoring the tabs, as they are superfluous to this example):

<div>
&nbsp;&nbsp;<MY_IDENTIFIER:CategoryList id="CategoryListA" runat="server" />
</div>
<div>
<MY_IDENTIFIER:CategoryList id="CategoryListB" runat="server" />
</div>

And that’s it really. Hope this helps you in some way, and if not, any suggestions are welcome.