Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Ajax Life Cycle 2 - Exploring Microsoft ASP.NET Ajax Server and Client Controls - Lesson 4 | .net courses

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).

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.

Video Transcription

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?

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 talking client side so I'm talking Javascript. Right? So I'm going to go 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 Javascript and that will be the script. This is where I'm going to put all 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 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.

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 in here putting everything within the script text Javascript and that's 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.



Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login