Video: How Do I: Use the ASP.NET AJAX Popup Control Extender?

Presenter:Joe Stagner



The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

This video will show you how to add dynamic Ajax style pop ups your application using ASP net Ajax control toolkit to start a fire to a developer could website a desk control toolkit website remember this doesn t get installed by anything you know the exact control toolkit comes with a solution if you go that solution don t be a VSI file on a media in one of the projects that you can run to install this template I was just written a sex enabled website and add the at the DLL reference to the Ajax control toolkit manually to desire up here s our default aspx page that the facility was asked by a CSS file to my project so got to the desktop where I have one that is existing drop out of my page and then in the header section of my page I m going to drag the CSS file in to create the address don t use the classes now this is just about aesthetics but you wanted

Minute 1

This in your application to a one point out something here are defined as pop up control class where he is at our content but this class has this attribute defined visibility is hidden so remember that only get to adding the panel is going to be popped up and smelling the insect at little content here the first thing I need is just simply a text box in this text box is going to be the control of the page that will cause the pop up to appear so if we look it s the standard text box is that the text to do in front of it such as the little header value and I specify that name for the Xbox of my text box avails special about a fancy just a text box to add the content that we want to be popped up and so here I can add some contents typically that it s a standard ASP net panel called panel one and I ve applied the

Minute 2

DSS class pop up control the reason is this is just content so beat the Ajax control extender the pop up control center is good and manage the appearance of the disappearance of his content but the content starts loading as soon as the page is downloaded and then the JavaScript fires so we want this to be hidden by default otherwise the page will load the JavaScript will fire the JavaScript will determine that this panel is visible when it s supposed to be hidden and it will make a hidden but put that little bit of latency and execution will cause the this panel for flash on the screen instantaneously so I got by setting visibility faults in the CSS class and applying a CSS class of the panel would prevent that flash from happening so the next thing that we need to do is add an instance of the pop up control extender so for the at the Ajax toolkit member a

Minute 3

I might add this manually it s not decorated by the installer with I find the pop up control extender and dragons is that it onto the page fell for the properties collection here it notice that we have had to fill in more properties than come to an what are enabled here so I go to source code mode and look at the properties we want to adhere so first aid to do his fighting to specify the target control ID the control ID is the control that we want to cause our pop up content to appear sort a case that could be the text box that we named Mike Xbox Klesko target control lady next way to specify the pop up control ID and that s going to be the controller contains the content we want to appear when the text box is activated in a case that s been the panel one

Minute 4

Was also a specify the position will pop up to appear as it is for that at the bottom and this is relative to the to the target control so don t go there next to want to specify a commit property in the property were interested in dealing with his the value property of our pop up list and lastly one at a commit script is really interesting is his scripted fires win a selection is made in the pop up so in our case we ll just will add the script in line rather than using a separate JavaScript function will say he thought value and

Minute 5

It will and some static texts as I said in a meeting request close and then remembering that this is not in line JavaScript now remember that we specify that a radio button was to have an on index also to the next changed event and that is that it was going to be radio button list under Lisp_selected and exchanged the natural retrieve the value they were working with our script of yourself in order to get that we need to wire up that event handlers lets go into our and or VB code and the

Minute 6

We can select the radio button list while they slept and exchanged in a nail in his event or actually going to be a really working with the valuing and returning a value to the to the pop up control center so in order to do that we need to it with Ajax control toolkit namespace and I can program against the pop up control extender and so just to again use little snippet so you can go to Washington Dulles but those forcing hairs that first for making sure that the the selected index actually contains a valid value right so I won t make sure the radio button list has has real value and then ordered two years were a call up of control extender get proxy for current pop up research is one of a picture working with the current pop up surpassing in

Minute 7

80 equivalent of this reference or me reference to the current page in TV and then calling to commit function passing in the selected values from the radio button list that s how we that s how we provide the the value to the scripts that were worth saying he got value on that s this is where it originates right okay so lets to Russell Kirk before tests are so nor the city plus what is the plus equal so on a I want to take whatever value got returned from the the radio button upend the static text to it so will say whatever sorry so that we selected the radio in the radio button to value will be the

Minute 8

Person s name and I will add that persons name this message sent a meeting request rights and now let s go ahead and try our application out some of the pop up in a position where he wanted it too is a slick so wrapped it in a summit as that and today we can select from this list and write excellent as a static content of this list to be dynamically built at runtime from from a database or from an XML file and then when I select a value we get the the results of our script and it going here can select different one so I set that s how easy it is to start to add this dynamic Ajax functionality by way of pop ups using the pop up controls that are the ships as part of the bikers of Ajax control toolkit

Click here to go to original video page