[How Do I:] Use the ASP.NET AJAX ModalPopup Extender Control?

You guys make this too easy!

:) Thanks !!!

These are good things for me!! Thank you

That's what I'm talking about. Easy.  Thanks.  

I got one for you.

Adding context menu to a ListBox.

mmmmm.. Can yo ugive me an example ?

Feel free to email me via my blog at www.joeon.net

Joe:

In the past I used Telerik RAD controls which allowed ModalPopups to contain individual web pages from either the same project/solution or a different web site page altogether.  

I don't have use of that assembly anymore and was wondering if there's a way to accomplish the same thing using the AjaxControlToolkit ModalPopup?

All of my searches show that this AJAX control supports panels exclusively.  I actually placed an iFrame within a panel, within a ModalPopup but have a very buggy-javaScript parent page.

I am desperate... any ideas on how to do this?

Thanks in advance

How would you set it up so that you can pass in a dynamic string to display in the ModalPopup? I'm trying to replace the javascript 'alert' function I use now for popup messages so I can use CSS to make my popups nicer.

I'm guessing DynamicServiceMethod has something to do with my question?

Joe,

I have a need to use the modalpopup, but the code I need to use is all in a separate ASPX page.  I can change that to an ASCX user control. WOuld that work as the popup control?  How would I set the controlID (ok and cancel), since they would be controls in the ASCX?

Any help would be apprciated.

I'd like to use the Modal Popup Extender triggered by a link button in a GridView Control... is this possible?

I found several articles on using from within a gridview.  Here are a couple:

www.aspdotnetcodes.com/Ajax_ModalPopup_PostBack_GridView.aspx

aspalliance.com/1509_Working_with_ModalPopup_Ajax_Control.all

I just did a gridview on a modal pop today. It's AWSOME. I just used the regular basic panel popup scenario, placed a LINQ datasource on the page and wired it to a gridview on the panel to be popped up. Works great though I haven't figured out how to get the ModalPopupExtender OkControlID wired to the row select on the gridview. I'm on the trail of using a template field to select the row so I can have a named control......  If you figure that one out let me know.

i just did this example and run it on my 2 different browsers to find out that when following these exact steps Internet Explorer 7 does not show the modal pop up while Mozilla does. does anybody know why??

to Joe: thanks for this very useful videos

Hi Joe, i am trying to get the   Modal Popup Extender triggered when the user clicks  on a hyperlinked ProductID field in a gridview. How should i approach this.

realjuancho - can you emal me a sample ?

javed - what do you want to happen when the user clicks? Feel free to email me via the COntact form on my blog at www.joeon.net

I just want a AJAX popup window with Close button. The popup will only display the product details.

To javed:

Why dont you just put a small close button? or even take a small "x" image and use CSS to position it on top of the panel?

I suppose the cancelControlID captures the click event on any control to close. I could be terribly wrong though.

Masfenix:

What you are saying is correct but my intention is to display records in a GridView with ProductId as HyperLinked Field. When the user clciks on this hyperlink i want to pop an AJAX Modal PopUp to display Product detail and a Close Button only, i am having no problem on ButtonClick event but i just cant get this thing to work on hyperlink.

sir joe,

good day..

can you help me with my problem i find this tutorial so helpful..

but my problem is how can i associate this modal pop up extender in my grid view and having a database in ms access..

pls help me sir.. i wanted only my program that if i click on a current record in gridview it will pop out all the records of the name you click in details view nad there you can edit,cancel and update that record that i click..  pls help me sir..

thanks in advance sir..

migs

NEWBIE

sir joe,

good day..

can you help me with my problem i find this tutorial so helpful..

but my problem is how can i associate this modal pop up extender in my grid view and having a database in ms access..

pls help me sir.. i wanted only my program that if i click on a current record in gridview it will pop out all the records of the name you click in details view nad there you can edit,cancel and update that record that i click..  pls help me sir..

thanks in advance sir..

migs

NEWBIE

migs8teen, this is what you might be looking for:

www.aspdotnetcodes.com/Ajax_ModalPopup_PostBack_GridView_Sample.aspx

hi,

