Question

We have created a User Control for ASP.Net. At any one time, a user’s profile page could contain between one and infinity of these controls. The Control.ascx file contains quite a bit of javascript. When the control is rendered by .Net to HTML, you notice that it prints the javascript for each control.

This was expected. I’d like to reduce the amount of HTML output by the server to increase page load times. Normally, you could just move the javascript to an external file and then you only need one extra HTTP request which will serve for all controls.

But what about instances in the javascript where we have something like

document.getElementById('<%= txtTextBox.ClientID %>');

How would the javascript know which user control work with? Has anyone done something like this, or is the solution staring me in the face?

Answer 1

Here was the solution:

• Create the external javascript file and copy all code over to it.
• For each element in the usercontrol that needs to be referenced by the javascript, create a new Object.
• Back in the usercontrol’s ascx file, take each usercontrol’s id and make it a member of the Object and make this member’s value equal the id of the element in the usercontrol to which the Object refers. Do this onload.
• Now, in each function, find the actual element you want by getting this ID out of the Object, using your control’s ID as a key.

My actual full-on solution was a little different. Each usercontrol contained a telerik radgrid. The client-side event handlers for the radgrid are of the form

radGrid_eventOccurred(sender, args) {

where sender is the grid object.

So instead of using the usercontrols ID as the key in my code, I used the grid.

Say I need to update a textbox inside the usercontrol whenever I click on a row in the grid. I can now do something like this:

function radGrid_rowClick(sender, args) {
    var text = /*Get the text of the clicked row*/;

    var textBox = textBoxesObject[sender];
    textBox.set_value(text);
}