模态弹出窗口未在 asp.net 中显示更新面板答案

【问题标题】：Modal Pop up is not displaying update panel in asp.net模态弹出窗口未在 asp.net 中显示更新面板
【发布时间】：2013-04-24 07:40:23
【问题描述】：

这是我的 aspx 页面：

<%@ 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">
       &nbsp;&nbsp;&nbsp;
       <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">
       &nbsp;&nbsp;
       <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">
       &nbsp;&nbsp;
       <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">
       &nbsp;
       <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">
       &nbsp;
       <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>

这是我的cs页面：

protected void btnCreateBill_Click(object sender, EventArgs e)
    {
        ModalPopUpExtender1.Show();
        DisplayReport();

    }

为什么我们点击btnCreateBill时没有显示UpdatePanel1？？当我单击 btnCreateBill 时，我想将 UpdatePanel1 显示为弹出窗口当我将modal pop up extender 放在我的updatepanel1 中时，它给出了错误扩展器不能位于与其扩展的控件不同的 UpdatePanel 中。

【问题讨论】：

标签： asp.net updatepanel modalpopupextender

【解决方案1】：

因为它在更新面板之外，所以把它带到更新面板里面让它出现。当更新面板中触发事件时，您无法访问和更改更新面板之外的控件状态。

在更新面板中触发事件时，只能访问和修改更新面板中的控件。

<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>

【讨论】：

当我尝试您的解决方案时，我收到以下错误：- 扩展器不能位于与其扩展的控件不同的 UpdatePanel 中。我正在发布我的完整 aspx 代码，请看一下.....
在调用中的某处您正在访问或修改 UpdatePanel1 之外的控件，这就是您收到此错误的原因。 displayreport() 有什么作用？

【解决方案2】：

您可以尝试从后面的代码中进行一些操作来达到目的，而不是在 modalpopup 面板上使用 updatepanel。

                <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();
            }
        }

【讨论】：