I need to use the modal popupextender in my application. but I have a master page in my app. and I need to add the script for the OK button. where and how can I add the script to my contentplace holder?? could you please help me?? and I need to call the button_click method of the OK button of the modal popup in which i interact with the database. How can I do that??

So do you want the code in the masterPage or in the deriving page ?

Good Stuff Joe!  I'm working my way through all of these using VS2008.  I noticed that the 'filter' and 'opacity' properties are getting flagged with a 'is not known CSS property name.'  I'm guessing this is a VS2008 bug as the opacity really happens when I run it, but I thought I would check to see if there is a more up-to-date term that should be used here.

i want the code in the deriving page...not the master page..

Ward - your are correct, I think it'sjust an Intellisence / Schema glitch.

Hi there

Is it possible to add multiple ModalPopupextenders to the Same page.

When I try this only the first one works.

I'am using VS2008 - Toolkit 3.5

Regards

Thanks Stagner,

It is really cool tool!

Can I gray out part of a page using tool?

In my page I have Treeview, I want to keep it active while              displaying the modelpopup, is it possible?

Thanks.

Hi Joe Stagner,

   Its really good video. I have a question for you. I am using ModalPopup Extender in our application, through coding I am making the extender visible, ModalPopupExtender.Show() method. Its working fine when I am executing it with out using a control like button. If in the button click if I am using the same statements its not working. Can you please tell me what might be wrong in my coding.

Thanks & Regards

Bharath Reddy VasiReddy

Hi Joe,

    One more question, if I am removing display:none attribute from the panel then it is working once. after that is does'nt show up.

Thanks

Bharath Reddy VasiReddy

I can`t do this because my VisualStutio 2008 dosen`t know the <ajaxToolkit:ModalPopupExtender ...

how can do this?

When I create a modalpopupextender, it pops up in center of screen - how do I make it pop up relative to the control that "spawned" it?

My Ajaxtoolkit control doesn't have a "position" property -instead of <Ajaxtoolkit:modal...> it's <cc1:modal...>

Is that something else?

Hi

I want to update WYSIWYG editor (with HTML code) using ModalPopup. I am not even able to update label/textbox.

can anybody PLZ help ?? ?? ??

VS 2008 and AjaxTK 3.5

The modal popup just closes when i try to update/refresh some data inside.

Next time I open it the update did occur the data/ change is there - but why didnt the modal popup stay open?

This used to work perfectly with .Net 2.0 I use it constantly, now nothing works.

I have run SP1(beta) but this changes nothing - whats going on?

Please help...

What is the case, if i have huge data on my web page.

The Modal popup extender stops working and the error message is

Stop running the script?

A script on this page causes Internet Explorer running slowly.If it continues to run, your computer may become unresponsive.

The above error message coming in IE only. in mozilla it's working very fine.

Can you please tell me some solution.

thanks

-praveen.

I wanted to use the popup control for multiple Modle Popup extenders is it possible ?

Wow, great, but I'm having a problem.

It works fine but

I have used a flash animation clip in my web page. the popup showing behind the flash animation. Is there any way to solving this problem? Thanks in advance.

its a fantastic video, it helped me a lot in solving a critical problem :) thanks Joe

It is simple and good....

Can I ask what product you used to create these videos?

Thanks

I am  calling a  calendar popup (web user control) from the Model Popup Extender panel , the calendar popup is not comming, please help me..

Hi,

I am using this Modal dilog box. The example shown here is client side and what trying to implement is a server side modal dialog. Here is the scenerio that i had. Once i click on the link, the modal dialog opens and i need to add 2 dropdowns in which the second dropdown loads based on the first dropdown selected. And based on the second dropdown value i need to change the the main page content.

Now my problem is when i am selected the first drop in the modal dialog, the modal dialog disappears...means when the post back occurs the modal dialog disappears..

any help on thi issue is greatly appreciated...

thanks..

Many thanks Joe for the excellent video series

Hi,  

I have a question for all of you guys...I want to show the modalpopup up if the condition is satisfied and if the condition is not satisfied then i don't want to show the modalpopup.

Thanks in advance.

We are consuming a webservice in our website and at one point it will take about 30-40 second do display the data.

To keep user happy I want to show a modal popup box which will display rss feed, while in background the data is still being fetched.

