Duration: 18 minutes
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET Ajax and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, Ajax, ToolkitScriptManager, TargetControlId, Button, Panel, ModalPopupExtender, PopupControlId, DropShadow, BackgroundCssClass, OkControlId, CancelControlId, OnOkScript, OnCancelScript, Animation, OnShown, OnHiding, Fadein, Fadeout.
Welcome back everyone. This is Ayad Boudiab. I'm a Senior .Net Application Developer and we are continuing with our discussion of Ajax Control Toolkit. The control that I'd like to talk about today is the last of the controls that we need to discuss, so the other controls, I mean, to follow the same process, of course everyone of them has its own usage, it's own characteristics, but basically we have the same idea.
What we need to do today is talk about the ModalPopupExtender and this one, as the name implies, is a modal dialog that shows up on the screen. When we say it's modal dialog, it means it doesn't allow you to work with the screen until you take action on that dialog. Once you take action, other stuff can proceed.
The modeless dialog, if you know the difference, modeless is basically a dialog that shows up on the screen but you can still do something else with the page. Right? For example, let's say you are in Microsoft Word. You're typing and the dialog shows up, you're searching for something, you can still work with the text and the dialog is there on the screen. That's the modeless dialog.
With the modal dialog, when it shows up on the screen you cannot do anything unless you take action on that dialog so you can proceed. That's the extender that I'd like to work with today. Let's see how we can work with it. How we can create a scenario when we can use that extender. For that I'm going to create a new page and let's call it, for example, a ModalPopupExample. Right click on the website. Add a new item. This item is a Web Form. Let's call this one ModalPopup and then Example, ModalPopupExample.ASPX. That's fine. Click that. We have that on the page. Right? Here's the empty page.
Again, the first thing we'd like to do is go back to our toolkit and then select the ToolkitScriptManager so we can drop that on the page. Here's the ToolkitScriptManager. We drop that and we add our... again, I'm not sure why this is showing up, let's say no, I don't want to replace it, and we have the ToolkitScriptManager. So now we're ready to drop our controls and work with them.
The first thing that I'd like to do is basically add some text to the page. OK? So, again, I copied some text from some previous videos, that's, you know, it's not something, a necessity in here. It doesn't make any difference with the item we're discussing, but it's just that it shows some text and a button and then we can work with our extender. Here's some text on the page. I copied those from the clipboard. Here's the text.
Underneath this, we'll put a Button in there and let's say we're asking the user for some feedback. OK? Let's go ahead and go to the Button control. Drop that here. Let's leave it as Button1. The text would be "Feedback". Save. Let me preview that in the browser. Here's some text. At the bottom here, I'm asking the user for some feedback. Now, what we need to do is when we click on the feedback we need the dialog to show up. OK? That's the modal dialog showing up on the screen when the user clicks on feedback.
Here's the script of my video. What do you think about it? Give me your feedback. OK? So far so good, then. Let's go ahead and see what next we need to do.
Well, since a dialog is going to show up, the Panel has some text and a Button and then we'll work with the ModalPopupExtender. OK? Underneath the Button, I need to add a Panel. Look at the list, select the Panel, drop it on the page. For that Panel, again, I'm going to leave it as "Panel1", and I need to use some CSS for the Panel, I'm going to come back to the CSS in a second, but let's call the CSSClass and make that equal to, and I'm going to name this one for the CSS as "Popup". OK? Again, I'm going to add that shortly. It's not there yet. It's called "Panel1" and Runat="server".
Now, within the Panel you can put all the server controls that you can work with in here. OK? I would ask, for example, in this case I'm going to tell the user, "Please give me your feedback about the script above." "Please give me your feedback about the script above." OK? Then I'm going to say, "Do you agree/disagree?" OK? I'm asking the user for this information. Then I'm going to put a say HR, horizontal rule, and then underneath that, I'm going to work with a couple of buttons.
Again, ask the user, agree/disagree, kind of thing. As you notice I can work with my server controls here. That's the first Button. Here's the second Button. OK?
Now the first Button, let's call this one 'btnAgree', OK? Of course, the text would be something like "Agree" This one is btn, you guessed it, Disagree, right? Then the text would be "Disagree" This is what we have so far for the Panel. It's, again, ID "Panel1", Runat="server". The CSSclass, I'm going to put that shortly. I'm asking the user to input some text. Here's the Panel.
Now, the second thing that I'd like to add underneath the Panel is the core of our discussion today, which is the ModalPopupExtender. I'm going to go to my Toolkit and just scroll down to the Toolkit here, and I'm looking for the ModalPopupExtender. Here's the ModalPopupExtender. I drop that on the page. That will be under the Panel.
Now, I need to change some properties for this extender to make it work with what I have above, right? Let's go ahead and change some of those properties and see what kind of properties we have. The first thing that I'd like to change is the TargetControlID, the Target Control that triggers this to happen. The TargetControlID is the Button, because when I click on the Button I need the modal to show up, my modal dialog. The target control in this case is "Button1". Right? That's the Button that we added up here. Button1 is the target.
The next thing that I'd like to change is the PopupControlID, because what control do you want to pop-up to the user so he can take action? Well, in this case, the Popup Control is my panel, right? That's what I want to show the user. So, PopupControlID equal and I say in here, "Panel1".
Continuing with that, I'd like to also have the background. What's going to happen in the background when this dialogue shows up? The BackgroundCSSClass and also I need to add that class shortly with the other class for the pop-up. I did not add those yet. Let's call it modalBackground, OK? Let's call that modalBackground. OK? That's the Modal that I need to have on the page.
I can change some properties on the page. For example, do I need DropShadow on this one? Yes. We need some drop shadow so we can set the property equal to true on that. Next, when the user clicks "OK," what Button triggers that? When the user clicks cancel, which Button triggers that? OK? I have the OKControlID equal to the Control that triggers the "OK" which is the 'btnAgree'. That's when I say "OK." So that's the 'btnAgree' that you see here.
Now, I have the elements that I'd like to add for my control. Let's see what else we can do so we can work with this control. One thing inside the Control Toolkit, and you see in here, after I finish my properties, one thing that I can do inside is add some animation. You see I have the option of doing animations in this case, and by the way before I forget, I mentioned in the previous video that I need to point you to the link where the animations are. Here it is, that's the animation reference that contains the list of animations and what methods the names, the properties, the methods, the references, all the information that you can work with, and, again, here's the Parent animation, selection animation, all of that.
That's the reference that you see on the top here. You see that. That's the www.asp.net/ajaxlibrary/ACT_animation_reference.ashx. Make sure you copy this to work with these animations. So, then, in this case with animations I'm going to go with OnShow. I'm sorry, not OnShow, it's OnShown. Then, of course, there is the OnHiding. OK? So, OnShown, what that control shows, what do you want to happen? In this case, OnShown, I'm going to call, sorry, let me go ahead and close that correctly. Instead of OnShow, it's OnShown. When that's done, I'm going to call, when that's triggered, I'm sorry, I'm going to call FadeIn. I'm going to make the panel fade in when it shows. Then, OnHiding, you guessed it, I'm going to make that FadeOut. I have OnShown, FadeIn, and then OnHiding, I have FadeOut. That's the animations that I'm interested in for this control. Let's go ahead and save that.
In here, inside the 'head', I have the styles. The modalBackground, I have the background color to be 'Gray' and the Opacity is 0.7. That's when the Panel shows up, how you want the background to work. The Popup is the one for the Panel. I want the background color to be 'White'.
Let me copy those scripts and give them to you. The first function is OnAgree(). It will alert thank you for your approval. On disagree it will alert "I appreciate your feedback. I will work," that should say work, "harder to make it better." So, this is the function Onagree and OnDisagree. Let's go ahead and save.
Let's right click on the page and view that in the browser. I have the page that needs to show up with the Button on the bottom. Based on the control that I just created, the modal pop-up, when the user clicks on the Button it will trigger that control. So, I click on Feedback and you'll notice a few things.
First of all, it's in modal because you notice I can click, I cannot click anywhere on the page, only this Panel that has the focus. You'll notice the background is Gray. Opacity is 0.7, right? The control, which is the panel that shows up, has a background of white with the text that shows up to the user. You saw the drop shadow and you noticed a couple of buttons, Agree and Disagree.
Now I can work with the page. If I click on feedback again and it shows fade-in, I click on "Disagree," it triggers the second function, "I appreciate your feedback. I'll work harder to make it better." When I click "OK," it fades out, and it's gone. That's the modal pop-up that shows up and asks the user for some feedback, asks the user for some attention. As you'll notice, this type of control is very powerful when you're working with your website and adding some Ajax to it. That's asp.net Ajax.
I hope this discussion has been helpful to you. Please, again, drop us any feedback on the Mr. Bool website, if you have any concerns or have any questions.
Thank you very much for listening. I'm Ayad Boudiab and you have a good day.