如何使用更新面板与模型扩展器弹出窗口

时间:2016-03-15 09:34:35

标签: asp.net

我在更新面板上有一个链接,当我点击Cure Loan时,模型扩展器弹出应该出现但是不是一个弹出窗口上的所有弹出窗口都出现了 所以请给我解决方法如何使用更新面板和模型扩展器弹出

这是我的代码

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

面板 - &GT;

    <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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I confirm that I have discussed the borrowers concerns with the borrower.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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&nbsp;&nbsp;</b></td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</td>
        </tr>

        <tr style="text-align: center">
            <td>&nbsp;</td>
            <td>
                <td>
                    <asp:Button ID="Button4" runat="server" Text="Close" Height="30px" Width="120px" />
                    &nbsp; &nbsp;
                    <asp:Button ID="Button5" OnClick="popupConfirm1" runat="server" Text="Confirm" Height="30px" Width="120px" /></td>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <%--  <cc1:CalendarExtender ID="CalendarExtender2" TargetControlID="TXTDate" Format="MM/dd/yyyy" runat="server" />--%>
</asp:Panel>

模型扩展器Popup-&gt;

  

     

ID =“Modalpopupextender5”runat =“server”

   PopupControlID="Panel5" TargetControlID="hidForModel"

    BackgroundCssClass="gridView" OkControlID="ButtonSave">

</cc1:ModalPopupExtender>

1 个答案:

答案 0 :(得分:1)

您没有正确使用UpdatePanel控件。

你所做的只是在ContentTemplate内放置一些HTML代码(不正确)。

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

您还有UpdatePanel的其他代码

所有必须由Panel控制的代码和modalpopup 必须在UpdatePanel内部您的ModalPopupExtender本身可以在UpdatePanel之外。事实上,it should如果您将UpdatePanel视为&#34;弹出框&#34;。

这就是我使用UpdatePanels和AJAX的方式:

首先为背景,面板和弹出窗口设置样式。

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

接下来定义您的AJAX弹出窗口:

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

接下来将UpdatePanel定义为&#34;包装器&#34;围绕你想要在面板中的代码(在我的例子中是&#34; CIR&#34;面板)

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

注意:

  • 您必须使用UpdateMode条件
  • 你必须在UpdatePanel中有一个Panel,这样Panel就是实际的弹出窗口,而UpdatePanel是在UpdatePanel中保留回发的控件,避免了恐惧&#34; postback flash&#34;在你的整个屏幕上。