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:] Implement Dynamic Partial-Page Updates 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'm going to demonstrate using the Microsoft ASP.NET extensions for AJAX to implement a common AJAX programming pattern called partial-page updates. And I'll do this using the Update Panel control that installs as part of the Microsoft AJAX stack. So I'll fire up Visual Web Developer, the free version of Visual Studio, and you can follow along either in VWD or in the full version of Visual Studio, whichever you have. Say Create a New Website, choose AJAX-Enabled Web Site template, and you'll note that in our default.aspx page, we have an instance of the Script Manager control. Every aspx page that's going to use the Microsoft AJAX functionality must have one and only one instance of the Script Manager control. Now I'm going to go over and—we're going to add some trace elements, so that we can see when parts of our page are being updated. So I'm going to grab three of these label controls, and I'm going to place three of them on the page. And then I'm going to grab a button, and we're going to use the button to generate a postback to the server. So I'm going to double-click on the button control, and here we have the button event handler back in our VB code, which executes on the server. Now I'm not going to put any logic in here. We don't want to actually do anything with the button click event handler. We just want to make sure that there's a server-side event that fires when we click on the button control. The next thing I'm going to do is go back to my default.aspx page, and I'm going to double-click on the page, independent of any of the controls, to generate a page load event. And then, in the page load event, I'm going to add some dynamically updating trace content to each of those label controls. So in the text property of each of those labels, we're going to say, "Time= " + Date.Now. And this will work just as it is for VB programmers, but for C# programmers, you'll need to do an explicit string conversion, so I'll do it here as well. And again, we want to do that for each of the three labels. Now note, this is not in the button click event. It's in the page load event. So every time that the life cycle is executed on the server for this page, the text properties in the label controls will get dynamically updated. So let's run our little application as it is so far, just so we can see the trace happening on page refresh. And as I click the button, you can see all three of our labels get updated with the current date and time, as we would expect. So let's begin by AJAX-enabling our page and implementing dynamic partial-page updates for one of these label controls. So I'm to scroll down to my toolbox, to the AJAX Extensions tool tab. This is installed by the MSI installer for Microsoft AJAX. And I'm going to grab an Update panel. I'm going to drop it on the page. And then I'm going to take my label control. I'm going to drop it inside the Update panel. And remember that our button control has a server-side event, so we want to just dynamically update this one label control that's in the Update panel. So the Update panel, basically, lets us isolate some content that we want to refresh independent of other content on the page. So I'm going to put the button control up in there as well. We'll do this by default. So what will happen here is that any event from the content inside the Update panel will cause the content inside the Update panel to be refreshed. But only the content inside the Update panel. And since the event is going to be fired when we click on this button, the button click event will be fired from inside the Update panel's content. That should be the only content that gets updated on the page. So let's go ahead and run our application as it is now. And if we click on the button, we note that the first of the three time trace statements gets updated, but the other two don't, so the one that's inside the Update panel is getting dynamically updated, and the ones that are outside the Update panel are not being updated. Now there's a subtle detail here that we want to make sure that we're aware of. Notice that the button click event is not actually executing the code directly that's causing these label updates. It's in the page load event. So what this really means is that the entire page life cycle for this aspx page is executing back on the server. And this is a subtle distinction that happens under the covers, but it's one that's important for you to know about. So it means two things to us. First, it means there's a full page postback going from the client to the server. All of the form fields, including all of the hidden form fields that enable things like View State in ASP.NET, are being posted back to the server. And the full page life cycle is executing back on the server. Then only the content that's necessary to update the Update panel is actually being sent back down to the client. But that's important, because it means from a performance and efficiency perspective, we want to remember that all the data in the client is getting posted back to the server, and in terms of resource consumption on the server, the entire page life cycle on the server is executing. And that escapes a lot of people when they first start looking at the Update panel. So now, we've got one of these Update panels on our page. Let's—I'm going to put the panel that's going to stay at the root of the page at the top of our page, and then I'm going to take this button, and I'm going to take the button out of the Update panel. Now remember, now that the button is out of the Update panel, if we run this and I click on it, we're getting that full page postback, and all of the label fields on the page are being updated. But that's not what we want. Sometimes, we're going to want to update the Update panel, but we're not going to want, or we won't be able to have, because of HTML organizational reasons, we won't be able to have the control that's triggering the update event also live inside the Update panel. By default, any event that causes a postback inside the Update panel will cause the Update Panel's content to be updated. But actually, this isn't really a problem. So we can look at the properties, and you can set most of these properties either in using the Property dialog or inside the code itself, just by adding attributes to the XML element, but in this case, we want to add a Triggers collection, so we're going to add an AsyncPostBack trigger, and what we want to do is, we want the control ID that we want to listen to to be the button1 control, and then the event, we'll just say we're only interested in updating the Update panel when the click event of the button1 control fires. So we'll say OK. If we hop into Source mode here, we can just quickly take a look at the change that's been made here. Notice that here in our Update panel, by setting those properties, we've added a Triggers collection, and then added an explicit AsyncPostBack trigger to listen to the click event of the button control event. So you can write that code manually, or you can use the Properties dialog, whichever you like. Now if we go ahead and run our application, remember that the button control is outside the Update panel, but when I click on it, the only thing that's getting updated is the content that's inside the Update panel. So even though the button's outside the Update panel, because we specifically wired that Update panel up, our ASP.NET, the client-side state of this application, understands that, even though the button's not inside the content of the Update panel, when the user clicks on the button, what we want to happen is the content inside the Update panel be updated. And only that content. That's the default behavior. So next, let's go add a second Update panel. And— So just create a little extra space, and we'll add a second Update panel to our page. And then I'll take that third label control, and I'll pop that into our second Update panel. And let's run our application and see what happens now that we have two Update panels. Now remember, this label is at the root of the page. This label is in the first Update panel, and this label's in the second Update panel. And when I click on the button, notice that. Notice that both Update panels are being updated, even though we've only wired up the trigger for the first Update panel. This happens by virtue of a default behavior in Update panels that says, hey, when an Update panel is being updated, all of the Update panels on the page should be updated. But what if we actually don't want that? So let's go in and make some subtle modifications to the second Update panel, so that we can prevent that. Let's go into the properties of our Update panel and select Update Mode, and you'll note that, by default, it's set to Always. And as this tell us, the Update Mode property indicates whether the Update panel will refresh on every asynchronous postback or only on the results of a specific action. So, by default, Update panels will refresh on every asynchronous postback, even if it didn't originate inside the Update panel that's being updated. So if we set Update Mode to Conditional and now run our application and click on the button, notice that only the first Update panel, the one that we specifically set up a trigger event on, is being updated. And the second Update panel is not. Now, since we've said that we only want to update the content in the second Update Panel explicitly, we need to be able to generate an event that we wire up to update Update panel 2. Now we could do that either by putting a control like a button inside the second Update panel, so, remember that inside that Update panel, anything inside that Update panel will cause an update. So if I drop that button in inside the Update panel and now we run this application, now we get that update. And, of course, remember that we specified in Update panel 1 that we always want to update. So any time there's any asynchronous postback, the Update panel 1 is still going to get updated. And again, if we wanted to, we could take this second button, put it outside of any of the Update panels, and add a Triggers collection to Update panel 2, and then specify that we want to listen to the click event of Button2. So that's sort of an introduction to partial-page updates and the complexity of using not only Update panels, but multiple Update panels at the same time, and you can see that we have a good deal of flexibility in terms of determining when Update panels will be updated and whether we want them to sort of universally update, based on any asynchronous postback or whether we want to very specifically add conditions, so that we choose when each Update panel gets updated. And that's it. Now you're ready to get started using the Update panel and implementing applications that use the dynamic partial-page updates pattern that's common to AJAX-style programming.

Video Details

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

In this video you will learn how to add dynamic partial-page updates to your ASP.NET application using Microsoft ASP.NET AJAX. In particular, you will see how to use the TimerControl to manage the frequency of the AJAX callbacks.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.