Modal Pop up is not displaying update panel in asp.net - asp.net

Question

This is my aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="TotalFee.aspx.cs" Inherits="TotalFee" %>
<%# Register assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
// function ok(sender, e) {
// alert("Hello");
// __doPostBack('btnCreateBill','btnCreateBill_Click');
// }
// function cancel(sender, e) {
// $find('ModalPopupExtender1').hide();
// }
//
</script>
<style type="text/css">
.style2
{
font-size: x-large;
font-family: "Times New Roman", Times, serif;
}
.style3
{
color: #FF0000;
}
.panel
{
position:static;
top: 80%;
left:50%;
background-color:Aqua;
}
.modalBackground
{
z-index:auto;
}
</style>
</asp:Content>
<asp:Content ID="Content2" runat="server" contentplaceholderid="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<table style="width:100%">
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="Classlabel" runat="server" Text="Class" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:DropDownList ID="ClassDropDownList" runat="server" Width="150px"
DataSourceID="SqlDataSource1" DataTextField="ClassName"
DataValueField="ClassName" AutoPostBack="True"
onselectedindexchanged="ClassDropDownList_SelectedIndexChanged">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:dbbilling2.0ConnectionString4 %>"
SelectCommand="SELECT [ClassName] FROM [tblClass]"></asp:SqlDataSource>
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="StudentNamelabel" runat="server" Text="StudentName" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:DropDownList ID="StudentNameDropDownList" runat="server" Width="150px"
DataSourceID="SqlDataSource2" DataTextField="StudentName"
DataValueField="StudentID" AutoPostBack="True">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:dbbilling2.0ConnectionString3 %>"
SelectCommand="SELECT [StudentID], [StudentName] FROM [tblStudentInfo] WHERE ([Class] = #Class)">
<SelectParameters>
<asp:ControlParameter ControlID="ClassDropDownList" Name="Class"
PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="Monthlabel" runat="server" Text="Month" CssClass="style2"></asp:Label>
<br />
<br />
<br />
<br />
<br />
</td>
<td valign="top" align="center">
<asp:DropDownList ID="MonthDropDownList" runat="server" Width="150px"
DataSourceID="SqlDataSource3" DataTextField="Month" AutoPostBack="true"
DataValueField="Month" OnDataBound="MonthDropDownListDataBound"
onselectedindexchanged="MonthDropDownList_SelectedIndexChanged1">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource3" runat="server"
ConnectionString="<%$ ConnectionStrings:dbbilling2.0ConnectionString2 %>"
SelectCommand="SELECT [Month] FROM [tblMonth]"></asp:SqlDataSource>
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="MonthlyFeelabel" runat="server" Text="Monthly Fee" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:TextBox ID="txtMonthlyFee" runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="MonthlyFeeValidator" runat="server"
ControlToValidate="txtMonthlyFee" CssClass="style3">*</asp:RequiredFieldValidator>
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="TransportFeelabel" runat="server" Text="Transport Fee" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:TextBox ID="txtTransportFee" runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="TransportationFeeValidator" runat="server"
ControlToValidate="txtTransportFee" CssClass="style3">*</asp:RequiredFieldValidator>
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="Hostelfeelabel" runat="server" Text="Hostel Fee" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:TextBox ID="txtHostelFee" runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="HostelFeeValidator" runat="server"
ControlToValidate="txtHostelFee" CssClass="style3">*</asp:RequiredFieldValidator>
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="ECAFeeLabel" runat="server" Text="ECA Fee" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:TextBox ID="txtECAFee" runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="ECAFeeValidator" runat="server"
ControlToValidate="txtECAFee" CssClass="style3">*</asp:RequiredFieldValidator>
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width:300px; vertical-align:top;" align="left" >
<asp:Label ID="DueFromPreviousMonthLabel" runat="server"
Text="Due From Previous Month" CssClass="style2"></asp:Label>
<br />
</td>
<td valign="top" align="center">
<asp:TextBox ID="txtDueFromPreviousMonth" runat="server" Width="150px" Text="0"></asp:TextBox>
<asp:RequiredFieldValidator ID="DueFromPreviousMonthValidator" runat="server"
ControlToValidate="txtECAFee" CssClass="style3">*</asp:RequiredFieldValidator>
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="TotalFeeLabel" runat="server" Text="Total Fee" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:TextBox ID="txtTotalFee" runat="server" Width="150px" ReadOnly="true"></asp:TextBox>
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
<asp:Label ID="PaidLabel" runat="server" Text="Paid" CssClass="style2"></asp:Label>
</td>
<td valign="top" align="center">
<asp:CheckBox ID="ChkPaidLabel" runat="server" />
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" >
</td>
<td valign="top" align="right">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="150px"
onclick="btnSubmit_Click" />
<asp:Button ID="btnReset" runat="server" Text="Reset" Width="150px" />
<asp:Button ID="btnCreateBill" runat="server" Text="CreateBill" Width="150px"
OnClick="btnCreateBill_Click"/>
<%--<asp:PopupControlExtender ID="btnCreateBill_PopupControlExtender" OffsetX="-1100" OffsetY="115"
runat="server" DynamicServicePath="" Enabled="True" ExtenderControlID=""
TargetControlID="btnCreateBill" PopupControlID="UpdatePanel1">
</asp:PopupControlExtender>--%>
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;" align="left" colspan="2" >
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ModalPopupExtender ID="ModalPopUpExtender1" runat="server" PopupControlID="UpdatePanel1"
TargetControlID="UpdatePanel1" DropShadow="false" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
<rsweb:ReportViewer ID="ReportingForPrintingReportViewer" runat="server" Visible="false" CssClass="panel"
Width="100%" Height="100%" Font-Names="Verdana" Font-Size="8pt"
InteractiveDeviceInfos="(Collection)" WaitMessageFont-Names="Verdana"
WaitMessageFont-Size="14pt">
<LocalReport ReportPath="Report.rdlc">
<DataSources>
<rsweb:ReportDataSource DataSourceId="ObjectDataSource2" Name="DataSet1" />
</DataSources>
</LocalReport>
</rsweb:ReportViewer>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server"
SelectMethod="GetData" TypeName="DataSet1TableAdapters.tblTotalFeeTableAdapter">
</asp:ObjectDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Content>
and this is my cs page:
protected void btnCreateBill_Click(object sender, EventArgs e)
{
ModalPopUpExtender1.Show();
DisplayReport();
}
Why isn't UpdatePanel1 being displayed when we click btnCreateBill?? I want to show UpdatePanel1 as popup when i click btnCreateBill
When I placed modal pop up extender inside my updatepanel1 it gave the error
An extender can't be in a different UpdatePanel than the control it extends.

