Wednesday, March 28, 2012

postback inside modalpopupextender

I want to show a modalpopupextender that contains: a textbox ,A button, gridview, ok button , close button: when the user click on A button the gridview must be populated , I need this behavior inside the modalpopupextender but it seems like modalpopupextender does not support any control that make a postback, How can I manage this??

Best Regards

Joseph

I already have done this what you need to do is,

let say. btnSearch popups your ModalpopupExtender,

when you click in side the control do one thing only in the code behind, of that click event either grid pageindexchange, sortiung, any button click in the last. that is.

ModalPopupExtender1.Show()

it will keep showing the popup until you click close button or call a method.

ModalPopupExtender1.Hide()

It is trial and tested, even I have done more than this in my application.

IF THIS MAKES ANSWER PLEASE CLICK ANSWER ON MY POSTING

Regards,


Hi Killerjocker,

My understanding of your issue is that you want to show some controls include the GridView and generate(update) the content inside it when click on the Button which is associated with the ModalPopupExtender. If I have misunderstood, please feel free to let me know.

In my opnion, I think the easiest way for your situation is adding a UpdatePanel into the Panel which is associated with the ModalPopupExtender and the GridView is put inside the added UpdatePanel. When user click on the Button, the UpdatePanel will be refreshed by sending a asynchronous post and then the shows the ModalPopupExtender. Here is a sample:

<%@. 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"
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#FFD9D5;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button2" runat="server" Text="Button" Enabled="false" style="display:none"/>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="50px" Width="235px" style="display:none" DefaultButton="Button4">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now.ToString()%>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Cancel" />
<asp:Button ID="Button4" runat="server" Text="Button" />
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button2" PopupControlID="Panel1" CancelControlID="Button1" DropShadow="true" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<input id="Button3" type="button" value="Click Me" onclick="showModalPopup()"/>
<script type="text/javascript" language="javascript">
function showModalPopup(){
__doPostBack('<%=UpdatePanel1.UniqueID%>','');
$find("<%= this.ModalPopupExtender1.ClientID%>").show();
}
</script>
</form>
</body>
</html>

I hope this help.

Best regards,

Jonathan

No comments:

Post a Comment