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,
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,
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
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
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