ASP.NET WebForms: How to access Javascript in invisible, non-rendered after it's made visible via UpdatePanel?

Question

I know this seems impractical, but I really prefer to do it this way due to how I am rearchitecting this WebForms page to satisfy an urgent, last-minute business requirement.

I have a custom usercontrol. In this usercontrol is a Javascript block that contains functions that are wired up to various controls' onclick and onchange events. Before, the control's .Visible property has been True, so its HTML and Javascript would render on the page.

Now I need to set my control's .Visible property to false and wrap an UpdatePanel around it. Doing this prevents the control's HTML from rendering during the initial page load. To show the contents of the control, the user has to click a button which hits a serverside method that sets the control's .Visible property to true. Since it's now in an UpdatePanel, the control appears on the page in a sort of Ajaxy way. However, it appears that the Javascript located in the control is not accessible, so none of the child controls' onclick and onchange events are working because their associate Javascript functions are undefined.

Solutions that I prefer not to utilize for reasons that are too complex to go into for the sake of brevity:

• JSON/AJAX (too much rearchitecture involved in such short time)
• CSS display:none/visibility:visible (I need to preserve as much serverside functionality as I can to minimize rearchitecture)
• Put Javascript in parent page or in a .js file (I will consider this as a last resort, but I reference server controls using <#%=ControlId.ClientID %>. You can't do this if the Javascript is not contained within the UserControl and I don't want to set the controls' ClientIdMode to static.)

I'd really like to find a way to keep the Javascript in my UserControl in such a way that it is accessible to the client when an UpdatePanel sets the control's .Visible property to true by use of an UpdatePanel.

Answer 1

The easiest way to do so would be to include the javascript as a large string in the code behind and register it on load:

        protected void Page_Load(object sender, EventArgs e)
        {
            string javasriptToRegister = @"
  function MyAwesomeJavaScriptFunction() {
     alert( document.getElementById('" + this.txtCatName.ClientID + @"').value );
  }";
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyControlsJavaScript", javasriptToRegister, true);
        }

This is by no means the cleanest way to get it done, but it will work.

If you want to do it a little bit cleaner, you may want to include an external javascript file with either a singleton or a prototyped object representing your control (depending on your usecase). You can then set properties of the object/singleton to your client ID's in a smaller script included as we've done above. For example:

Javascript:

function MyControlScriptModel() {
  this.txtCatNameClientId = '';
  this.othercontainedValue = 0;
  this.anothercontainedValue = 0;
}

MyControlScriptModel.prototype.DoSomethingWithCatName = function () {
  alert( document.getElementById( this.txtCatNameClientId ).value );
}

Code behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            string javasriptToRegister = string.Format(@"var obj = new MyControlScriptModel();
                                                         obj.txtCatNameClientId = '{0}';", this.txtCatNameClientId);
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyControlsJavaScript", javasriptToRegister, true);
        }