{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
What goes to the client side for an AJAX Server Control?
Summary
With an AJAX Server control, some additional JavaScript is generated behind the scenes (in addition to the JS you write). This article looks at this generated JavaScript when an AJAX Server Control is used.
 
Table of Contents

The Project Set Up

Script Documents

Figure 1. The client files for AJAX Server Control

Figure 2. Enable the Script Debugging on the Browser

The Default.aspx

Standard HTML elements that make up the page

Code Listing 1. Standard HTML elements that make up the page

ViewState and PostBack Code

Code Listing 2. ViewState and PostBack Code

ASP.NET AJAX Code

Code Listing 3. Links to the Scripts

AJAX Server Control Code

Code Listing 4. Client-side code for AJAX Server Control

Code Listing 5. The $create global variable

The Script Files

MicrosoftAjax.debug.js / MicrosoftAjax.js

MicrosoftAjaxWebForms.debug.js / MicrosoftAjaxWebForms.js

ClientControl1.js

 

The Project Set Up

The following article talks about the C# and JavaScript code generated by Visual Studio when a new AJAX Server Control is created:

First ASP.NET AJAX Server Control with C# Explained

And the following article talks about setting up a test page for the above AJAX Server Control (i.e. how to use this control from an ASP.NET web page):

Using an AJAX Server Control from a web site

Now let’s run the above AJAX Server Control and see what JavaScript code is generated to support the underlying AJAX infrastructure.

Script Documents

When you start a debugging session in Visual Studio 2008 on a web site that has an AJAX Server Control, you will see several script documents in the Solution Explorer.

Figure 1. The client files for AJAX Server Control

Figure 1. The client files for AJAX Server Control

Under the Script Documents in Solution Explorer you can see various client-side documents sent to the browser by Visual Studio 2008. You might see localhost instead of Default.aspx (in this case the Default.aspx is explicitly typed in the browser window- for example: http://localhost:49643/TestSite/Default.aspx).

In order for these client-side script files to show up in the Solution Explorer, you need to turn on the Script Debugging in the browser. For Internet Explorer, use Tools-Internet Options menu to get to the Internet Options dialog box. Under the Advanced tab, clear the Disable script debugging entries.

Figure 2. Enable the Script Debugging on the Browser

Figure 2. Enable the Script Debugging on the Browser

Now let’s see how the client-side files look like.

The Default.aspx

The Default.aspx you see under Script Documents is the HTML sent to the browser. The contents of this file are not the same as the Default.aspx and Default.aspx.cs you see during the development time in the Solution Explorer. The one under Script Documents is generated by ASP.NET from the design-time page and the code-behind attached to it.

In this client-side Default.aspx file, you will see the following:

  • Standard HTML elements that make up the page
  • ViewState and PostBack Code
  • ASP.NET AJAX Code
  • AJAX Server Control Code

Let’s see what these various pieces consist of.

Standard HTML elements that make up the page

On the generated client-side Default.aspx page, you will see various standard HTML elements that make up the page. Depending on what you placed on the page, you might see plain text, input elements, tables, etc.

Code Listing 1. Standard HTML elements that make up the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">




</form>
</body>
</html>

ViewState and PostBack Code

This is the standard ASP.NET code that’s generated for “all” the aspx pages. A hidden input field called __VIEWSTATE contains the information about the values on the page so that server can understand what was there before on the page when it’s posted back. This value is of no relevance to the browser (it’s a hidden field and contains encoded value). To facilitate postback, some JavaScript is generated with the help of two hidden input elements __EVENTTARGET and __EVENTARGUMENT.

Code Listing 2. ViewState and PostBack Code

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTg5NDEwMDg3ZGTBQ7dYtolgGwh3of7L0gfydqzcCw==" />

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms[’form1’];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

ASP.NET AJAX Code

In order to provide the client-side capabilities, a whole bunch of JavaScript is sent to the browser. This JavaScript resides in various .js files. For example, the ASP.NET AJAX library is in files like MicrosoftAjaxWebForms.debug.js / MicrosoftAjaxWebForms.js and MicrosoftAjax.debug.js / MicrosoftAjax.js. You also have the JavaScript files that provide the client-side functionality for the AJAX Server Control you have created.

The Default.aspx file on the browser needs to know where to get all these files.

Code Listing 3. Links to the Scripts

<script src="/TestSite/WebResource.axd?d=zmyTrcheKfXXLIBrD_9pew2&t=633351004195084287" type="text/javascript">
</script>

<script src="/TestSite/ScriptResource.axd?d=HKeVdLxV_xGoKiN2Xy31K17WRc4Khpk5q5H0YXhPUx_CcpSl81&t=633311581655518313" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === ’undefined’) throw new Error(’ASP.NET Ajax client-side framework failed to load.’);
//]]>
</script>

<script src="/TestSite/ScriptResource.axd?d=HKeVdLxV_xGoKiN2Xy31K17WRc4Khphl0&t=633311581655518313" type="text/javascript">
</script>

<script src="/TestSite/ScriptResource.axd?d=OvOvlm9ettNwWoavK- 2&t=633455728134283580" type="text/javascript">
</script>

You can see a series of scripts loaded via the <script> tag. The source for the scripts are obtained via WebResource.axd and ScriptResource.axd.

AJAX Server Control Code

Finally, let’s see how our AJAX Server Control’s client side code looks like:

Code Listing 4. Client-side code for AJAX Server Control

<div>

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize(’ScriptManager1’, document.getElementById(’form1’));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

<span id="ServerControl11"></span>
    
</div>

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(AjaxServerControl1.ClientControl1, null, null, null, $get("ServerControl11"));
});
//]]>
</script>

