Question

Currently I’m developing a dashboard for the company that I’m working for. The functionality of this dashboard is not interesting for this problem. This dashboard is build up like:

• Asp.net page (with a codebehind ofcourse)
• Class where webmethods are defined
• Javascript external file (with all the funcitonality of the dashboard, this dashboard works fully clientside)

For the rest I’m working with Visual Studio 2010 Ultimate with a TFS (team foundation server) environment and we make use of the jQuery library and .NET framework 4.0 (C#).

Alright, with that information i hope i can explain my problem. The external javascript file contains three classes. I will name them now ClassMain, ClassSub1, ClassSub2. The classes ClassSub1 and ClassSub2 are derived from ClassMain by doing the following javascript command:

ClassSub1 = new ClassMain();

After this instantiation of the ClassMain other properties and methods of ClassSub1 are loaded. The ClassMain can communicate with the properties and methods of ClassSub1 and ClassSub1 can communicate with ClassMain. So this means that they act like one big class with all kinds of functionality.

I explain this because i think my problem lays here but I’m not sure about it. The classes ClassSub1 and ClassSub2 are getting instantiated in the codebehind of the asp.net page. The following snippet explains it:

StringBuilder javascriptBlockBuilder = new StringBuilder();

javascriptBlockBuilder.AppendFormat("var {0};", this.Id);
javascriptBlockBuilder.AppendFormat("Sys.Application.add_load({0}LoadHandler);", this.Id);
javascriptBlockBuilder.AppendFormat("function {0}LoadHandler() {1}", this.Id, "{");
javascriptBlockBuilder.AppendFormat("{0} = new ClassSub1('{0}');{1}", this.Id, "}");

javascriptBlockBuilder.AppendFormat("var {0};", this.OtherId);
javascriptBlockBuilder.AppendFormat("Sys.Application.add_load({0}LoadHandler);", this.OtherId);
javascriptBlockBuilder.AppendFormat("function {0}LoadHandler() {1}", this.OtherId, "{");
javascriptBlockBuilder.AppendFormat("{0} = new SubClass2('{0}');{1}", this.OtherId, "}");

Page.ClientScript.RegisterStartupScript(this.GetType(), "ClassInitialization", javascriptBlockBuilder.ToString(), true);

In this snippet I create a global variable on the page and assign that class to it. The ClassMain gets the same id as ClassSub1 and ClassSub2 so that they make use of the same variable because like i said a few lines up these classes must act as one class (ClassMain and the ClassSub).

This works also but here comes also the problem. Before executing the above snippet (or after) i have some statements like this:

this.myButton.Attributes.Add("onclick", string.Format("{0}.myJavascriptFunctionality();", this.id));

The functionality gets attached to divisions, buttons, etc.

Ok, now I’m going to render my page and the page loads perfectly, but when I click one of the buttons, divisions, etc. Is it telling me that it requires an object. Somehow my global variables with the ClassSub1 and ClassSub2 are lost and now it can’t execute my JavaScript commands.

So my question is, how is it happened that my variables are lost? I hope that my explanation is enough to understand.

Answer 1

I have found an solution for my problem. The problem occured that my references between the two classes (ClassMain and ClassSub) are referencing to the same variable which results in an error that javascript cannot handle. What did I do to fix this problem?

I have found the answer on this page:

http://www.cristiandarie.ro/asp-ajax/JavaScriptPrototypeInheritance.html

ClassSub1.prototype = ClassMain;
ClassSub1.prototype.constructor = ClassSub1;

And during my construction of the object I did the following call:

ClassMain.call(this, id);

Where ‘this’ is my current class and I pass an ‘id’ so that i can reference then to my mainobject.