Duration: 16 minutes
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET and Visual Studio 2010.
Keyword: ASP.NET 4, Visual Studio 2010, Ajax, ScriptManager, DateTime, UpdatePanel, ContentTemplate, Triggers, AsyncPostBackTrigger.
Welcome back everybody. This is Ayad Boudiab. I am the Senior dot Net Application Developer and we started a long series on ASP.net, right? We talked about many features of ASP.net, and we even started back in 2008 and then we did some more in Visual Suite in 2010, and then we discussed the features in 3.5 in 4.0. But along the way I mentioned to you that I'd like to talk about Ajax a little bit. For this video, the next few videos, we are going to do just that. We'll discuss a little bit of Ajax and see how that works as far as .net is concerned, so we could be talking about Ajax on the server side and Ajax on the client side and we'll see the difference in how we handle that.
Now, just as a quick drawing or a quick definition how do I use, I mean, why do I need Ajax? That's your page. This page contains some data, right? And it has maybe forms, grids, and so on. This page, when every time, you click on a button, let's say, here's a button, and the button is actually over here. Every time you click on a button, the whole page is sent back to the server. So, it takes the data with the view saved and everything, sends that back to the server, comes back. That's, sometimes, it's fine. Because maybe the page is not that big, or you really need to submit the whole page to the server. But, what happens if you have a case where only a portion of the page needs to be updated? OK. So, I have a portion down here. That portion is the only one that needs to be updated with some data. It doesn't make sense to take this whole page and submit that back to the server, just update only that portion. So, I need to make some type of a synchronized request to the server to get a portion of the data and only update this piece. So, I make my request, it goes back to the server, it gives me the data, and this is the only portion that I want to be updated. I'm using Ajax in this case. I'm not submitting the whole page back to the server. I'm only making an async request to take, to update only that piece of the page from the server.
As a matter of fact, when you're loading your browser, at the bottom you see the page is refreshing. That's with a normal post-back. You see that it posted back and came back with some data. With Ajax, you don't see this refresh happening. You don't see that the data, the whole data is being submitted. There's only a small request, going back asynchronous to the server, and only filling out the small portion, this yellow portion that you would like to be updated. That's what you need to use Ajax for. Now, let's go back to our Visual Studio. I have in here an ASP.net website, and by the way with the way I did this, in Visual Studio 2010 new website, and I filled out all the information, just given the name and so on. Now I end up with a website and I named it Ajax test. That contains some pages. Now, I don't want to work with these pages, because they depend on a master page and I don't want this master page to be in the way. I just need to have a simple page so I'm going to right-click and add a new item and that new item would be a web form. Let's call this one maybe something like simple Ajax page. And I click that. I end up with this page that has nothing on it so far.
Now I need to work with Ajax on the specific page. Well, there are are a couple of steps that we always deal with. If you come over to the tool box you would notice that you have an Ajax extensions here with some controls that you can work with. The key part about Ajax, whether you're using Ajax on the client or the server, you need to have the Script Manager, because that's like the one that manages all your Ajax calls and so on. So I take the Script Manager, and I drop it on my page. This just exists there for managing my Ajax stuff. So far, so good then. I just dropped my Script Manager and if I look at the design there's nothing in there to be, you know, nothing viewable on the page. It just says there's a Script Manager there. The second part of working with Ajax, is actually using an update panel. OK? So it's like this is the panel over here that I'd like to be updated, and I use an update panel and update only this portion. So, in here I'll take an update panel, and I drop it on the page. So Script Manager one, update panel one.
Update panel by itself, if you look inside of it, it has a content template and triggers. I'll show you what these are. Now, as far as the name implies, content template is what the contents are, so I put everything within my content template. So, don't forget, you've got the script manager, you've got the update panel. Within the update panel you get the content template. What we're going to do in here is a small example. We're going to put the date and time outside the update panel and then date and time inside the update panel and see how these get updated. So outside the update panel I'm going to say the current time. In here, I'm going to simply get the date-time from the date-time object. Dot now, dot retrain, and that would be, I believe, for the time. So, we display the current date-time. OK? Nothing fancy there. Then I'm going to put an H on here just to visually see the difference. I have a current date-time that I'm displaying and then notice I'm still outside the update panel. Script Manager exists on the page, right? I don't put anything in it. Just drop it on the page and for now don't worry about it. Underneath the Script Manager or anywhere else on the page I put the current time. What's important is this current time is outside the update panel. OK? Now let's say in this case current time inside the update panel. Pretty much do the same thing. Take this piece and put it there. So now I have the time inside the panel, the time outside the panel. Underneath this I'm going to drop a button so I can refresh because you know with a button you get a request so you can post the page back to the server. Right? So on the standard panel here, I'm going to take a button and drop it on the page. For this button just leave it button one and maybe the text something like "refresh." OK?
Now let's go ahead and view that in the browser. That's Google Chrome. There on the page it has, it says I have an error on the page. Expected. That's just I missed some type of paranthasis or I added maybe an additional semicolon. I don't need that semicolon in there. Let's load the page again. On the page is says current time 2:14pm. Current time inside the update panel 2:14pm. Now when I click the refresh button and let's see what happens to this time, and to that time. Refresh. It says 40 here, but this one's still the same. Refresh again, you notice that we are only updating this portion of the page, but not the other one. More importantly, notice down here you don't have anything that's showing the page is being posted back to the server. Refresh is happening quickly, and I'm seeing the only this portion being updated. Now remember, the current date and time and the button were inside the update panel. So when I'm doing an async request, I'm only updating this portion of the page but not that portion, and that's why you will see that in that case nothing gets updated, only updated when the whole page was displayed, the whole page was refreshed. But every time I click on the button, only this portion within the update panel is the one that's being updated and that's why you see the time being different here, but not in there. Refresh again, 46, this one's still 23. Control F5 to load the whole page, or you can simply say refresh/reload. 57, 57. The whole thing was reloaded because I reloaded the whole page. Refresh. Only this portion is updated, and not that portion.
Now that begs the question, can I update this panel from somewhere else? I mean, do I only have to have the button inside the panel in order to refresh this panel, or can I have something else that triggers the refresh of this panel? Let's go outside here and create another div. Let's say in here a div outside the update panel. OK? A div outside the update panel. Let's put a break in there, and let's add a button. OK? So go to the tool box, drag a button, put it here. This is, let's call it "BTN update" and text "update the panel." Save. Now I have the button that I wanted to update that panel, but that button is outside the update panel. If I click on it it's going to post the whole page, because it's not part of the panel. OK? Let's try to click, view in the browser. You notice that it's reloading, though it's over here. It's reloading and 2:44, 44, 50, 50, 51, 51, I don't want this. I don't want the whole page to be updated. I want only that portion with an update panel to be updated. OK? How do I do that? Now you get the content template, but remember within the update panel there's something called triggers. So, I didn't mean that. There's another one called triggers. For the triggers I can add an async post-back trigger. That's the one that triggers the update of this panel. What does this control need? It needs a control ID, which in this case I will give them the BTN update button. That' s the control ID and also that needs an event name. Well, what event do you want on that button to refresh that update panel? I want the click event to take care of that. So, we added a trigger. This is a async post-back trigger. A, we are posting back async portion to update this content template within the update panel. We need this to be updated through this BTN update. When I click on this, this portion should be refreshed. Let's go ahead, view that in the browser, update. You would see 25, 27, 29, but this one stays at 23. I asked the trigger that only this button will update this panel, not the whole page. This one says 39, 41, and so on. So we saw both ways of creating content template with the button inside of it, then we have a trigger that asks which control could update this portion.
Now, if you remember, if I view that in the browser, this is the link. I can take this and I can load this in Firefox. Why am I doing this? I load the page in Firefox. You notice that I can use the firebug, I can use the firebug in here on the right-hand side. If you don't see that on your Firefox that's a separate add-on that you can add to Firefox. Just Google Firefox firebug and it should be able to find the one that you can add to your version of Firefox. In this case, for example, I'm using 11, but it exists in previous versions as well. So I click on firebug, you'll notice that on the net tab there's xhr. This basically displays some important information for me because when I click refresh, for example, in this case, you'll notice that it tells me information about the request. It tells me the response headers, the headers, right, and request header requests information coming in, and it also tells me the response. You'll notice the response, you'll look at the whole page's portion of the page coming back I can use the firebug to be able to track that for the request and the response, and also I could use fiddler to do the same thing, because fiddler is a proxy that sits between the browser and your server.
So, basically it responds to some specific requests or you can use it to basically watch the requests going in and out for that specific page. For example, right now if I, let's say I'm in Firefox, and I did a refresh that's the fiddler. Let's see, fiddler didn't do anything in this case, let's just refresh the whole page. Reload. OK? Did anything happen in fiddler? It just tells me, actually this is the original request that's not related to Firefox. I can, for example, go back to Chrome and try to reload the page, OK, or simply close it. Close both. View that in the browser. It should load Chrome from scratch. I'm able to refresh the page and within fiddler I see my requests coming in. You notice these are the requests for the local hosts, Ajax simple, Ajax page. That's the one that I'm interested in, on port 1701.
For example, this one will tell me, using the inspector I have the headers, I have the text view, right? I have the information coming in. That's what I mean. Then I also have the text view for the information going back. So I have the requests and the responses going back and forth and I can tell what the data is through fiddler. Also, fiddler is free. You can download that from the internet and you can use that. Again, it sits as a proxy between your web browser and your web server. So, you can track requests going back and forth. That way you can debug your page and figure out what's going on with it. OK? There's a lot more to fiddler. I'm just giving you here the tip of the iceberg as far as how you can work with it, but this is one way of debugging your pages and seeing the requests go back and forth. The same way for the firebug in Firefox. This is a quick intro to the Ajax. There's a lot more to come on the upcoming videos, Mr. Bool website. Thank you very much for listening. I'm Ayad Boudiab and you take care.