My question is when it displays the modal popup box, will it continue to fetch the data in the background and is it possible to display something on modal popup box when data is received so that user knows that data is there.

Any idea, example would be appreciated.

Thanks

Hi Joe, i'm quit new with AJAX, and want to know something.

My problem is that the modalpopupexterder execute a postback on server.

The problem with the server postback is each controls are recreated and "x query" to database are also made. I know i can do some caching here but...

Any way to open a ajax modal popup with some javascript parameters that are passed to the "updated panel" postback when the popup show?

Exemple, the main page show 1 listbox and 1 button. The listbox show "Description" and have "ID" has values. When the button is clicked the modalpopup will show more information about the selected values. So the button should pass to the modalpopup someparameters, then the modal should have a updatepanel or something like this who will call back the server to render the appropriate details content of specify ID.

Anybody can help?

thanks

Thank Joe.

And all participant thanks for your valueable comments.

Mohammed

Oh!

This is an insane control.

I love it.

Thankz Joe.

I've used this AJAX control to open images or other panels.  Is it possible to open a pdf in a modal window?  I'm guessing using an IFrame or something to load the document.  Suggestions?

I have a modal popup in the masterpage which displays a usercontrol. How do i link the CancelControlID of the popup to the usercontrol button. Ur help will be appreciated

Hi Joe,

Please help me.  I am using modalpopup it is fantastic, and I do not have any problem with Firefox. however, in IE7 I get some problems. It does not lock the main page, no color is made for it,(It guess BackgroundCssClass="modalBackground" does not affect) and below my page a gray color is created and extends my web page in terms of height!!! what can cause this problem?  :(

Thanks very much

Does any know how to prevent the popup layer to close when there is a postback event on the layer.

Example, once the popup is applied, and I select a country on the dropdownlist. This country doropdownlist will perform postback and get the list of the state/province. But it seems like every time it has a postback, the layer page is closed.

thanks,

Chai

I need to assign a value that the user inputs in a modal popup to a global variable. My problem is when the modalpopup is closed so is the value in the global variable that is assigned? any help?

Hi Joe,

I am wondering when you could reach me.

I am having a Master Page and a Child Page that have many

Asynchronous Post-back controls. ( Buttons, Textboxs, GridViews and so on)

So, i need to implement Ajax Progress to each and every Post-back control. In that user may Visualize which control is in Progress ( in Post back mode) and so on.

So in this way My page may have many Postback control user may triggers the event and showing each and evry control is in Progress ( in Post back mode).

This is great if you could provide me a working sample.

Thank you any way.

ZeroCool.

hey its simple. to-the-point and ofcourse a best complete quick reference.

Hi

I use

                TargetControlID="btnSelectAcc"

                PopupControlID="PopPanel"

                BackgroundCssClass="modalBackground"

                DropShadow="true"

                OkControlID="btnOK"

                OnOkScript="OKClick()"

                OnCancelScript="Cancel2_Click()"

                CancelControlID="Cancel2"

                RepositionMode="RepositionOnWindowScroll"

              />

           Width="650px">

               <uc1:LoadAcc ID="LoadAcc1" runat="server" />

               <asp:Button ID="btnOK" runat="server" Text="تایید" />                

<%--                <asp:Button ID="btnCancel" runat="server" Text="انصراف" />                --%>

               <asp:Button ID="Cancel2" runat="server" Text="انصراف2" onclick="Cancel2_Click" />                

           </asp:Panel>

and This Event Of btnCancel

protected void Cancel2_Click(object sender, EventArgs e)

       {

           Session["AccList"] = "";

       }

But Error !!! "Object expected"

Help me

tnx

I must criticize the way that modalextender positions the desired object. Let's say that I have a dynamic layout of some sort. I need to have dynamic popup window as well. Now, why popupextender meddles with the position I've just set? -Furthermore it seems, that I have no way of setting the position through extender eighter, since public properties X and Y are integers, thus X="10%" or Y="5em" are out of the question. No extender or html element should say where or how element should be positioned, right? That is determined by css or in lack of it, the default css style.

Here's some css+html for clarification.

<style type="css/text">

#Selector

{

 position: absolute;

 top: 15%;

 left: 35%;

 min-width: 150px;

 max-width: 300px;

 width: 15%;

}

</style>

   PopupControlID="Selector"

   TargetControlID="Link"

   OkControlID="Foo"

   CancelControlID="Bar"

   Drag="true"

   PopupDragHandleControlID="SelectorHeader">

Wardgp

"...I'm working my way through all of these using VS2008.  I noticed that the 'filter' and 'opacity' properties are getting flagged with a 'is not known CSS property name.'  I'm guessing this is a VS2008 bug as the opacity really happens when I run it, but I thought I would check to see if there is a more up-to-date term that should be used here..."

I don't think it is a bug at all. Css2 standard does not inclide "opacity" or "filter" styles. In fact there is no such thing as "filter", "opacity" is part of css3 standard, which is not yet supported by VS2008, since it is not widely supported by many browsers. The keyword "filter" is MS addon, and is no longer in VS2008, since the studio tries to honour the todays web standards.

"Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering."

www.w3.org/.../css3-color

Cheers!

-Mika

It seems, that MS made opacity even more complex with IE8. If you want to get best possible support for opacity, you should use following css styles:

opacity: 0.5; /*css3 standard*/

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =50)"; /*MS proprietary for IE8*/