The important piece of code here is $create. This is a JavaScript global variable, which is a shortcut for the Sys.Component.create function in the MicrosoftAjax.debug.js / MicrosoftAjax.js file (this is one of the main files of ASP.NET AJAX library).

Code Listing 5. The $create global variable

var $create = Sys.Component.create = function Sys$Component$create(type, properties, events, references, element) {
    /// <summary locid="M:J#Sys.Component.create" />
    /// <param name="type" type="Type"></param>
    /// <param name="properties" optional="true" mayBeNull="true"></param>
    /// <param name="events" optional="true" mayBeNull="true"></param>
    /// <param name="references" optional="true" mayBeNull="true"></param>
    /// <param name="element" domElement="true" optional="true" mayBeNull="true"></param>
    /// <returns type="Sys.UI.Component"></returns>



This $create method is used to create a client-side component, which is AjaxServerControl1.ClientControl1.

So, the entire $create line (shown below)

$create(AjaxServerControl1.ClientControl1, null, null, null, $get("ServerControl11"));

comes from the following lines placed in the Default.aspx and ClientControl1.js files during the design time:

Default.aspx (control on the design surface):
<cc1:ServerControl1 ID="ServerControl11" runat="server" />

ClientControl1.js (class in the JavaScript file):
AjaxServerControl1.ClientControl1.registerClass(’AjaxServerControl1.ClientControl1’, Sys.UI.Control);

The last parameter for $create is $get(“ServerControl1”), which gives the DOM element for this AJAX Server control ($get is the shortcut for the ubiquitous getElementById).

The Script Files

Now let’s take a quick look at the JavaScript files that have been sent to the client-side (browser) for the basic AJAX Server Control. These script files are sent via ScriptResource.axd.

MicrosoftAjax.debug.js / MicrosoftAjax.js

This JavaScript file is part of the ASP.NET AJAX Framework. This contains extensions to basic JavaScript functionality (extensions to Function, Error, Object, String, Boolean, Date, Number, RegExp, Array, etc.).

MicrosoftAjaxWebForms.debug.js / MicrosoftAjaxWebForms.js

This file contains the Sys.WebForms namespace. This contains the class PageRequestManager (works with ScriptManager).

ClientControl1.js

And finally, the JavaScript file that contains the client-side functionality for the AJAX Server Control. This file contains the JavaScript class named AjaxServerControl1.ClientControl1.

Bookmark and Share This

More Articles With Similar Tags
Google Suggest style autocomplete feature is readily available from the AutoCompleteExtender control from the AJAX Toolkit. This article shows how to use control with the data obtained from database.
icon-ajaxservercontrol-new-project.jpg
This article explains the various pieces of the code generated for beginning an AJAX Server Control. The class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences() are explained, among others.
icon-ajaxservercontrol-toolbox.jpg
This article talks about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also discussed.
This test has questions about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also included.
This is a test on the various pieces of the code generated for an AJAX Server Control. This includes the class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences().
About  Contact  Privacy Policy  Site Map