I would like to be able to load the contents of a modal popup when the popup is activated. As far as I can tell, the data to be loaded (from a database) currently happens as the entire page is rendered. What I would like to happen is that the data is loaded from the databaseonly when a popup is selected.
Is this possible without a lot of effort? Can someone point to or post some sample code for this? Is this a planned feature in a future release?
Any assitance greatfully appreciated.
Adam
I do something sort of like what ur asking in my apps.
I put the modal in an updatepanel along with the button (or whatever control I have that trigger's the modals opening) and then on the server I load the popup's contents and then open it from the server using it's Show() method.
That's probably the best u can do, either way your going to have to go back to the server to load up the modal's content's so I'd say that solution should serve you well enough.
Thanks for the reply - are you able to supply an example of what you do? I'm still trying to get my head around all of these controls ...
If you just want to display content, then you could also use the Dynamic* properties of the modalpopup to call a web service method which will load the content only when the popup is shown. However, this will not work if you want server controls in the modalpopup.
For Sam's method, you need a button on the page with style="display:none;" and use this as the targetcontrolid of the modalpopup. Then let the control that will show the modalpopup postback to the server and in the event handler for that control, load the modalpopup content and call the Show() method.
Jason
All aussie thread!
Sorry Adam, but I've abstracted this scenario out into some reusable libraries so I don't have any code that demonstrates it easily.
This isn't so much of an example as a few snippet of code I have. Heres how ur button should look:
LinkButton dummyButton =newLinkButton();
dummyButton.EnableViewState =false;
dummyButton.Style["display"] ="none";
dummyButton.ID = idPrefix +"DummyButton";
You then point the TargetControlId property of the popupmodal at the dummybutton's id. This gets you around the annoying need for a button reference to exist.
Why oh why didn't they decide to extend an Panel instead of a Button?!?!
Then just call the popupmodals Show/Hide methods.
East coast massive!
Yeah...couldn't agree more. The panel is the the logical choice for the targetcontrol of the modalpopup with a button being an *optional* trigger control to show the modalpopup.
Hi,
I believe this question can be perfectly solved with either Sam's or Jason 's suggestion. But I still want to extend Jason's post by providing a small sample.
The idea is to register a showing event handler to the ModelPopupExtender on client side. In the handler, call a web service( I used a page method here ) to fetch data from server and fill the result in a DOM element( which is the rendered result of a web control ) . Here is it:
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
protected void Page_Load(object sender, EventArgs e)
{
} [System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string AccessDB()
{
// code to access database here
return "The result retrieved from database on" + DateTime.Now.ToString();
}
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"EnablePageMethods="true">
</asp:ScriptManager
</div>
<asp:Button ID="Button1" runat="server" Text="Popup via client" />
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></asp:Panel>
<ajaxToolkit:ModalPopupExtenderBehaviorID="mpe" ID="ModalPopupExtender1" PopupControlID="Panel1" runat="server" TargetControlID="Button1">
</ajaxToolkit:ModalPopupExtender
<script type="text/javascript"
Sys.Application.add_load(modalSetup);
function modalSetup()
{
var modalPopup = $find('mpe');
modalPopup.add_showing(accessDB);
}
function accessDB()
{
PageMethods.AccessDB(onComplete);
}
function onComplete(result)
{
$get("TextBox1").value = result;
}
</script>
</form>
</body>
</html>
Hope this helps.
Hi Raymond,
I think it would be better to use the Dynamic* properties of the modalpopup rather than manually hooking up the showing event. This will reduce the amount of code you have to write to achieve the same result.
Jason
Yes, it's a better idea.