filter: alpha(opacity=50); /*MS proprietary for IE5-7*/

In that exact order.

See more at: www.quirksmode.org/.../opacity.html

-Mika

www.quirksmode.org/.../opacity.html

Tats an nice demo.. I really used this feature very well..

Hi Joe...first of all nice video....and tutorial to.. My problem is that , When i click on the Ok button of popup , have few fields that should get populated to database. That code is written in cs file. So tell me how can i call that function , on OK button click. Let me explain i detail

I had a dropdown having some values. There is one item called other. if a user click on other the modlpopup will display, as you shown in your video with a form having say , name, class,roll etc with OK and cacel button. If user fills oup the form and clicks ok then the data will populate to db. Also one mor ething i want to put validation inside that modalpopu..How can i achieve that....Reply ASAP...Thanks..and regards

AMit Ranjan...

Sorry, lots of spelling mistakes above...actually missed keystrokes....hope you people do not mind...[:)]

One more thin can i call a existing registration to that modal popup or any popup...??? This will sort out my problem in sec...

Is there any way to check whether the modal pop extendar has opened any pane or not ?

Hi Joe

First of all I would like to thank you for this wonderful video. I am having an issue with the modal background css. The problem I am having is when the modal pop up opens, it doesn't gray out the background which gives the user the ability to click again. I have included the stylesheet and evrything. Could you please tell me where I am wrong?

Hello,

I need some help...FYI, I am a novice to asp.net and ajax after years of classic asp I finally stepped to asp.net 3.5 with Ajax.

Here is my issue, I am using an asp:Calendar control and display events for each date on the calendar and am actually making the events be link buttons to open a modalpopupextender as I want to display the event information in the popupextender.

I am having no problems adding the linkbutton event control to the calendar cells.  My problem is with invoking the modalpopupextender2.show().  I keep getting an object expected error.  I am mimicing a dummy (hidden) button as sender.  Here is my code:

Dim lb As LinkButton = New LinkButton

lb.Text = eventTitle

lb.ID = eventTitle + "_button"

lb.OnClientClick = "showmodal(popupButton,'" + eventI + "')"

e.Cell.Controls.Add(lb)

and here is the sub it is calling:

   Sub showmodal(ByVal sender As Object, ByVal e As String)

       Me.ModalPopupExtender2.Show()

   End Sub

this is in vb using visual studio express 2008.  It works fine like this on a static button click, my problem is that the link button are created dynamically and ID are set to match the event title plus "_button".  I am initially just worried about getting the modalpopupextender to show and will handle the popup display after I get past this part so for now just have dummy test text.

here is a link to the page to give you an idea of what the calendar looks like.  The link button display different forecolors based on location of event, color-key will be posted on final project of course...

test.rmpcaz.net/.../officeCalendar.aspx

an update on my post...

I created a hidden LinkButton named "popupLinkButton" and am programatically naming all of the dynamic link button to that ID and using the .CommandArgument as:

lb.CommandArgument = lbID