Answer 1

Because its outside the updatepanel, bring it inside the update panel to make it appear. You cannot access and change state of controls outside update panel when a event is fired in the update panel.
When a event is fired in a update panel, only controls in the update panel can be accessed and modified.
<td style="width:150px; vertical-align:top;" align="left" colspan="2" >
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ModalPopupExtender ID="ModalPopUpExtender1" runat="server" PopupControlID="UpdatePanel1" TargetControlID="UpdatePanel1" DropShadow="false" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
<rsweb:ReportViewer ID="ReportingForPrintingReportViewer" runat="server" Visible="false" CssClass="panel"
Width="100%" Height="100%" Font-Names="Verdana" Font-Size="8pt"
InteractiveDeviceInfos="(Collection)" WaitMessageFont-Names="Verdana"
WaitMessageFont-Size="14pt">
<LocalReport ReportPath="Report.rdlc">
<DataSources>
<rsweb:ReportDataSource DataSourceId="ObjectDataSource2" Name="DataSet1" />
</DataSources>
</LocalReport>
</rsweb:ReportViewer>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server"
SelectMethod="GetData" TypeName="DataSet1TableAdapters.tblTotalFeeTableAdapter">
</asp:ObjectDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</td>

Answer 2

instead of using updatepanel on modalpopup panel you can try something from code behind to serve the purpose.
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
CancelControlID="btnCancel" PopupControlID="Panel1"
TargetControlID="HiddenField1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="Panel">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" Height="34px" RepeatDirection="Horizontal"
Width="129px" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem>Option1</asp:ListItem>
<asp:ListItem>Option2</asp:ListItem>
</asp:RadioButtonList>
<asp:TextBox ID="txt1" runat="server"
Visible="False"></asp:TextBox>
<asp:TextBox ID="txt2" runat="server"
Visible="False"></asp:TextBox>
</asp:Panel>
===========================================
Code Behind:
===========================================
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedIndex == 0)
{
txt1.Visible = true;
ModalPopupExtender1.Show();
}
else
{
txt2.Visible = true;
ModalPopupExtender1.Show();
}
}