How do I show postback search results on a Modal Popup?

My goal is to show the serach results in a grid view on a model popup after the user enters the search criteria on a page and presses the search button. The OnClick event handler needs to collect the search criteria, get the dataset after querying the database and bind the data to the gridview before displaying the modal popup.

My problem is that the search button's id can't be assigned to the TargetControlID of the ModalPopupProperties as it will not let the OnClick event be fired and process the postback.

Please suggest the solution/workaround.

Thanks much

Display the ModalPopup via script instead?

David,

Do you have an example or a sample of the script that I can take a look at?

The other option would be to dynamically create the popup, after I process my search funcationility. But the question is, how do I invoke the display of the popup after associating the TargetID of the search button to the dynamically created ModelPopup?

Thanks for looking into it.

Vijay

I believe the following post outlines how to display the ModalPopup with script:http://forums.asp.net/thread/1280980.aspx

HOW do I popup the model popup programmatically?

It's tried to a control click by default.
Does the model popup allow for programmatic viewing?

Thanks!

I really need this!

You can use a hidden button as the targetcontrolid of the modalpopup and have your button postback as normal. You can then call Show() from codebehind or show() from JS to show the modalpopup.

Someone posted this a while back. Another option would be to call the click method of the button you used for the targetcontrolid.

Show and Hide ModalPopupExtender from JavaScript

1) Assign a BehaviourID to the ModalPopupExtender using the BehaviourID attribute.

BehaviorID ="ModalBehaviour"

.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}

2) Use the $find method to get a handle to the Modal Popup Behaviour .

$find ("ModalBehaviour").

.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}

3) Call your hide and show methods on the acquired handle.

4) The Javascript would look like this.

<script language="javascript">function ShowModalPopup() { $find("ModalBehaviour").show(); }function HideModalPopup() { $find("ModalBehaviour").hide(); }</script>

Thanks.

I found what I needed:

ModalPopupExtender1.Show();

Hi ,

That would be me.

Here is the link to the original Post.

http://blogs.msdn.com/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

Hope this helps.

Hello,

I have a new problem.
How can I stop the modal popup from disappearing when a postback occurs.

For example, if I have a button on the modal "form", a click makes it dissappear.

Help!

Thanks!

The modal popup will disappear if the entire panel is wrapped in an updatepanel. You can move the update panel inside the panel tags or call Show() in server side code to keep it visible.