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.