AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 ModalPopup Extender with PostBack and Set Focus
Posted by Moderator1 on 6/12/2007 10:06:08 AM Category: AJAX
Total Views : 281261
Add to my favorites
Email to friend
  
Introduction
This article explains about the Asp.Net AjaxControlToolkit's ModalPopup with Postback and Focus setting methodology.
Description
I have seen in many asp.net forums, the developers post lots of questions on Asp.net’s AjaxControlToolkit's ModalPopup extender. Actually they want to do postback operations and want to set focus on the controls placed in the ModalPopup window. So I think many web developers who used AjaxControlToolkit will be very much pleased if someone address this issue. May be Ajax Future Release might give the solution for this problem, but what about the current developments which is already undergone in AjaxControlToolkit.
Guys, I found a trick to solve this issue. So I would like to share it with you all, how I made the ModalPopup extender to postback and perform the code-behind operation. Also how I set the focus to the TextBox control in ModalPopup. Then click when you the OK button on the ModalPopup, it will postback.

To achieve this, in your MS Visual Studio, open a new Ajax Enabled Website. Add a Master Page and a Default Page. Set the MasterPageFile property of the Default page to the point to the Master Page. To the Default.aspx page, add a Hyperlink control, a Label and a Panel control. Inside the Panel, add a Textbox and two Buttons, one to OK and another for Cancel.
The actual flow is, when you click on the Hyperlink the ModalPopup has to open, the focus should be on the Textbox. You have to type some text in the Textbox, then click on the OK button. The page will get postback and your typed text will appear in the Label control on the main page. That’s it.

Now we will see how to do it. First set the TargetControlId of the ModalPopup extender to the Hyperlink name. Then set the CancelControlID to the Cancel Button, OkControlID to the OK Button and the PopupControlID to the Panel1 in your Page. Set the BackgroundCssClass property as to the following style class.
.modalBackground 
{
background-color:<Your Desired Color>;
filter:alpha(opacity=70);
opacity:0.7;
}
This style sheet class keeps the background effect dull. So now you can run your application. When you click the HyperLink, the ModalPopup comes to action. Sure it will impress you lot. No postback and no focus on your Textbox, only cancel button will function. Now we can see how to set focus on the Textbox.
<script>
        var clientid;
        function fnSetFocus(txtClientId)
        {
        	clientid=txtClientId;
        	setTimeout("fnFocus()",1000);
            
        }
  
        function fnFocus()
        {
            eval("document.getElementById('"+clientid+"').focus()");
        }

</script>
On your aspx page, copy and paste the above two javascript functions. As we are using the MasterPage, the client id of the TextBox will be changed. So the function fnSetFocus(txtClientId) is used to the assign the ClientId of the Textbox to a local variable. Then the setTimeout calls another function fnFocus(). This function will be called exactly after 1 second, that is after the ModalPopup gets popped up, then this function is responsible to set the focus on the Textbox. And in your code behind's page load event, you have to add a line of code as follows.
HyperLink1.Attributes.Add("onclick", "fnSetFocus('"+TextBox1.ClientID+"');");
This line adds the javascript function on the client-side click of the HyperLink. Now run your application, sure after the ModalPopup gets on screen, exactly after a second you can see the focus on the Textbox. Even you can adjust the timings to half second. Next, we will concentrate how to perform postback action when the OK button on the ModalPopup is clicked.

First, add a javascript function to call the __dopostback event. The function must look like the below.
function fnClickOK(sender, e) { 
__doPostBack(sender,e); 
} 
Then in your code-behind, you must assign the OnClientClick property of the OK Button on the page load event. The code is
Button2.OnClientClick = String.Format("fnClickOK('{0}','{1}')", Button2.UniqueID, ""); 
When the OK button is clicked, postback should perform some action. So let us assign the Textbox value to the Label control. Add the following piece of code in your OK Button's onclick event.
Label1.Text = "You Type "+TextBox1.Text;
That's it. Now run your application. When you click the Hyperlink, the ModalPopup will appear. Next you can see the focus on the TextBox. Type your name in the Textbox and press the OK Button. I'm sure your Name will be assigned in the Label. This I tried based on my knowledge, and its a trick to bring focus and postback. If you find better way to acheive this I welcome you to post that article here. Thanks.

