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:] Use the ASP.NET AJAX Popup Control Extender?

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 add dynamic AJAX-style popups to your application using the ASP.NET AJAX control toolkit. So to get started, I'll fire-up Visual Web Developer, create a new website—AJAX control toolkit website— and remember this doesn't get installed by anything—the AJAX control toolkit comes with a solution, and if you build that solution, there will be a .vsi file in one of the projects that you can run to install this template. Otherwise, just create an AJAX-enabled website, and add the DLL and the reference to the AJAX control toolkit manually. So here's our default ASBX page. Now, the first thing that I want to do is add a .css file to my project, so I'll go out to the desktop where I have one that's preexisting, drop it onto my page, and then in the header section of my page, I'm going to drag the .css file in to create the href so I can use the classes. Now, this isn't just about aesthetics— you'll want to do this in your application too, and I want to point out something here: I've defined this popup control class, and we're going to use that in our content, but this class has this attribute defined—visibility is hidden, so remember that when we get to adding the panel that's going to be popped up. All right? So now we can go ahead and start to add a little content here. The first thing that I need is just simply a text box, and this text box is going to be the control on the page that will cause the popup to appear. If we look here, it's just a standard text box— I've got the text to do in front of it, so just a little header value, and then I specified a name for the text box of "My Text box." There's nothing else special about that, all right? See? Just a text box. Now I'm going to add the content that we want to be popped up. So here I'm going to add a content snippet that I've got. It's a standard ASP.NET panel called panel 1, and I've applied the CSS class popup control, and the reason is this is just content, so the AJAX popup control extender— the popup control extender— is going to manage the appearance and the disappearance of this content, but the content starts loading as soon as the page is downloaded, and then the Java script fires, so we want this to be hidden by default, otherwise the page will load, the Java script will fire, the Java script will determine that this panel is visible and it's supposed to be hidden, and it will make it hidden, but that little bit of latency in execution will cause this panel to flash on the screen instantaneously. So by setting visibility faults in this CSS class and then applying the CSS class to the panel, we prevent that flash from happening. So the next thing that we need to do is add an instance of the popup control extender, so if we go down into the AJAX toolkit—remember I had to add this manually— it's not created by an installer— I'm going to go down and find the popup control extender and drag an instance of it onto the page. Now, if we look at the properties collection here, notice that we actually have to fill in more properties than what is enabled here, so I'm going to go into source code mode and look at the properties that we want to add here. The first thing I need to do is I need to specify the target control ID. The target control ID is the control that we want to cause our popup content to appear, so in our case, that's going to be the text box that we named My Text Box. So that's called a target control ID. Next, we need to specify the popup control ID, and that's going to be the control that contains the content that we want to appear when the text box gets activated. In our case, that's going to be panel 1. We also want to specify the position where we want the popup to appear, so we'll just put that at the bottom, and this is relative to the target control, so it will go there. Next, I want to specify a commit property. The property that we're interested in dealing with is the value property of our popup list. Lastly, we're going to add a commit script, and this is really interesting—this is a script that fires when a selection is made in the popup. So in our case, we'll just add the script inline instead of using a separate Java script function, but we'll say "e.value", and then we'll append some static text— we'll say "send a meeting request", close and then semicolon, remembering that this is inline Java script. Now, remember that we specified that our radio button was going to have an on-selected-index-changed event, and that even was going to be "RadioButtonList_SelectedIndexChanged," and that's where we're going to retrieve the value that we're working with in our script code here, so in order to get that, we need to wire up that event handler. So let's go into our VB code, and we can select the radio button list and wire up a selected-index-changed event. Now, in this event we're actually going to be working with the value and returning that value to the popup control extender, so in order to do that, we need to import the AJAX control toolkit name space, and now I can program against the popup control extender. Again, just using little snippets so you don't have to watch me type all of this, but notice what we're saying here is that first, we're making sure that the selected index actually contains a valid value, right? So everyone make sure that the radio button list has a real value. Then what we're going to do here is we're going to call popup control extender, get proxy for current popup— so we just want to make sure we're working with the current popup— so passing in the equivalent of a '"this" reference or a "me" reference to the current page in VB— and then calling the commit function, passing in the selected value from the radio button list, and that's how we provide the value to the script— where we're saying e.value—this is where it originates. Okay, let's take one last look at our code before we test. Oops—so we don't want this to be +, we want this to be + =, so I want to take whatever value got returned from the radio button and append this static text to it. So whatever we selected in the radio button, the value will be the person's name, and then we'll add to that person's name this message: "Send a Meeting Request". All right, so now let's go ahead and try our application out. So note the popup in the position that we wanted it to. So slick so somebody doesn't have to enter the name, they can select from this list. Remember I implemented this as static content, but this list can be dynamically built at run time from a database of from an .xml file. Then when I select a value, we get the results of our script. I can go in here, and I can select a different one. So that's it—that's how easy it is to start to add this dynamic AJAX functionality by way of popups using the popup control extender that ships as part of the Microsoft AJAX control toolkit.

Video Details

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

This video demonstrates the use of the Popup control extender that ships with the ASP.NET AJAX Control Toolkit. Learn how to extend a TextBox control so that, when it receives focus, a popup dialog will appear with a list of options.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.