Monday, March 26, 2012

How do I consume a JavaScript object on the main page in an ASCX control?

Hello,

I am using the ASP.Net AJAX client side libraries, and I want to be able to write Web User Controls (ASCX) that I dynamically load into my site. I want to be able to have a global object in my main page that is used by each ASCX control that is loaded into the page. As soon as the ASCX control is loaded, I want it run its script to call a method in the global object.

I am having a "timing problem" with my code. In order to use the ASP.Net AJAX libraries (like the "Type" object to register namespaces, etc.), I have placed the JavaScript on the main page in the "pageLoad" function.

Right now I am using the "setTimeout" function in my ASCX script to delay it a few seconds so I can be sure that the script in the main page has completely loaded before I make a call to the global object.

Is there any way that I can ensure that the script on the main page has loaded and stop using the "setTimeout" method in my ASCX script?

Here is the markup for my main page…

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="StartupScriptTest._Default" %>23<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>45<%@dotnet.itags.org. Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>67<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">89<html xmlns="http://www.w3.org/1999/xhtml" >10<head runat="server">11 <title>Untitled Page</title>12 <script type="text/javascript">1314 var x = null; // <- I want to access this in the ascx control after pageLoad is finished1516 function pageLoad()17 {18 Type.registerNamespace('MyNamespace');1920 MyNamespace.MyClass = function()21 {22 MyNamespace.MyClass.initializeBase(this);23 }2425 MyNamespace.MyClass.prototype =26 {27 sayHello : function(message)28 {29 alert(message);30 }31 }3233 MyNamespace.MyClass.registerClass("MyNamespace.MyClass");3435 x = new MyNamespace.MyClass();36 }3738</head>39<body>40 <form id="form1" runat="server">41 <div42"ToolkitScriptManager1" runat="server">43 </cc1:ToolkitScriptManager>44 </div>45 <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />46 </form>47</body>48</html>49

…and here is the markup for my ASCX control…

1<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="StartupScriptTest.WebUserControl1" %>2<script type="text/javascript">34 setTimeout('x.sayHello("hello")', 1000); // <- Any way to not use 'setTimeout'?56<> 

Thank you for your help,

Dave

hello.

i'll just enumerate the things i think that are important:

1. do you need to define the class in the load event? I think that you can put it outside, in an external file and load it so that it's available at the begining of the page

2. are you wrapping any html control or behavior that exists on the page? if not, then i think that you can also insert your x = new class() at the begining of the class declaration.


Hi restating what Luis has said, you gotto implement something like this.,

Create a .js file consider sample.js.

Put this code inside

Type.registerNamespace('MyNamespace');

MyNamespace.MyClass = function() { MyNamespace.MyClass.initializeBase(this); } MyNamespace.MyClass.prototype = { sayHello : function(message) { alert(message); } } if ( typeof (Sys) !== 'undefined' ) Sys.Application.notifyScriptLoaded();

register this sample.js in the scriptmanager.


<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="../../client_scripts/sample.js" />
</Scripts>
</asp:ScriptManager>

Then create the global variable inside your function. var x = new MyNamespace.MyClass();

No comments:

Post a Comment