here is my new lb.OnClientClick:

lb.OnClientClick = "BLOCKED SCRIPT__doPostBack('popupLinkButton','" + lbID + "')"

I can now get the modalpopupextender to show but am not able to change my label text on the modal, see:

   Protected Sub popupLinkButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles popupLinkButton.Click

       Me.ModalPopupExtender2.Show()

       EventIDLabel.Text = "This is The e value " + e.ToString()

   End Sub

I tried with putting changing the label text before the .Show() and after but no difference...

I figured out why it wasn't showing, because of a stupid oversight...I had the modal panel outside of the updatepanel I was using.

My problem now is getting the lbID from the postback parameter as the ByVal e as System.EventArgs, e isn't taking the value of that parameter.  I tried chaning to ByVal e as CommandEventArgs and got an error trying to cast CommandEventArgs as System.EventArgs unmatched signatures.

I got it working the proper way...My sub was in my code behind and I was doing an .OnClientClick (client side)...

changed it to a javascript function and am now able to open the modal and pass my event ID successfully.

Thanks! Jërëjëf!

How would I be able to launch the modalpopupextender from SERVER SIDE.  Launching from client side is only for example code, and is hardly useful in the real world.  I need to be able to do a database lookup when I press a button, then take that data, construct a string, and pass it to the modal popup, so that the modal popup displays the string that I pass it, and then returns whatever the user selected to the main page.  I mean using onclick is just for date validation and hardcoded values right?  Am I missing something here?  Would I do a database lookup from sql server in client side?  I think not, but correct me if I am wrong.  Also, how would I use the popup extender to popup an .aspx page.  I want to put the actual popup content in a different page than I am launching the popup from.  

Hi

I would really appreciate if anybody could resolve my issue. I have a webform implementing master and I have 3 content areas in this form such as Header,main area and footer. I have placed a modal popup in main area which opens perfectly graying out the main area background. The oproblem is I need the pop up to gray out the entire page including Header and footer content areas.Any ideas?

Here is an update to my previous post...

I finally got the Dynamic Created LinkButtons to work the way I wanted them to instead of using javascript for the Modal to see which button requested it.

I had to create a hidden button and named it "ModalLinkButton" and Set a Dummy CommandArgument. And in the code behind I did the following (this is in a Calender control where I am adding multiple events to a given day cell if any events are in my database for that day, so it is on the DayRender sub). When the day is matched and an event is in the table I create the button, giving it the text of the event title.  I name it the same as the hidden button for simplcity although you can name the id to whatever. Added the CommandArgument which I do not believe matters with the exception of having a command argument it uses the Command sub instead of Click sub.  You then need to add an Attribute for "onClick" and enter the postback command.  My example is how I had to reference it and left it this way as an example that you must use the full reference of your hidden button and mine is nested in a placeholder and then a tabcontainer and a tabpanel (named Office in my case) and then the link button.  FYI, easiest way to get the full postback parameter is to have the hidden linkbutton not hidden when initially creating and put the mouse over it and check the status area for the path.  Next, since I found out that a typical button does not get a EventArgument, I am including my event id for the eventArgument parameter so I can get the event ID selected.  The last step was to include a mouseover attribute to change the cursor as IE was not displaying the hand cursor over the link button as it should (IE 7 and IE 8) when created from code behind.  I also did colors and specified underlining but left that out for simplicity example.

Dim lb As LinkButton = New LinkButton()

lb.Text = eventTitle

lb.ID = "ModalLinkButton"

lb.CommandArgument = dr("id").ToString()

lb.Attributes("onClick") = "BLOCKED SCRIPT__doPostBack('ctl00$ContentPlaceHolder1$Calenda rTabContainer$Office$ModalLinkButton','" + dr("id").ToString() + "')"

lb.Attributes("onmouseover") = "this.style.cursor='hand'"

Now, with the linkbutton's created, I can click on them and request the eventargument, apply the value to a hidden label and then open the modalpopup.  The EventID.Text is a label on the modal I used for testing.

   Protected Sub ModalLinkButton_Command(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.CommandEventArgs) Handles ModalLinkButton.Command

       Dim eID As String = "Hello Command: " + Request.Params("__EVENTARGUMENT").ToString()

       EventIDSelected.Text = eID

       EventID.Text = eID

       EventPanel.Visible = True

       ModalPopupExtender1.Show()

   End Sub

