Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Get Started with ASP.NET AJAX?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
In this video I'll show you how to get started doing AJAX development with the Microsoft ASP.NET Extensions for AJAX. Begin by pointing your browser at the www.ASP.NET web site and click on the AJAX link at the top of the page. Then to get the product, click on the Download button and select Download ASP.NET AJAX version 1.0. Download the installer. It's just 1.4 megabytes, so it's a quick download. Double click on the MSI file and run the installer. This will take just a few seconds to install. Now I can click on Finish. It will display the Release Notes for me, which is a great idea if you read them to get a look at some of the breaking changes between the previous pre-release versions, etc. And now we can start building our first application. Fire up Visual Studio or Visual Web Developer and select Create a Web Site, and we can choose the ASP.NET AJAX Enabled Web Site. That template is installed in Visual Studio and Visual Web Developer because we've installed the MS AJAX Extensions. By the way, the default install location is in Program Files/Microsoft ASP.NET. It creates this ASP.NET 2.0 AJAX Extensions directory, and inside that there's the version number. Here are the DLLs, the EULA, etc, as well as there's a directory for the client-side runtime so if you want to poke around inside the JavaScript files you can do that as well. Here we're going to create our first AJAX application in this ASP.NET page. You notice that we have a ScriptManager on the page. Every web page that uses Microsoft AJAX must have one and only one instance of the ScriptManager. What we're going to do here is I'm just going to create some content and I'm going to add a few label controls, and we're going to use these label controls as trace indicators to show which parts of the page get updated, because what we're going to do is implement a common AJAX development pattern called partial-page update. I've got a few label controls; I'm also going to add a button control, and I'm going to double click on the button control and generate a server-side event handler, and this will just let us click on the button and get a round trip to the server. The actual button click event handler is not going to do anything; it's just going to get called back on the server. And then in our page load event, so this will happen every time the page gets refreshed, we're going to populate the text property of those label controls with the current date and time. So it's just going to serve as a trace, and every time we get a refresh we'll see that the text property of those label controls will get updated with the latest date and time. The other thing that I'm going to do back here in my markup is I'm just going to add a couple of horizontal rules before and after the second label control just so we can differentiate that center label control. Now if I run my application, we'll see that every time I click on the button all 3 of those label controls get updated with the current date and time. So as I click away at the button, note here each one of those changes. So this is just a standard ASP.NET application, but what we want now is we want to AJAX enable this application and implement the partial-page update pattern. We're going to do that by using the quintessential ASP.NET AJAX experience, at least in the beginning, and we're going to include an UpdatePanel control on our page. We'll go down to the bottom of our toolbox where the Microsoft AJAX Installer has installed these toolbox items in the tab labeled AJAX Extensions. We've included the partial-page update control on our page. This is a server-side control which will allow us to place content inside this UpdatePanel control, and then any time any of the content inside the UpdatePanel fires an event that will cause a postback, the server knows to send back the content to update the content inside the UpdatePanel but only the content in the UpdatePanel. So it won't send back the content for the rest of the page, and this is how we'll get that dynamic partial-page update. Let's grab the second label control and the horizontal rules that are used to delimit it. Let's put those horizontal rules in there too and then I'll move the— There we go. I'm going to put the button control in there as well. Let's get back in there and put that other horizontal rule back in. Now if we run our little application, now if I click on the button control, note that only the label inside the UpdatePanel is being updated. So the content that's outside that UpdatePanel is not being updated. It's that easy to begin implementing the partial-page update pattern that's common to AJAX style development using the Microsoft AJAX Extensions. However, let's make one little change. It's possible that we don't want or can't have the button control whose event is causing the update inside the UpdatePanel, maybe we can't have that reside inside the UpdatePanel itself. So let's take that back out of the UpdatePanel. That's not a problem, though. Let's just go into Source mode, find the markup for our UpdatePanel and look at the ContentTemplate. And then right under the ContentTemplate let's add a Triggers collection. We can basically say, "I want this UpdatePanel to be updated based on some other controls event." So inside the Triggers collection let's add an AsyncPostBack trigger, let's specify that the control ID that we want to be listening to is Button1 and the event that we want to be listening for is the Click event. Basically, all we've done is said for this UpdatePanel, we are specifying a trigger, and we want to listen to the Click event of the Button1 control, and when the click event fires, we want to update the content inside the UpdatePanel. Let's go ahead and run our application now. Even though the button is not inside the UpdatePanel, we're getting only the content that's inside the UpdatePanel updated when we click on the button. Notice as I continue to click, it's just this timestamp that's being updated. And that's it. It's that easy to get started doing AJAX style development using the Microsoft ASP.NET 2.0 Extensions for AJAX.

Video Details

Duration: 7 minutes and 51 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 4, 2013

Note that ASP.NET AJAX is included as part of .NET 3.5, so the installation part of this video is only relevant if you are using the .NET Framework Version 2.0.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.