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
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?
So, let's copy this, but not async. Let's copy that and that will be for
the text. I didn't mean to bold that. Let's go ahead and double click
here. That will be the actual text, get a client life cycle. OK? So now
I have get client life cycle, and get client life cycle async. That's as
far as the button inside the content template, inside the update panel, and
a button outside the update panel. Go ahead and save. I don't want to do
anything in the code behind, by the way. Everything is happening on the
client side. I'm going to put everything on the ASPX page. Now, I'm
inside here, after the body I'm going to drop a script element. And for
that script element I'm going to, of course, make the type equal text
my code. OK? So that's for the script after the body.
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
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.
So, we have those three events already happened without clicking anything.
Let's right click and clear the console. Nothing in here. Click on create
client life cycle. Right? This is with nothing. This is outside the
update panel. Click on that button. You notice this is the same thing
that happened when we loaded the page, which makes sense, right? I'm just
loading, reloading the page, as I just did earlier, but in this case I
click the button. It called application init, application load, and page
request manager page load. Let's leave the console, and now click on the
async one. On the async one, you'll notice while the init of the page
already happened, so it doesn't happen again. But you get the page request
manager. For initialize request for the begin request the page loading,
page already loaded, and then the application loaded and the page request
manager end request. OK? So this is very important that you distinguish
between Sys.Application and Sys.Webforms that page request manager and
understand the events as they're happening. And again, in here we're not
talking server side, we're talking client side, and that's why you see me
where we added everything, OK? So I hope this discussion of second portion
of page life cycle which happens on the client side has been helpful to
you. Please let us know on the Mr. Bool website if you have any questions
or concerns. Thank you very much for listening. I'm Ayad Boudiab, and you
have a good day.