how to use update panel with model extender popup - asp.net

Question

I have a link on update panel,when i clicked on Cure Loan,model extender pop up should come up but instead of one popup all the popup on the page is come up
so please give me the solution how to use update panel with model extender pop up
here is my code
<asp:UpdatePanel ID="UPCureLoan" runat="server">
<ContentTemplate>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="click" />
</Triggers>
Panel->
<table style="width: 100%; background-color: #DDE2E5;">
<tr style="background-color: #522E8B; color: white; height: 50px">
<td colspan="4" style="text-align: center; font-size: medium"><b>Notification</b></td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="3" style="font-size: medium;"> I confirm that I have discussed the borrowers concerns with the borrower.<br />
Please enter your initials to confirm
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td></td>
<td colspan="3" style="text-align: center">
<asp:CheckBox ID="CheckBox4" runat="server" Style="transform: scale(2) !important;" Height="20px" Width="20px" /><b> Resend Borrower Survey 1 </b></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr style="text-align: center">
<td> </td>
<td>
<td>
<asp:Button ID="Button4" runat="server" Text="Close" Height="30px" Width="120px" />
<asp:Button ID="Button5" OnClick="popupConfirm1" runat="server" Text="Confirm" Height="30px" Width="120px" /></td>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<%-- <cc1:CalendarExtender ID="CalendarExtender2" TargetControlID="TXTDate" Format="MM/dd/yyyy" runat="server" />--%>
</asp:Panel>
Model extender Popup->
ID="Modalpopupextender5" runat="server"
PopupControlID="Panel5" TargetControlID="hidForModel"
BackgroundCssClass="gridView" OkControlID="ButtonSave">
</cc1:ModalPopupExtender>

Answer 1

You are not using the UpdatePanel control properly.
All you're doing there is placing some HTML code (which is incorrect) inside the ContentTemplate.
<ContentTemplate>
<%-- Where is your <table> etc? --%>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
You also have your other code outside of the UpdatePanel.
All your code that has to be controlled by the Panel and the modalpopup, must be inside the UpdatePanel. BUT your ModalPopupExtender itself can be outside the UpdatePanel. In fact, it should if you're treating the UpdatePanel as a "popup box".
This is how I use UpdatePanels with AJAX:
Firstly set up your styles for the background, the panels and the popup itself.
<style type="text/css">
.pnlCIR
{
position: absolute; top: 20%; left: 22%; width: 400px; border: 3px solid LightSlateGray;
background-color: #E0E8F0; padding: 3px; font-family: Arial; font-size: small;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
position:fixed;
overflow:hidden;
}
</style>
Next define your AJAX popup:
<asp:Button ID="btnCIR" runat="server" Text="Suggest Improvement (CIR)" CausesValidation="false" />
<ajaxToolkit:ModalPopupExtender ID="mpeCIR" runat="server"
BackgroundCssClass="modalBackground"
PopupControlID="upCIR"
TargetControlID="btnCIR">
</ajaxToolkit:ModalPopupExtender>
Next define your UpdatePanel as a "wrapper" around your code that you want to be inside the panel (in my case the "CIR" panel)
<asp:UpdatePanel ID="upCIR" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCIR" runat="server" CssClass="pnlCIR" Width="700px">
<your code>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Note:
You must use UpdateMode conditional
You must have a Panel inside the UpdatePanel, so that the Panel is the actual popup, and the UpdatePanel is the control that keeps postbacks inside the UpdatePanel, avoiding the dread "postback flash" on your entire screen.