Duration: 20 minutes
Summary: In this video we continue our ASP.NET Ajax discussion. We will talk about updating an update panel and using a timer. Couple of properties for an UpdatePanel are: ChildrenAsTriggers (the child control can update the panel), and UpdateMode (which can be Always and Conditional). In our case we will make the ChildrenAsTriggers to be false and the UpdateMode to be Conditional. The only way we can update the panel is using the update method. We create another panel that contains a text box and a button. When the user enters a specific name in the text box that matches the condition the time in the first UpdatePanel will be updated.
Then we will discuss timers. Timers are helpful to update the page or an UpdatePanel every specific time interval. In our case we will create a timer that simulates the number of records processed so far. The time interval will be every 3 seconds. The tick method will update a variable that shows the numbers of records processed.
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, Ajax, Visual Studio 2010, ScriptManager, UpdatePanel, ContentTemplate, TextBox, Button, ChildrenAsTriggers, UpdateMode, Update, Timer, Label, OnTick, Interval.
Welcome back everybody. This is Ayad Boudiab. I'm a senior Dot Net
application developer; and we are continuing our Ajax discussion that we
started a few videos ago. The first part we're talking about is the life
cycle of a specific page, as far as the server is concerned. So on the
server side, how the life cycle works. One thing that we learned from the
discussion is that whether we're using Ajax or not, the life cycle on the
server is pretty much the same. In the upcoming video, I'd like to talk
about the life cycle on the client's side, and we'll discuss a few things
there. In today's video, there are a couple things I'd like to discuss. The
first one is how the update panel gets updated. We've seen this, right?
But, if we made the children as triggers, it's false, and the update mode
is conditional. So how can I update this specific panel, right? Using the
update method in that case, but we'll see an example of that. For this
example, I'll create a couple of update panels and based on a certain
condition, we'll update one of those panels.
The other item that I'd like to talk about today is basically the timer,
and how I can work with a specific timer using an example. OK? So these are
the two concepts that we'd like to discuss in today's video. So let's
create first a page. Let's call it, for example, "update panel test." We'll
work with that and then we'll move into the timer example. This is the
original website that I had from previous videos. I'm going to right-click
on it and add a new item. Again, we'll call this one "update panel test."
Click add. Here's my page. Based on previous discussion, we all know that
whenever we work with Ajax, we use the script manager. So we drop a script
manager on the page. I go to my toolbox, and I go to the Ajax section.
Here's the script manager. Double-click and it takes me where I have my
cursor and it was on the top, right under the form. OK? That's normally a
good place to put the script manager. So I have a script manager on the
page. That's one of my first conditions of working with the panels.
Now, inside the div, I'm going to create two update panels and then we'll
change some properties and see how that works. OK? So, again, back to the
toolbox. Drop an update panel here. OK? Underneath it, I'm going to put a
HR and then drop another update panel. I have two of them. OK? Inside the
first update panel, I, of course, whenever we're working with an update
panel, we need to go to the sub-section of it, which is usually the content
template. Right? In there I'm going to put a text box and a button. OK? So,
first thing is content template. Inside my content template, I'll drop a
text box and a button. Go to my standard controls. I select a text-box and
then underneath that I'm going to add a button. OK? For the text-box, I'm
going to call it "txt name." The [inaudible 00:04:05] server, right?
There's no surprises there. And then after that, after the text-box, I'm
going to put a break, so the button will be on the next line.
The text box with the text "txt name" and then the button had a BTN update.
That's the idea of it. The text for it will be "update the time." OK? Let's
do this. Update the time. And then I'm going to generate a on-click event.
Now one thing you could do is add a space here, and look at the events.
Right? Look for the event and generate a on-click event. Or, another thing
that you can do, if you are on the design section, and then you see the
button, if you move over to the right-hand side, you notice that the
properties of the button, because the button is clicked. Beside the
properties, you see the events. You click on the events. Inside the drop-
down here for the click event, you double-click. That's how you get your
event. So either way, you'll be fine. Now I have the update event. I'll
come back to this one in a second, back to the source. Now I have took care
of the first panel. I have a text box and a button. And let's say this one,
let's, right under the div here, before the update panel, let's put
something like "first update panel." OK? Now underneath the HR, I'm going
to put the second update panel. Again, let's put a break in there. OK?
Here's my second update panel. For this one, it's update panel two. I'm
going to change a couple of things. First of all, the children as
triggers, right? We have children controls within the panel that trigger
something. Now in this case, the children as triggers is set to false. So
then the children of this update panel will not be triggering any
asynchronous calls. OK? So children as triggers is false. Now the update
mode has the following values. Always and conditional. Always, as the name
implies, the update panel will always be updated. In this case, I'm going
to say conditional. So there's some type of condition that would help this
update panel to be updated. It's not the children. Right? Because the
children as triggers is false. The update mode is conditional so there must
be something else that would update this panel. OK? So these are the two
properties I'm changing here.
Inside the update panel, I'm going to go to my content template. Inside the
content template, I'm going to say here is the time. Of course I'm going to
put in here the actual time using the
"datetimeobject.now.toolongtimestring". This is the actual time. OK? So
this is the time in here. One panel that has the actual time, but it cannot
be updated with its children, because children is set to false and the
update mode is conditional. The second update panel has a text name for the
user to enter his name and a button that says "update the time." OK? So
this is how it looks like in the design mode. So if I go back to the source
and try to view this in the browser, it's going to look like something like
this. With a text box on the top, a line through, and then the update panel
underneath it. Here it is. First update panel, text box, button, and here's
the update panel. Then it has the second update panel with the actual time.
Now if I want, as I said, if I want the first update panel when I click on
the button to update this one, then I have to change my code behind. So
here's the code behind that we left from the previous time we set up the
event. In this case, I"m going to have a condition here. It says
"ftxtname.text" that's what the user is going to enter, right?
".tolowercase" or to lower"=" let's say, for example, my name) "Ayad
Boudiab." If that's the case, then I'm going to update that update panel.
What's the name of the second update panel? Update panel two. So
"updatepanel2.update". So that's how you trigger an update for the second,
in this case, update panel using the update method. Because, in this case,
the children as trigger is set to false, the update mode is conditional.
I'll be able to use the update method to update that panel.
Let's go ahead and save and let's start to preview that in the browser.
This is the time, 10:34:13. Type something in here. Update the time,
nothing happened. 10:34:13. Let me put my name. Update the time. 10:34:29.
So some information that are based on the first update panel triggered an
update to the second update panel, that has it's update mode to be
conditional and the children as triggers, in this case, was false. OK? So
that's how I can work with the update method for the update panel.
Now the second subject, as I promised you for this one, would be about the
timer. So let's right-click on the project and add a new item. For this
one, let's call it "timer test." The timer test has just an empty page in
this case. Right? Again, what do we do when we work with Ajax? The first
thing we drop on the page is, a script manager. Right? So double-click.
That will give me the script manager in the location here, under the form.
It needs to be on the page, but it's nice to put it right under the form.
Then the second thing is, in the div section, let's call for example this
one to be "SM1." Right? So we can just give it a shorter ID. In the div,
I'm going to drop a timer that I can work with. The timer has specific time
intervals that can update that specific time. Of course that time is in
milliseconds, so that's the value that you need to provide. If you go to
the toolbox, you see the timer. Double-click on it and it gives you a timer
in the div. It's called "timer one." Let's call it "T1." Grammatical
server. OK? Then I'm going to give it an interval. The time interval that
this refresh is going to happen, right? It's going to trigger that to
refresh every specific time interval. That interval is going to be 3,000
which is 3,000 milliseconds which is 3 seconds. OK?
Now, that takes care of the timer. The other thing is, I need to drop a
label and then work with that. Before I do this, I need to handle a
specific event. This is the on-tick event for this timer. OK? So let's go
ahead and, as we did in the previous section, we click on the actual
object, which is a timer in this case. We come over to the properties for
this specific timer. I have the events. For that event, I have the tick
event. It says "occurs whenever the specific interval time elapses." OK? So
this one is the one that does the triggering. I can type the name here or I
can simply double-click and this one says "T1 tick on the server side." On
the client's side, I'm sorry, I was clicking on the wrong page. On the
client's side, I have the actual script manager. Inside the div I have the
timer, I gave him an ID, I gave him the time interval that this tick is
going to happen. I gave him what needs to be called on the server side
every three seconds. That's all that this timer needs.
Now, underneath this, I'm going to start a new div. Inside that div, I'm
going to say for example, let's pretend, a good case where this timer can
be used. You can use the timer to give the user some information about
something that's being processed. Let's say you have a huge list of files
that need to be processed, or list of invoices that need to be processed.
You refresh the user and you give him, well you see, 50 out of the 3,000
has been processed. Next time is 290 has been processed. 700 has been
processed. You keep going giving this flash to the user that just shows
that something is happening. Right? We are processing that many invoices or
that many customers every, for example, three seconds. OK? So inside that
div, I'm going to say "records processed so far." In here, I'm going to
drop a label. The label says "lbl records." Grammatical server. The text
right now is zero, to indicate that zero records have been processed.
Right? Then, after the label, I'm going to continue my statement. My
statement says "records processed so far", the label, let's say the label
says 100. I'm going to say "of 10,000." That many records of 10,000 have
been processed. OK? So that's what the label, and here is a placeholder.
Then "out of" that many records.
Now, the other thing that I'd like to do is up here, underneath the title,
I'm going to add some style. For that style, I'm going to say "for that lbl
record, this is the ID." Since it's the ID of an object, I have to precede
the ID with a # sign. That's what we do with the styles. For that lbl
record, I'm going to set the background color to be yellow. OK? So only for
that specific record that's been refreshed, I'm going to set his background
color to be yellow. So the user can exactly see what's going on. Now on the
server side, I need to do a couple of things.
Let's go back to the server side and here's the tick. In here, I'm going to
simulate that the records have been processing so I'm going to create a
random object called "rand." Make this one equal, no random. I'm going to
create a static variable. That static variable is integer and it's named
count. Let's start with 500. Let's say 500 has been already processed so
far. Then inside the tick, every time it's been called, I'm going to say
"lblrecords.txt=count+rand.next" means give me some random number between
500 and 1,000. Let's wrap this all in parentheses. So count, which is 500,
plus a random number between 500 and 1,000. I'm going to put this one
".tostring". Something like that. OK? Just to emulate that something has
been processing. Then I'll be able to display that to the user.
So in that case, then, we start with a random number. We have a count to be
500, and then in the text I'm going to put count plus that random number.
Let's go ahead and save, and then try to preview that in the browser.
Here's the timer test. Then right-click. View in browser. Records processed
so far. 1,100. Three seconds later, 1,263. Three seconds later, 1,067. Of
course, in this case, I'm just using a static value and a random number
generator so I'm not very specific about the actual values going up. But at
least I'm showing you that the timer is reflecting that every three
seconds, something is happening. Right? So that's how we can use the timer
to basically reflect to the user on some type of event that's been
happening. You need to show the status of this event to the user every
certain number of time. In this case, we chose three seconds, but of course
it could be your choice. OK? So we discussed the update panel. How we can
update one panel from the other events using the update method. We also
showed you how we can work with a timer, by handling the on-tick event and
also specifying the interval value for that specific timer. Thank you very
much for listening. I'm Ayad Boudiab, and you take care.