Designing and Developing ASP.NET 4 Web Apps (Exam 70-519) Tutorials
Client Side ASP.NET / ASP.NET AJAX Demo
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Designing and Developing ASP.NET 4 Web Apps (Exam 70-519) / Client Side ASP.NET / ASP.NET AJAX Demo)
Now in this video I'm going to do a very simple AJAX demo, this is an ASP.NET AJAX demo and what I'm going to do is just open a new website and I'll just call it AJAX demo and what I'm going to do is, show you how to work with a page where we can update just a portion of it without doing a whole separate PostBack for the entire page. Now what I'm going to do here is first of all, I am go open on my Default Page the Code Behind page and on the page load I'm going to cause a Label to update. Actually let me go back out here and drop my Label on. That's probably going to come in handy at some point here. I put the Label right there and I'll back up in front of it and push it down to a new line and notice that's going to be a Label 1. If I go back here and look in the Source, notice it's Label 1. So what I'm going to do in my code, is on the Page Load, I want to set Label 1's Text Field equal to System.Date.Time.Now and let's convert that to a string and there we go. Should be good to go now. Right. And so what's going to happen here obviously, when I open this up the date time is going to pop up and so that happens, we should pop up here and notice there's my date time string. Well that's okay, but let's make it a little cooler now, let's put a button on here. So let me go back to Design and notice I'm in front of my Label there. I'm going to give it another one and I am going to drop a button onto here. And so now I'm going to double-click the button and I'm going to bring my Label 1 text to string right down here and we'll take a look at this thing and we'll click the button. And now you're going to notice that every time we click, if you look right down here at the bottom, you see a flash and this is updating every time. Alright. Well we can make that a little more pronounced and we'll do a little trick here where we will call System.Threading.Thread.Sleep and we're going to make our thread sleep while it's called out there and we're going to call in the time span of from seconds to 2 just like that. And now when we run this, we run it without debugging and when we click on this, you're going to notice, it's going to take 2 seconds notice, if you notice down here on the bottom, I pulled down too far. Watch right down here, it's going to sit there for about 2 seconds waiting for the local host. Well we want to make that a, an AJAX functionality. So here's what we're going to do. We're going to go back to our Default Page and we're going to go into Source because it's a little easier that way and I'm going to go into my Toolbox to the AJAX Extensions and the first thing I'm going to do is to just drop a ScriptManager on the page and then under that ScriptManager I will put an UpdatePanel. Then I will put myself some room in the UpdatePanel and I'll grab this button that I dropped on and I'll put it in the UpdatePanel and then I will grab this Label that I put on here and I will put it in the UpdatePanel as well. Now let me clean that up so that it looks a little easier to read for you and now I want you to notice what happens, wait a minute, I got to do one more thing here. I need to put a Content Template in here and I'm just going to cut this and put it right down here. So there's my Content Template. Now that is all I have to do to make this run without updating, without running the rest of the page. Now notice it's going to take 2 seconds but it's not holding up the page down here. That was not a full PostBack, so that's pretty cool. Now that, all I had to do was drop a Script Control on, let me go back and show you that. Drop a ScriptManager on, ScriptManager Control, then I dropped an UpdatePanel Control, then actually I needed to put a Content Template Tag in there and between that put all the controls that I want to trigger an update within this UpdatePanel. Now this UpdatePanel along with the ScriptManager, packages up any requests for a PostBack, sends it to the server as an Asynchronous XML JavaScript Request and everything just works, it's really cool stuff and that's how hard it is to do AJAX in ASP.NET. Are there some drawbacks here? Yes, as you get a little bit more advanced, there are some issues but still this is some really neat technology. Now here's something else I want to talk to you about, let me go back and show you one more thing, right-click. If I drop another Label Control on here, let me find one. So let's go to Source here, make sure I'm outside the update and so now when I run this, you'll notice that I can, well wait I dropped a Label, I didn't want to drop a Label, pardon me. Let me come back out, I love it when I get in a hurry and try to code. I know you guys do as well, it's got to be a lot of fun to watch somebody clunk around here without knowing what they're doing. Okay, so there we go, doing okay on time. Now run without debugging and this time I've got a text box down here and I'll get in the text box, notice I'm going to click the button, get in the text box. Notice I'm working ever as it was updating. Okay. So click the button and I can still work until it updated. So that's an Asynchronous Java AJAX Script. Really neat stuff and in some upcoming videos we'll add some update progress to this and take a look at using some triggers as well.
Tutorial Information
| Course: | Designing and Developing ASP.NET 4 Web Apps (Exam 70-519) |
| Author: | Mark Long |
| SKU: | 34292 |
| ISBN: | 978-1-61866-029-9 |
| Release Date: | 2011-12-31 |
| Duration: | 8.5 hrs / 108 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
