Duration: 23 minutes
Summary: In this video, we continue our discussion of Ajax. After we have talked about the ScriptManager and the UpdatePanel in the previous video, we need to illustrate a key point here which is that whether we are making a standard call or an Async call to the server, the page life cycle on the server is the same. We still go through the events PreInit, Init, Load, PreRender and Render. We illustrate this concept by capturing the events when the page load and when we click on a button and make an Async call. We notice that the calls are the same. Another concept that we need to illustrate is how to handle error messages when an Async call is made.
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, ArrayList, ScriptManager, UpdatePanel, IsInAsyncPostBack, EventArgs, Load, PreInit, Init, PreRender, AsyncPostBackError, AllowCustomErrorsRedirect, onasyncpostbackerror, ContentTemplate, Button, Sys.WebForms.PageRequestManager, get_error, set_errorHandled, innerHTML.
Welcome back everybody. I am Ayad Boudiab. I'm a Senior .Net Application Developer. We are continuing our discussion on Ajax. If you remember from the previous video, we discussed about Ajax, the concept of making asynchronous calls to the server, so we can update small portions of the page instead of refreshing the whole page. We said the concept is simple. It's about having a script manager and an update panel, and that's the portion that's going to hijack the call to the server and just refresh that specific portion where the update panel is. Now, there is something important that we need to understand as far as Ajax is concerned. The important part is that when you make a call to the server you have the page goes through a life cycle, right. We've got the pre-internet, the net, you get the load, you get the pre render, you get the rendered.
You get those events that happen on the server. We call them the life cycle of the page. Now, this life cycle is still the same when you make an Ajax call. If you make a standard call of course your still going through the same life cycle. And if you're making an Ajax call you are going through the life cycle again. I will try to illustrate that in this video, by showing the life cycle on the server side and the we'll go through the send video by showing the life cycle on the client side. By the way I borrowed those concepts from the Unleashed book, that explained them really clearly. The idea here then is what life cycle does this page go through. Let's illustrate that by creating a page and trying to catch some events and try to record those events, to see what kind of events are happening when we make that Ajax call. Let's right click on the project, add a new item, and let's call this one "life cycle one." Since we're going to go "life cycle two" as well. Click add. Now, I have the page with nothing on it, right. The two things that I always work with is the script manager and an update panel. I look at moving my toolbox and remember I'm here inside the dev, right.
Go to my toolbox and look for Ajax. I want a script manager and I want a update panel. Right. Going back here inside dev. I don't have to have this one inside the dev, I just need to make my code a little bit clear. We can put this right underneath the form here. Because I just need to have that script manager on the page. I'm not dealing with it right now. I'll do that in a little bit later, because I need to explain about the error messages that happen and how we can deal with them. But for now all that I want is that script manager to be on the page. Then I have an update panel, called "update panel one". That's the one that hijacks the call and then makes it a sync call and you don't have that whole refresh thing going on. I have the update panel in the update panel we usually have a content template, right.
Inside that content template I'm going to drop the button. Go to my toolbox, and then I'm going to go to the standard controls and drop a button. Double click on it. I have a button called "button one." Let's give it an ID, "btn get server life cycle." Run at server. OK. Then for the text let's say same thing but with the spaces, "get server life cycle." Get server life cycle. OK. Now, for this I'm going to have a click event. So on click equal and then I'm going to put here the click event that happens on the button. OK. So on click. Then let's record the event. Let's make this "btn get server life cycle underscore click." All right. This is the same standard that we follow when we're registering events. OK. This is the button that when I click on it I'm going to get the server life cycle events. OK. Now, I have the button. Underneath the button I'm going to put a bullet list.
That bullet list will have the actual event recorded in bullets. OK. So, br for a line break and then in here I'm going to put my bullet list. So I'm going to go to my toolbox and then select a bullet list and drop it here by double clicking it. I have bullet list one, run equal server. I get my update panel. I get my content template with the actual button inside of it, and the bullet list also inside there. Let's go ahead and save. If you try to look at the server, I'm sorry at the code page, that cs file, you see page load. But I want the event that has to do with the button click, right. Un-click, I set it to be this button. Well, if I go to the design view, and I'm able to see the button I can double click on it and that should take me and create for me the event and register the event like I want it to. This will give me the actual even happening on the server side.
I'm going to get to this button shortly because I need it mostly for the errors. But for now, let's go ahead and basically write our events one by one. Now the first one is the page load, right. This is the page load event, when the page loads this event is triggered. To record all the events that have been happening let's create an array list. So "Public array list," it tells me it doesn't know what that is. So, I have to go with the squiggle lines right beside them. There's a small box it says "use a system of collections" That's what I want. Now, it understands what an array list is. So, array list equals new array list. The array list right now is empty. Now, when the page loads I want to add something to the list to show the page loads. I'm going to say something like this, "list.add:loadasync" and then I'm going to call my script manager. Remember I have in here script manager one, right. That's the name of the script manager.
Script manager one dot is in sync post back, this property as the name implies tells me whether something is in sync or not, and async or not. Means I'm calling this asynchronously or not. It returns for me a bullion value. Did this happen in a normal standard call of the page? False. Did it happen in async call back? True. And that's what this one would provide for me. So calling load async true or calling load async false. OK. Let's go ahead and go and continue with the rest of the events. What other events do I have? I have the pre-init, the pay and init, right. "Protected, void page underscore preinit." Right, this is the preinit of the page. Normally they have the same thing object as arguments. Object sender events arguments e. OK. The one underneath it would be with the page init. I'm going to copy this guy. How about first let's copy this, and put it here. Now, we're saying calling pre-init async. OK. Now let's copy this one.
Go underneath here and this one for the init. The init method or the init event. Also it says calling init async. OK. I still have the pre-enter. OK. Let's go ahead and paste this one underneath here. Page now I have pre and under. Object sender event are still the same thing. I have the preunder being called here. inside init. I'll say calling "preunder async." Now, with that we're done. Preunder is done before the pages landed on the sync. Now, I'm almost done. Right. Now, I'm going to take the list, the array that I just declared list. I've been recording everything in the array list.add and here list.add, list.add. Down here before we're under the page I'm going to tie this array list to the bulleted list and data bind so that everything will be displayed in the bulleted list. We go with bulleted list one.datasource, the data source of course the list. Then bulleted list one.databind, that should be the bulleted list one.databond.
Now, I've bond to that list from everything that happened in the array and everything is recorded inside the list. Now did I miss anything. Let's go ahead and load the page. Try to view the page in the browser, loading that in Chrome. It says calling preinit, async is false. I just loaded the page, right. I didn't make any async calls. Calling init async is false, calling load async is false, and calling preunder async is false. There are a view concepts that I'd like to illustrate here. First of all notice the life cycle; the preinit, init, load, preunder. This is the standard events that's happening on the page life cycle. I loaded the page normally. I'm not making an Ajax call. It showed me all the events and it says that all these asyncs are false. Which makes sense, right. Now when I need to click on this get server life cycle, remember here that get server life cycle is a button inside the content template inside the update panel.
By clicking this button I'm making and Ajax call to the server which hijacks the actual call of the page, and updated the update panel. If I need to click on this button then, let's go ahead and do so. Now it says calling init, by the way preinit says false. I believe there's a bug in here, it should say true. Calling init async is true, calling load async is true, calling preunder async is true.
Now, that it's calling these values, these events asynchronously, but nonetheless you still get the events, right. You get the preinit, the init, the load, and the preunder. What does that tell us? This tells us that whether you're making a standard call or an Ajax call, the life cycle of the page is still the same, happening on the server. Let's go back and illustrate a little bit more about the actual error messages that could happen with the page.
Let's go to the top in here under the title, I'm going to use some style sheet. I'm going to copy a little bit of styles here and I say for the class of error I'm going to set the background to this color. The color to be this color. Background color, standard color. For the text that's for the error message. Inside the dev, right outside the update panel I'm going to put a span. That span will actually contain an error message, if it happens. Inside the dev here I have a span without the error message. The classes error so you noticed that's what I need that class for here, right. It will display with this background color and with this text color. That's the span with ID error message. There are a few things that I would like to change with the script manager. There's the script manager, I need to change a few properties with the script manager.
On the new line here I'm going to turn a few properties. The allow custom error redirect, I'm going to set this one equal to false. This one means that we need to reenact our errors to a some type of page. You know that in asp.net you can redirect an error that happened to a specific error page that the user can see. Well in here for those custom errors direction you don't want that to happen. We set that value equal to false. Then when we're on async post back error, when we're doing async post back and there is an error I want that error to be the "script manager one async post back" error. OK. This will be "script manager one async post back" error. Let me copy this value so I don't have to type it all. I'm sorry there's no closing place here, closing slash.
I have script manager ID on equal server allow custom error reenact to false on async post back error I want this error to actually happen. OK. This is the one with the script manager. As far as the update panel, as far as the button is concerned I don't want to change anything. But on the server side I'm going to actually handle that event that I just created for the script manager. Let me go to the chord behind, underneath here I'm going to actually paste this event where the script manager one async post back error, that we need to happen. We say script manager one that async post back error to be something happened on the server. OK. That's the error message that when async called to the server, causes an error I want this message to happen. OK.
This is all done through here, which is the script manager. That says when there's a post back error that's what I want you to call. Calling this one actually says "async post back error message" is this. OK. Now, that's for the chord behind. As far as the actual code on the page itself, I need to have a script that actually handles this type of error. So I need to have some type of java script here, right underneath the form for example. Here's the script. The script says, "I'm going to call system web forms that page request manager, get instance of that." Now, when we talk about system web form, because they're client side objects that raise client side events. So in this case then, systemwebform.pagerequestmanager has to do with update panel. I'm going to get an instance of this guy and name it manager.
Then when the request ends I'm going to tie him to a specific event that says when the request ends call manager end request. That is the function I have here. For this function I say go get the error message element. Which is over here. Go get the error message element and if regis.get error, regis as a parameter to this function. If there are errors I want you to set the error handler to true, to tell that, "yes, I handled the errors." I'm going to set the inner html of that error element to something went wrong with the request. So error.innerhtml that should be error message that should be under html because in that case we created a span, and that should be error message that innerhtml. Let's go ahead and change that. No. I'm sorry, I don't need to change that. This is the error that I get here. When I get the error message object I started an error.
Now, I'm saying "error.innerhtml is something went wrong with the request. If there are no errors then set the innerhtml to empty." Again, we get the error message element which is the span, we named that variable error. For that error we set innerhtml to this, if there are any errors. We said that errors are handled to true. Let's go ahead and save that. That handles the client side. One more thing that I'd like to change on the server side though, has actually caused something to go wrong. Right? I want something to go wrong on the server so all this error messaging takes place. Let's go ahead and look at the button that I just created. Remember life cycle one that cs code. Remember when we created this get server life cycle, that's on the button that we have. For this, I'm going to through an exception. So through new exception.
That exception will have some text that says something like, "here's an exception." Now the button will through an exception, something goes wrong on the server the script manager when he makes an async post back. Why would be have an async post back? Because, the button which I clicked through an exception. Now where's the button? The button in the update panel. If the button is in the update panel, the update panel is actually hijacking the call, and now I have an Ajax call, and not a standard call. If it's an Ajax call that will trigger the script manager to take over as far as the errors concerned. This is the script manager async post back error. It will give you this error message. On the client side I have the page request manager instance handling the event saying, "give me this object" and then place the error in there. OK. Let's go ahead and do that in the browser. Then get server life cycle, click on it and says something went wrong with the request. Right. This is happening on the display and the span that we just have on the page. Of course you can always go to the tools, and then load the developer tools and view a lot of those in the results over here by making actually the calls and refreshing the page, reloading the page.
You'll be noticing a lot of those events actually happening, should be happening on the console. We can see the warnings or the errors. I'm not sure why they're not being displayed in here but we should be able to see them, as far as the console is concerned. You'll be able to track your error messages. Also notice the key point that we're trying to illustrate here. The first one is that the events that happen on the server, are the same, not the actual events, but the life cycle is the same whether I'm making a standard call or an Ajax call. The second thing that we also learned is that I can handle some error events happening by using the script manager by changing some properties on script manager. By taking a handle of those request and trying to change the innerhtml of some span you have on the page. Also generating the async post back error that happens for that script manager so you can basically handle an error that you want when you're making an async call to the server. That's a mouth full of discussion today. I hope you have a good understanding right now of the life cycle and the error messages as far as Ajax is concerned. We'll continue with more discussions of Ajax. Please stay tuned on Mr. Bool Website. Thank you very much for listening. I'm Ayad Boudiab, and you take care.