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 ModalPopup Extender Control?

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 easy it is to add fully customizable modal dialogs to your ASP.NET application using the ASP.NET AJAX Control Toolkit. Let's create a new web site, and we'll select the AJAX Control Toolkit Web Site template. What we're going to build here is I'm going to build a text application, and it's just going to have some text on the page, and then we're going to have a link button and when you click on the link button we'll pop up a modal dialog that will let you change the style of the text paragraph on the page. First we'll need a paragraph of text that we can use for changing styles against. We'll just take this paragraph from my bio. The next thing we're going to need is we're going to need an ASP.NET link button. Let's grab a link button here. I'm just going to change what this says to say, Please click here to change the page style. Okay. Now let's hop over into Source mode. This here is just a paragraph, standard HTML paragraph tag. Inside the paragraph is whatever text we want. I've got a link and some bio information here. And now we can add the modal dialog. The modal dialog is just going to be an ASP.NET control. So I'm going to use this snippet that I've created. Remember, this is just code snippets that I've created so that you don't have to watch me do all of this typing. What we've got here is a standard ASP.NET panel. There's nothing special about it, other than that I'm using this modalPopup CSS class, which we haven't defined yet. That's in an external CSS file, so let's go grab that file and drop it into my solution. And then here in my page up in the head section we'll drop in that style sheet, and then we'll have a look at what's in that style sheet. We've got a couple things here. We have this popupControl, and there's an important— Sorry. We want to look at the modal dialogs here. Notice we've got a CSS for the background, and basically what this is for is when we pop up that modal dialog we're going to gray out the rest of our web page. Here's the style for the popup itself just specifying the color, borders, etc. And then I have 4 sample styles that we'll let the user choose from, and then whichever one they choose we'll apply to the paragraph on our web page. Here in this panel there's nothing special about this. This is just a collection of radio buttons. Notice that we have 4 input fields all defined as type Radio and all specifying the same name. So that means that they're associated and they'll be mutually exclusive. So because they all have the same name, the web browser will only let us select one at a time. And then we have onclick events for each where we set the styleToSelect variable equal to whichever style name that's defined in the CSS file, whichever one we want to implement. And then down here at the bottom of this panel we have an OkButton and a CancelButton. We need to define the styleToSelect variable, and in fact, what we actually want is an event handler here. We're going to back up here in our head section as well. I've got just a little bit of JavaScript that I'm going to include. Here we have our variable, and notice that it's outside the scope of our function so it's globally available to all of our JavaScript code. Then I've got this function onOk. And onOk will look into our HTML element and set the class name of the paragraph, which is just the paragraph with the ID Paragraph1 here that contains a snippet from my bio, to whatever styleToSelect is. What that means is every time somebody selects a radio button, automatically when that radio button gets clicked, the style name that's defined in our CSS will get assigned to the styleToSelect variable which is defined here. And then any time we want to, we can call the onOk function to actually assign that style name to the CSS class name of the Paragraph1 paragraph identifier. Now all we need to do is plug in the extender. Understand what we've got here—just a simple paragraph of text, we have this link button here, and then we have this panel, and this panel is the one that we want to be modal. So we're going to pop this up on our page. Without the extender... it would just be invisible. Not able to use it. It's invisible because style display equals none. Now I can go ahead and add the control extender. If I go down to the AJAX Toolkit toolbox and add a ModalPopupExtender, then I can go into Source mode here and configure it. We need a TargetControlID, and that's going to be our link button. And then we need a PopupControlID, and that's just going to be Panel1. Let's also add some of the style sheet information that we looked at in the style sheet file. The background CSS class, the one that will be applied to the page, will be modalBackground. Let's also say DropShadow is equal to true to add a little drop shadow effect there. We need to define what's the OK button, what's the Cancel button. We're assuming because this is a modal dialog we have to provide OK and Cancel functionality. Let's add the OkControlID, and that's going to be OkButton. Remember the OK button is defined here in our panel. We're also going to need a Cancel button, so let's go ahead and grab that. We'll specify the CancelControlID. And the last thing that we need is we need to specify what we want to do when the OK button is clicked. When the Cancel button is clicked, we don't necessarily want to take any action, but we could if we wanted to. We could fire a script when the Cancel button is clicked as well. But in our case, we're just going to specify a script to run when the OK button is clicked, and the script that we're going to run is the onOk function that we defined up in the head section of our page. We're just going to run onOk. Let's go ahead and run our application. Here's our page with the link. If I click on the link, notice that the page is grayed out. I can't click on it, so I can't get access to that page, so this is truly a modal dialog. We get the DropDown Shadow effect, which is sort of slick-looking, and we can select one of the styles that we want to implement. If I click OK, that style gets applied to the paragraph because we said that was the target. If I choose a different style and then click Cancel, nothing happens. So that's it. It's that easy to start adding fully customizable modal dialogs to your ASP.NET applications using the modal dialog extender that comes with the Microsoft AJAX Control Toolkit.

Video Details

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

Learn how to use the ASP.NET AJAX ModalPopup extender control that comes with the ASP.NET AJAX Control Toolkit. In this video the ModalPopup extender is used to pop open a standard ASP.NET Panel control as a modal dialog box.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.