Thursday, October 22, 2009

How to trigger some javascript (client-interaction) the very first time the page is requested in an ESRI .NET web ADF based web application?


Since the esri .net web adf is based on asp.net ajax we can leverage the client application and page lifecycle to trigger activities in different phases of the lifecycle. 
The below illustrates what happens during first page load, partial page postback, and browser close/moving away:
 A. During first initial page request: (1st time the page is loaded or refreshed)
APP_init
APP_load
APP_page_Load 

Notes: The init event of the Application instance is raised only one time for the life of the page in the browser. It is not raised for subsequent asynchronous postbacks. During an initial request, no PageRequestManager events are raised.
B. During Asynchronous postback (aka partial page postback, ajax request using asp.net ajax)
PRM_init_request
PRM_begin_request
WRM_invoking_request
WRM_completedRequest
PRM_page_loading
PRM_page_loaded
APP_load
PRM_end_request 

C. During browser close or browsing away from the page:
PRM_init_request
APP_unload

Where
APP = Sys.Application object
PRM = Sys.WebForms.PageRequestmanager
WRM = Sys.Net.WebRequestManager


1)       1) Create a file and place it  as follows: YourWebApp/javascript/ocgis.js
//contents of file
if (typeof myns== 'undefined') { myns = {}; }
myns.didOnce = false
myns.initAppEventHandler = function(sender) {
                myns.loadAppEventHandler();
}

myns.loadAppEventHandler = function(sender) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (!ocgis.didOnce) {
                    alert("TODO: initiate things and show panel using javascript....");
                    myns.didOnce = true;
                }
} 

2)       In the default.aspx page, Insert the below right before </body> , i.e. end of body tag
<script language="javascript" type="text/javascript" src="javascript/myns.js" ></script>
<script
language="javascript" type="text/javascript">
                Sys.Application.add_init(myns.initAppEventHandler);
                Sys.Application.add_load(myns.loadAppEventHandler);
</script>  


The diagram below does a great job of showing the events from the 3 main objects in a nice sequence diagram:

No comments:

Post a Comment