Wednesday, March 16, 2011

How do you handle attaching JavaScript to UserControls in ASP.NET and keep multiple instance isolated?

Lets say you need to attach some JavaScript functionality to an ASP.NET User Control of which there might be multiple instances on any given page. Because JavaScript has shared global state, what techniques can you use to keep the client state and behavior for each instance of a control separate?

From stackoverflow
  • Well, the main thing you can do is make sure your JavaScript functions are abstract enough that they are not coupled to specific instances of HTML controls - have them accept parameters that allow you to pass various instances of objects in.

    The JavaScript that does whatever magic you need to be done should only exist once in your page regardless of how many instances of a user control you have on a given page, thus your functions need to be ignorant of that fact.

    Without more information about what you are trying to do, there is little more I can offer in the way of help; it would depend on your circumstance.


    EDIT: One way I have dealt with particular aspects of this problem is to create a static property on the user control (thus it is the same variable across multiple instances) that tracks the client-side IDs of the various user control elements (the user control adds the client IDs to this list in the control's OnLoad event); then, in the page's OnPreRender event (IIRC), render those out in a JavaScript variable that my code knows to look for on the client and operate on. I don't know if that makes sense, but it might help someone...

  • function <%=this.ClientID %>_myButton_onclick()
    {
        DoSomething();
    }
    

    and

    <button id="myButton" onclick="<%=this.ClientID %>_myButton_onclick()">
    

    Notice in this case the control is a regular HTML control.

    Jason Bunting : The main problem with this code is that now we have a bunch of wrapper functions polluting the global namespace - there are other issues as well, such as the fact that this is too much like horrid, classic-ASP-like inline code... :) But that is just a matter of preference, it isn't too evil...
    Andrew Rollings : It may be ugly, but it answers the question... I prefer going with the 'make the javascript functions generic and pass in everything' approach, but for simple controls, this would work.
    John MacIntyre : @Jason, initially I approached this in the same manner in your answer. But like you, I encountered the problem of 'how do get associated controls. I thought about storing associated id's like you did, but felt the above approach is self contained, and obvious to maint. Developers.
    John MacIntyre : @Jason, The above code also makes it very easy to add and control js event handers, so instead of DoSomething(), you would have <%=this.Attributes["ControlClickEvent"]%>. I would expect the bulk of the code would be in an external js file ... this is simply an easy to maintain segway into it.
    Jason Bunting : I understand the trade offs and they are worth considering - however, the resulting pollution to the global namespace is, for me, worth avoiding. Not only that, but I really don't think the method I suggest is really harder to maintain. To each his own!
    John MacIntyre : @Jason, I actually agree with you more than you may think. Mostly, it's just a different tack.
    Jason Bunting : Sure, I grok what you are getting at. It's copacetic, man.

0 comments:

Post a Comment