Duration: 16 minutes
Summary: In this video, we continue our discussion of Ajax life cycle. We already talked about the life cycle on the server side and we found out that the same events are triggered as the ones in a normal page (with no Ajax). Today, we will talk about the page life cycle on the client side. We will intercept the events and see the order in which they get called. We will work with two objects: Sys.WebForms.PageRequestManager (which events happen in a page are tied to an UpdatePanel) and Sys.Application (which events in a page happen regardless of whether or not there is an UpdatePanel). For that reason we will create two buttons: one inside an UpdatePanel and one outside. Clicking the button will help us determine which events are triggered.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET Ajax and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, Ajax, ScriptManager, UpdatePanel, Load, Init, Unload, ContentTemplate, Button, Sys.WebForms.PageRequestManager, sys.Application, initializeRequest, beginRequest, endRequest, pageLoading, pageLoaded.
Welcome back everyone. This is Ayad Boudiab. I'm a Senior Dot Net application Developer, and we are continuing our Ajax discussion. That's ASP.net Ajax that's we're talking about. As I promised you in the previous video, two videos ago, I created a life cycle on the server side. So, what happens when you use Ajax but for the life cycle of the page on the server side? In today's video I'd like to discuss the life cycle on the client side.
When we talk about the life cycle we talk about the series of events it goes through, about initialization and rendering and loading and beginning a request and end requests, and things like that. So, that's the series of events that happen through the page when we use Ajax . That way you can hook into one of those events and then do the work that you're interested in. So, in that case, we'll create an update panel. Obviously we'll use our Script Manager on the page, right? Then we'll create an update panel that contains a button, and then a button outside the update panel. So, one button that triggers the full post back of the page to see what happens then, and then a button inside an update panel. So it can be triggered just as an async call and see what happens then. OK? So, let's go ahead and do that.
Let's first create a new page and let's call it life cycle 2. Right click on the website, add a new item. Call it life cycle 2. Here's the page. On the page I'm going to drop a Script Manager. Make sure that I'm inside here, form, drop a Script Manager. Then, inside the div I'm going to drop a update panel. So now I have an update panel and a Script Manager. Inside the update panel with go with a content template right? Inside the content template I'm going to drop a button. In the button I'm going to call this one BTN, get client life cycle async. OK. Run [inaudible 00:03:00] server. On the text, let's do the same thing. Take the BTN and get client life cycle async. OK? That takes care of the button inside the update panel. As I said at the beginning of the video, I need to drop another button outside the update panel. So here's outside the update panel. Go ahead and drop another button here. The button, let's call it get client life cycle, but not async, right?
Now, there are, when I work with the client side, there are two objects of interest in here. The first one is assisted application and the second one is Sys.WebForms, that page requests manage. When we're talking about Sys.WebForms, that page requests manager, that's the one that works with the update panel. So, the events, as far as this object are concerned, are tied to the update panel. When I talk about Sys.Application, we're talking about events that happen whether or not we have an update panel on the page. OK? So let's do this. The first thing is, we need to work with the events that have do to with the assisted application, and then we'll also work with the events that has to do with the Sys.WebForms that page requests manage. For the application we have three simple events. We have init, load, and unload. These are for the page. When we init the application then we'll create all the other events that have to do with the Sys.WebForms, as the page requests manage. OK? I know it sounds a little bit confusing, so let's go ahead and start with the code.
So, the first thing I'm going to start with is Sys.application. For that one I'm going to add, Intelisense is helping me here, at init, and this one, let's call it application init. OK? That's the event that gets triggered when we initialize that application. Again, what's the application is whether or not the events for this application is whether or not we have an update panel on the page, so they don't care about having an update panel. OK?
Now, how about creating another one for the manager which is the page request manager that has to do with the update panel. So let's call this one VAR manager = Sys.webforms. If you need Intelisense start with a capital S, Sys.webforms.page request manager. That's the one that I'm interested in. .get instance. Give me an instance of this object. So now I have an instance of the one that deals with an update panel. I get the manger and I tied one event that has to do with initializing the actual application, OK? So far so good. So, let's go ahead and create this function, that initializes the application, the overall application, right? So, function, take the name from here, that's the name of the function. Inside the body of this function I'm going to add all the manager events. So, when the application initializes, when the general application initializes, again, this one has to do with the whole events on the page. It doesn't matter about the update panel. This one does. So when I want the whole page initialized, or the whole application initialized, I need to add some events to the manager, OK? So manager.add initialize request. Here's the initialized request, right? See down here? Add initialize request and let's name this one manager_initialize request. I can take this, copy it, put it here. That's the one for initializing a request. Again, let's do that one more time. A few more times. Manager.add begin request. OK?
So that would also be manager_begin request. These functions, I have to implement them shortly, right? I'm just adding what functions I would like to use every time a certain event happens. Manager.add end request, right? When the request ends what do you want to do? End request, and this one would be Manager_end request. Now, a couple more. How about the loading of the page and loaded? Loading means the page is still loading and then loaded, it's done loading. Right? So, Manager.add_page loading. Right? This one would be Manager_page loading and then Manager.add and this case page loaded. So that would be manager_page loaded. OK? These are the functions that I want to implement. This, this, this, this, and that, right? Five functions.
But now that I have called this function that's going to call when the initialization happens, let's log this, so we can see it that's been happening. I can use system Sys.debug for that. Sys.debug.trace. That's the tracer, and in here, I can put whatever information I want. For example, I can say in this case application init. Application is initializing, OK? Now, down here I'm going to go ahead and implement all these functions. OK? So I can say function, and I'm going to put this. Underneath it I'm going to say function again. I'm going to put that. In here, function, and end request. Then loading, function, that's for the loading one. And then the loaded. OK? Again, for this one, I'd like to put the traces in. Right? So, in this case then, I'm going to use Sys.debug.trace. OK? So for the first one, which is the initialization of the request I'm going to put something like this. Sys.debug.trace, page request manager, initialize request. OK?
Then for this one I'm going to put begin request. Then, for this I'm going to put end request and replace them all three here, so I can fix them one at a time. So this one, begin request, this one, end request, this one page loading, and this one page loaded. By the way, understanding the life cycle is very important because you need to know which event is happening when so you can hook into that event and be able to add all the functionality that you're interested in. OK? So we added all the ones that have to do with we have initialization of the application, and then we have initialization of the request manager, the begin request and the end requests of the manager and they'll be page loading and page loaded of the manager. We still have a couple of events that I'd like to add. The one that I'd like to add over here is the one that has to do with the application page load and the application page unload. Remember, there's one for the request manager and there's one for the application. The one for the application is the one that gets triggered whether or not we have an update panel. They don't care about the update panel. They don't care about Ajax . They just always get triggered. So, let's add a function. Let's call it, this one is the name page load, and that's the name of it. We can change the name, and let's add system debug.trace in here. It says application load. OK?
Now, we get the load, we've got all the manager ones, how about the unload? So, let's copy this, maybe something over here. It doesn't matter where you put it, as long as it's the right name. Page unload. Page unload Sys.application, and it says in here, unload. So that's the trace, system debug.trace application unload. Let's go ahead and save that. So, this basically will show me at every event what's happening, right? It's going to write this to the trace. So, let's go ahead and preview that in the browser. It says get life cycle async and get client life cycle. Before I click on any of those, I don't want to click that, just the page loaded, right? Let's go ahead and click on the toolbox and go to the tools. I'm not sure if you see that on your window, but I'm going to Developer Tools. When I click Developer Tools it shows me that underneath here. You notice that three events already happened. The application init, right? And the application load. That's when we initialized the page and that's when it loaded and the page request manager, page loaded, again, has been called. Right? Because we have an update panel on the screen. So, on the page.