Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with ModalPopupExtender in ASP.NET and Ajax - Lesson 09 | .net courses

In this portion of Ajax Control Toolkit, we will talk about the ModalPopupExtender. This extender will show a “dialog” to the user to take action.

Duration: 18 minutes

Summary: In this portion of Ajax Control Toolkit, we will talk about the ModalPopupExtender. This extender will show a “dialog” to the user to take action. The user will not be able to interact with the rest of the page until he/she takes action on the dialog (the other dialog that allows the user to interact with the page is called a modeless dialog). We start by adding some text to the page and asking the user for feedback using the button. Clicking the button will trigger the modal dialog. The dialog is a panel that contains some text and two buttons (agree / disagree). You will see that the background of the page turns gray and the opacity is 0.7. When the user clicks on a button, the action will trigger a JavaScript function to be called. You can use any server control on the Panel and you can also make it fancy by adding some CSS.

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.

Video Transcription:

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.

When the user clicks cancel what's the CancelControlID? The CancelControlID, in this case, btnDisagree. That's my choice. OK? Then, if you could run some script in this case, when the user clicks a button you can run some JavaScript to proceed. If the user clicks "OK" then I'm going to use OnOkScript to do something. When the user clicks cancel I'm going to use that OnCancelScript to do something. That's also JavaScript.

In this case then, OnOkScript would be equal to a JavaScript that you don't see yet. I'm going to add that JavaScript. So there are two things I'd like to add, the CSS, and the JavaScript that I don't have yet. On the OnOkScript I'm going to call the function OnAgree(). That's a JavaScript function. Don't forget the parenthesis. Then, for the second one, the OnCancelScript, Im going to add the JavaScript function, which is OnDisagree(). I have OnAgree() for the JavaScript function and OnDisagree() for the JavaScript function. Don't forget the parenthesis again.

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 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.

Let's scroll up to the top of the page where I can add my JavaScript and the CSS. Of course, in here, we have in the head section, I need to add the CSS and I need to add the JavaScript. Let me go ahead and give you the styles first. Remember, there is the 'Popup' and there is the 'modalBackground'.

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'.

So I covered for the Panel. I have the CSS being Popup which is going to give me the background white and then for the Ajax Control ModalPopupExtender I'm using the modalBackground as the background which is going to give me a Gray color and a Opacity of 0.7. The only thing that's left is basically the JavaScript functions that will be called when we have the OnAgree and OnDisagree. OK?

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.

Clicking on those buttons should trigger the JavaScript. As you notice, the panel has fade in, and when I click on one of those it should fade out. I say "agree" and it says, "Thank you for your approval." That's the one that triggers the Agree. When I click "OK" you'll see it fades out and it comes back to the normal.

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 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.

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login