Wanna to try my Sample, click here.
Viewer's Comments
Posted by Dee on 6/24/2007 12:33:16 PM
doesn't pop-up in firefox
 
Posted by Moderator1 on 6/26/2007 12:58:42 AM
We have checked this in both FireFox 1.0 and FireFox 2.0.0.3. The modalpopup and postbacking is working perfectly. please let us know which version you are using.
 
Posted by samzon on 6/28/2007 1:56:20 PM
Very nice job. I have been pondering this problem the last couple of days and by acident I stumbled across this web site and may I say "YOUR MY HERO" :) . Also no problems using it in either IE or Firefox.
 
Posted by erwin on 7/1/2007 9:04:44 AM
i tried it in vs.net 2005, but panel is not popup(window doesn't modal window), i can still click hyperlink. the page is not disable
 
Posted by chronos on 7/2/2007 10:17:02 PM
hi, do you know a way to connect modal popup to double click event in gridview? I can open a modal window in ie when double click event triggered, but I haven't find a way to call modal popup extender. Can you help me to connect the double click event in gridview with modalpopup extender? since the window.showdialog doesn't run in firefox
 
Posted by Khurram on 7/4/2007 6:49:04 AM
Hi, Just tried this and it works like a charm. Only one problem tho.... On postback my button's Click event is firing twice. Anybody having this issue?? Please let me know as this is quite annoying because I am inserting into database in the click event and it is inserting twice! thanks.
 
Posted by Khurram on 7/4/2007 8:27:14 AM
Re: click event firing twice... Ok, this was happening because I had set the handle for my button's click event. Apparently there is no need to and removing this will eliminate the double postpack. thx!
 
Posted by seadog on 7/9/2007 4:06:18 PM
I second the post by samzon. I had to get this implemented today and this works perfectly. Thanks very much for posting this solution!
 
Posted by ajaxr on 7/12/2007 4:07:47 PM
Works great! Thanks for the post!!
 
Posted by Swati Shah on 7/14/2007 10:41:35 PM
Can i have your source code? I am using usercontrols within usercontrols and am unable to make this work.
 
Posted by **** on 7/19/2007 12:27:34 PM
actually i want to set focus after click event is fired. All the application based on master pages so when we are using TextBox1.Focus().then focus is not coming after firing the event . Please solve this problem .
 
Posted by pankaj on 7/19/2007 12:29:26 PM
actually i want to set focus after click event is fired. All the application based on master pages so when we are using TextBox1.Focus().then focus is not coming after firing the event . Please solve this problem
 
Posted by tskillback on 7/23/2007 9:32:07 AM
Works like a charm. Thanks!
 
Posted by Hans on 7/23/2007 12:35:50 PM
It works well. However, I need to display the popup when clicking an image button in a gridview cell. Because there isn't a unique control that can be set as the TargetControlID, I'm stumped as to how to implement the Modal Popup. Any suggestions?
 
Posted by Danish Ali on 7/28/2007 3:01:16 AM
Great article.. But iam having a small problem while applying it... the back ground color is not changin....... can any one guide me with this... thankx
 
Posted by Rykio on 8/10/2007 9:52:41 PM
Very nice! But if i need postback for several times in the same popup,it holds on all the time and just closes when i close it, what should i do? The efficiency is not very important to my project ,but the developing friendly. Thanks,and my email: torykio@msn.com
 
Posted by bruce on 9/25/2007 3:57:08 PM
Excellent job. It worked perfectly for me.
 
Posted by Alex on 9/28/2007 10:20:43 AM
Excelent! Y added the javascript and the onClientClick event in my code behind and it works ok.
 
Posted by Chance on 10/1/2007 12:27:14 PM
What do I need to change to get it to work when calling modal popup in code beind?
 
Posted by Chance on 10/2/2007 9:06:11 AM
I'm not sure where to call the javascript from because no button is clicked.
 
Posted by Brent on 10/10/2007 10:30:07 AM
Very nice! Exactly what I needed.
 
Posted by Brent on 10/10/2007 10:30:43 AM
Very nice! Exactly what I needed.
 
Posted by Dvir on 10/17/2007 6:59:31 AM
Thank you I used your JS method to focus after the event and it worked perfectly at my local server. but somehow it would work on the site... have any idea?
 
Posted by hariharan on 10/30/2007 1:50:32 AM
Really thanks a lot... You were helped me in solving my problem. Its working fine
 
Posted by Renjith on 12/7/2007 1:47:39 PM
Man, just superb!
 
Posted by Anand on 8/12/2008 1:02:44 PM
Thanks Alot .....Superb!!!
 
Posted by Harish on 8/14/2008 8:54:51 AM
Nice and simpe solution! You can also save the ID of the control with input focus before the update panel is updated and set input focus back to that control after the update panel is updated. To read further: http://couldbedone.blogspot.com/2007/08/restoring-lost-focus-in-update-panel.html
 
Posted by Fabio on 8/17/2008 1:12:30 PM
Nice work. Good Job
 
Posted by ops... some problem on 8/17/2008 1:35:58 PM
In the postback onclick event, the textbox does not contain his value modified by me, but the initial value. I use an UpDownExtender to modify the text box in the modal dialog, Put the initial value is 1, I set its value to 3... when i press OK button starts the postback but in the code behind if i read the textbox i read 1 and not 3... help!
 
Posted by ops... some problem on 8/17/2008 1:45:22 PM
ok... the problem is the upDown... i don't know why and don't know how to solve this too... a simple textbox reports his changed value... the upDownExtender works like if the value is never changed... bah
 
Posted by ops... some problem on 8/17/2008 2:22:58 PM
ok... it was my fault... sorry for all these messages... All works! sorry again :(
 
Posted by Tony on 8/27/2008 11:07:32 AM
Excellent, elegant solution! I actually wasted hours trying to do this before I found your article. Thanks so much! By the way, I'm using it on a UserControl within a UserControl within an ASPX page, and it works great.
 
Posted by Lakshmanan.M on 9/1/2008 7:28:14 AM
Its really interesting and I want some information about AJAx and how to use Each tool in my application
 
Posted by jolly on 9/2/2008 4:17:13 AM
But when PopExtender is avtice then Background page can be accessed using Tab Key. Please suggest the soln for this.
 
Posted by Mark on 9/25/2008 1:16:40 PM
Moderator1, you the man. Thank you for this example. I was starting to get frustrated before I found this article, which helped me out immensely. Jolly, write some javascript to capture tab keystroke and throw it out man.
 
Posted by travis on 9/26/2008 8:23:05 AM
Thanks for the help, exactly what I needed
 
Posted by Richard on 10/17/2008 8:53:28 AM
I wrote this generic solution, stick it on your master page after the script manager and it should work for all popups on your page without having to manually do each one! function InitFocusPopups() { for (var comp in Sys.Application._components) { var element = Sys.Application._components[comp]; var isPopup = typeof(element._PopupControlID) != 'undefined'; if (isPopup)
 
Posted by Alex on 11/4/2008 4:56:16 PM
Very good article. Incredible that Microsoft don't seem to have figured out things like this, but there we go. One quick question - how can we fire a serverside event when the popup is called. For instance, you will probably need a serverside function to clear (or populate) controls before they are displayed. I had a couple of goes, but it seems whenever you attach a clientside event to the button that triggers the dialog, it causes the dialog to blink on, then off straight away. (If I solve thi
 
Posted by Bill on 11/5/2008 8:11:59 AM
The solution for postback doesn't call the server-side's button_click event (assuming you set one up) so all it does is let you catch the event from Page_Load. So in that case, why not just call __doPostBack(event.srcElement.id, ''); as I've always done since it does the same thing? I think the first arg can actually be blank too.
 
Posted by Bill on 11/5/2008 8:27:27 AM
Here's the answer for postback. Set UseSubmitBehavior=false on the OKButton. It only made since that the AjaxToolkit people would have allowed this ability. http://forums.asp.net/p/988059/1277351.aspx#1277351
 
Posted by muhammad hassan on 11/18/2008 5:23:13 AM
great thanks man, searching for that
 
Posted by rupesh on 11/18/2008 6:32:07 AM
Not Working in I.E 7.0
 
Posted by MrBigglesworth on 11/25/2008 6:25:41 PM
I can't seem to get this to work in IE 7 either. Your sample works fine - I get a javascript error when it calls the _dopostback() - in the source it looks like everything else. Could you show us the source to your sample?
 
Posted by Chanto on 12/7/2008 1:53:03 PM
In IE7 the postbacks work for me with these two changes: 1) don't set the OnClientClick script and 2) set the UseSubmitBehavior="false" for the controls you want postback to happen on.
 
Posted by Spencer on 12/7/2008 10:48:54 PM
DudeMan, you are a genius! Thank you for this wonderfully simple solution!
 
Posted by gomsy on 12/13/2008 4:11:54 AM
it's really benifitial for all developer.
 
Posted by Abhishek nigam on 12/18/2008 6:31:00 AM
this was simply awesome.....!!!!
 
Posted by sector0 on 12/21/2008 1:49:38 PM
There is a simpler way of achieving total control over modal pop-up. Client-Side-- Assign a behaviour ID to modal pop-up. It doesnt get changed when rendered, so you can get reference to modal pop-up with it. $find('BehaviourID').show(); $find('BehaviourID').hide(); This will hide and show your modal pop-up. Sever Side- modalPopupID.Show() modalPopupID.Hide() Do not provide OK and Cancel control ids. Now add asp:button in the pop-up.It posts back. Maintain the display of pop-up my using the
 
Posted by sector0 on 12/21/2008 1:51:08 PM
oops.. max length restrictions on reply
 
Posted by sector0 on 12/21/2008 1:52:11 PM
functions hide()/show() on (on client/server) Do not provide OkControlID and use this approach.
 
Posted by sector0 on 12/21/2008 1:53:14 PM
contact me on sector0000h[at]gmail[dot]com for any help regarding this.
 
Posted by Hildemar on 12/21/2008 5:36:14 PM
It would improve viewing for everyone. I am from Canada and also now teach English, give true I wrote the following sentence: "Have you ever thought about how to start a housecleaning business? How to start a house cleaning business." With best wishes :-(, Hildemar.
 
Posted by Keskin on 12/23/2008 7:09:10 AM
Works perfectly. Thanks a lot...
 
Posted by lalitha on 12/29/2008 11:27:14 PM
ok button is not firing........ when i click hyperlink and type in text box nothing is displaying in the label
 
Posted by lalitha on 12/29/2008 11:34:16 PM
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <script type="
 
Posted by DS on 12/31/2008 10:31:27 AM
I am having a problem of "click" event not getting executed from ModalPopupextender when SaveButton is clicked. I tried above method mentioned by "sector0" but not working. The only difference is that I can creating everything dynamically in server Control. I have created Panel, Textboxes, SaveButton, CancelButtons and ModalPopupExtender dynamically. Any help is highly appreciated. Thanks.
 
Posted by Sachin Gandhi on 1/2/2009 11:17:20 AM
Very good stuff. I was browsing from last two days for the solution. Your article helped me. Thanks a lot.........
 
Posted by Barnabas on 1/18/2009 2:09:47 PM
Hi. The only way to get rid of a temptation is to yield to it. I am from Japan and also am speaking English, give please true I wrote the following sentence: "But have no money? Successful entrepreneur erica douglass shows how she started a business with no money." Thanks for the help :(, Barnabas.
 
Posted by Glenn T on 1/22/2009 4:12:26 AM
Your a legend - nice work! Ive been looking at this for hours!
 
Posted by Arif on 2/22/2009 5:36:12 PM
Greate...Worked perfectly for me....
 
Posted by Sue on 3/29/2009 10:16:04 AM
Thank you very much; this worked GREAT for me.
 
Posted by Ironmike on 4/2/2009 7:21:14 AM
Good stuff. Simple and straightforward example.
 
Posted by Dave on 4/13/2009 10:37:38 PM
As for the postback issue, I think there is a simpler way to achieve this by setting the UseSubmitBehavior="false" on the modal dialog button that you want to cause the postback. Doing this appears to prompt ASP.NET to output a call to __doPostBack() when the button is clicked.
 
Posted by juandbarraza on 4/20/2009 10:59:27 PM
Thnx bro!!!!!!!!!!!!!!!!!!!
 
Posted by Pankaj Kumar Singh on 5/1/2009 11:32:54 AM
Very very thanks for this article. I got solution from article.
 
Posted by Rida on 5/11/2009 1:30:20 PM
Hi. In the future I'm going to keep here links to their sites. But I do not worry about the sites where my link is removed. So if you do not want to see a mountain of links, simply delete this message. After 2 weeks, I will come back and check.
 
Posted by Rahul on 5/14/2009 5:20:27 AM
I was around this set focus issue for a long time... We were keeping it as a known issue for the previous two months
 
Posted by Sheehan on 5/15/2009 6:38:33 AM
Greeting. The man who has nothing to boast of but his illustrious ancestry is like the potato - the best part under ground. I am from Tonga and now study English, give true I wrote the following sentence: "Material in a purchase synthroid to list the internet sales are stepping up." Thank you very much 8-). Sheehan.
 
Posted by NenCh on 5/15/2009 10:03:52 PM
what about in grid view.. How do you do that??? when you click a value on the modalpopup, the value should be transferred to a textbox on the page...
 
Posted by Sandip Patil on 5/22/2009 8:14:43 AM
Thanks u saved my time......
 
Posted by che on 6/4/2009 4:28:41 AM
thanks a lot!! just what i need
 
Posted by Rag on 6/15/2009 1:24:14 PM
It does not work on Firefox 3.0
 
Posted by koti on 6/17/2009 7:49:43 AM
VS 2005 I tried this one but it is not showing modalpopup also when click on Button1..it is simple stays in idle mode..still the problem persists.. How to get this one....
 
Posted by Rajesh on 6/23/2009 10:13:31 PM
Excellent friend!!! Really Nice. Keep sharing friend. Thanks alot.
 
Posted by John on 6/25/2009 4:17:07 PM
Hey, this code is awesome, works perfect.. just tested it with FireFox 3 and IE8. Excellent post to help the community!
 
Posted by Umber on 6/29/2009 10:34:13 PM
man ur great.this article helped me alot.
 
Posted by Chou on 7/1/2009 2:09:50 AM
man ur great, but i have one issue, i want a popup panel extender with one cancel button , like a warning message. i don't want to refresh my webpage after closing the popup Can u advise me, Thanks a lot.
 
Posted by Mark Ainsworth on 7/30/2009 11:51:20 AM
Excellent article. I want to perform a server action when the user presses the OK button. I coded the OnClick event, but the code-behind never receives control. What am I missing? Thanks.
 
Posted by suraj on 9/26/2009 5:53:39 AM
this work fine for button but how to set focus when popup is from menuitem click event ... please reply me... it urgent
 
Posted by samir on 10/22/2009 7:27:52 AM
hi, i am using modalpopup but on ok the server side code is not called.so please tell me what should i do.
 
Posted by srikanth on 10/27/2009 4:03:52 AM
i was fresher i'm getting ths eror wat should i do to solve my error "The TargetControlID of 'ModalPopupExtender1' is not valid. A control with ID 'Panel1' could not be found. "
 
Posted by Udaykiran on 10/27/2009 9:32:23 PM
Hi, I am using a modalextender in the content page. I have used the Css as mentioned but the background doesnot gray out for me.
 
Posted by Venkata on 10/28/2009 12:29:09 PM
Great article.. just what i was looking for. Good stuff
 
Posted by Dilip Kumar on 11/13/2009 4:32:27 AM
Really its good, I found exact solution as I need
 
Posted by Swapna on 1/19/2010 2:23:53 AM
sorry ....it doesn't work am very new to asp.net with ajax can u send source to me thanks in advance.
 
Posted by nnegg34 on 2/18/2010 7:17:01 AM
The key is that the ModalPopupExtender is capurting the postbacks and preventing these from firing with the use of CancelControlID="btnCancel" OkControlId ="btnOK" You don't have to set these as they are optional, simply remove them from the markup for the ModalPopupExtander and add the line OnClick="btnOK_Click" to the Button control, this will cause the page to postback and call the associated button on click event, in your code behind. :)
 
Posted by Mahesh on 4/14/2010 10:31:34 AM
Great Article!! Thanks
 
Posted by Amit Pandey on 4/21/2010 7:31:43 AM
Its perfectly working... Thanks
 
Posted by Swatantra on 7/2/2010 1:54:19 AM
yahoooooooo!!!
 
Posted by srinivas on 7/12/2010 10:07:27 AM
Hi its post backing but iam not geting the control value
 
Posted by priyanka on 7/21/2010 7:10:26 AM
I have successfully added controls to pop up, like many check boxes ... now on check box checked event I want to show another check boxes on same popup. how can I do that plz can any one help me?
 
Posted by cihan on 8/10/2010 3:46:05 PM
great job! thanks
 
Posted by XERXIO on 9/14/2010 1:47:51 PM
Thanks a lot! it worked for me! I had a little problem at the beginning but i had to change the "onclick" event for "onmouseup" and problem solvedª
 
Posted by Rahul Behal on 10/12/2010 6:44:42 AM
Hi, Can you please post your code here..It would help us a lot.!! Thanks, Rahul
 
Posted by Roshani Zade on 10/21/2010 7:05:25 AM
Thankx a lot! Its very useful, informative article. Can u tell me about BehaviourId property of the modal popup?
 
Posted by Blessy on 11/25/2010 3:40:48 AM
Excellent ..... Good explanation
 
Posted by Nirman Doshi on 6/14/2011 4:08:21 AM
Worked like a charm!!! I tried many other solutions before, but there was at least one loophole everywhere.. Your solution saved my more hours... Thanks, Much Appreciated.
 
Posted by Valdez on 7/13/2011 11:05:53 AM
If (Not Me.ClientScript.IsStartupScriptRegistered("FocusText")) Then Dim sb As StringBuilder = New StringBuilder() sb.Append("<script type=""text/javascript\"">") sb.Append("Sys.Application.add_load(modalSetup);") sb.Append("function modalSetup() {") sb.Append(String.Format("var modalPopup = $find('{0}');", ModalPopup
 
Posted by piston on 12/16/2011 8:11:17 AM
Something simple and useful. Easy to understand and simple to implement. Thanks for cutting through all the unnecessary information and getting to the point.
 
Posted by Robert on 1/20/2012 1:51:14 PM
I am new to .net applications. Could you please provide me with the source code so I can see how this is structured. Many thanks Robert
 
Posted by Arnab Desarkar on 6/8/2012 5:14:11 PM
Your article is really very much helpful. I was struggling in finding the way of doing postback in JavaScript through Modal Popup... and your article has really solved my problem.
 
Posted by driss on 7/16/2014 12:22:51 PM
thank you very much
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
FortyThree plus ThirtyNine Equals To
 
Sponsored by
Many .NET teams are underperforming, is yours?
Programmers Heaven C# School Book - Free 338 Page eBook
The ASP.NET 2.0 Anthology: 101 Essential Tips, Tricks & Hacks - Free 156 Page Preview