I hope this helps many, as it drove me crazy.  I wound up mixing examples from different searches I found as none of the others worked properly for me.  This is in VB, but I am sure someone can translate it to C# if needed.

correction to above, the "hidden linkbutton" is not hidden, it just displays no text so therefore is not visible.  Making visible = false on the "master" linkbutton causes the modal to not popup but will open the panel.

Great video! thanks

My page size is getting increased when I use it in my application???

Thanks, Joe, for all your vid's.  They have helped me get up to speed quickly.  I am trying to invoke the modalpopupextender.Show method from javascript using the folowing code: var modext= $find("ModalPopupExtender1");

modext.show(); .  It works great until I place the componet inside a master page.  The the $find() fails to locate the component.  What's the secret?

Fixed it already.  I changed to the doing the $find on the BehaviorID instead.  It found the component, but the Show method still fails.  Duh!, the method is .show instead of .Show  .  Thank anyway!!

How do you implement this with a master page.  I need the default.aspx, page1.aspx, etc. to display the modal popup extender.

Hi Joe,

I have a dropdown control on a modal popup with the default value as >>Select>>. I am doing a page postback for selectionchanged event of the dropdownlist. The page postback DOES NOT occur for the first selection change, but it does postback from there on. Please let me know how to do a postback for the first selection change in the dropdownlist. Thanks.

-Sid

I watched the video but have not been able to put together a solution to my problem which is:

I have a login page that check to whether the user is in the db which works however I need to inform the user hopefully via the modalpopupextender that they entered the wrong ID number.

On the login page I added:

 <asp:Button ID="btnOK" runat="server" Height="29px" Style="left: 35px; position: relative;

top: 21px" Text="OK" Width="53px" />

</asp:Panel>

and

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"

            TargetControlID=""

            PopupControlID="pnlValidator"

            BackgroundCssClass="modalBackground"

            DropShadow="true"

            OkControlID="OkButton"  />

On the code behind file in the Page_Load I added

MPE.Hide()

The goal is this

If lblEmpName.Text.ToString = "0" Then

    modalpopupextender here

   re-render current page

Else

     continue

End If

How to I tell the .aspx page that the target is lblEmpName.Text.ToString = "0"; which ought to trigger the modelpopupextender to show with the OK button?

Thank you

Ayomide

I am having a problem. I can get my panel to display correctly. However this panel needs to be able to save record data intered into it/updated in it. The submit button and cancel buttons do nothing at this point. The code behind them is run server side via a postback. How can i use this type of control and still make the panel post back the data correctly?

Funny how IntelliSense has no knowledge of the Style attribute. Yet, when looking at the Properties of the Panel object, there it is. Sometimes IntelliSense is not the whole Truth.

thanks joe!

Joe,

Another great video!  I'm attempting to implement a modal popup on my website.

Thanks

Danny

PS.

I'm still waiting on the media center interface page to the asp.net videos.

Hi Joe, your video is very good. but i am having problem when displaying the modal popup, there is an iframe on the page and the content of the iframe is a pdf which is being displayed within the popup is there a way to solve it

Well, I dunno if i should ask here, but how can i solve this:

I have a LoginStatus control on the page. And I want it, if user is not logged in, to show a ModalPopup containing a Login control, otherwise (if user is logged in) to logout him and show nothing. U guys know how to do this?

I am wondering whether the modal popup can be used to dynamically display information to the user based on what they have selected (e.g. clicking an item in a Listview would popup a box showing the selected item's description. If so, when should I retrieve the description information (this requires a postback)...

Thanks for this.

Is it possible, to call an external page, in the panel ?

I added an iframe in the panel, i want to call an external page in my iframe, how do i achieve this ???

Theses components work excelent!! really.

but only when the screen is sample. If to do anything diferent don't work.

the InvalidOperationException is throwed.

i have problem while using modal pop up...!

I placed my modal popup extender inside the ajax tab conatiner..!all the content of page doesnt show up if i put modal popup extender in that.

So any one know about this problem....

Regards...!