UpdatePanel外部的按钮

时间:2014-04-14 19:43:25

标签: c# jquery asp.net ajax updatepanel

以下是我遇到问题的完整代码。

单击but_OK按钮时,UpdateProgress面板不会显示。但是,如果我把" dmgConfirm" UpdatePanel,UpdateProgress面板中的DIV。如何使UpdateProgress面板showup将But_OK保持在UpdatePanel外部?

<%@ Page Title="Test Jquery" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TestJquery.aspx.cs" Inherits="EluxDamageClaims.TestJquery"  %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

 <asp:UpdateProgress ID="updProgress"
    AssociatedUpdatePanelID="UpdatePanel1"
    runat="server">
        <ProgressTemplate>           

    <div class ="divProgressBarBack" >
    </div>
      <div class ="divProgressBar">
           <img alt="progress" src="images/ajax_loading.gif"/>
           <h1> Processing...  </h1>
    </div>      
        </ProgressTemplate>
    </asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate >


        <asp:Button Text="Make Visible" ID ="btnMakeVisible" runat="server" OnClick="btnMakeVisible_Click" />
        <asp:Panel runat="server" ID="pnl" Visible ="false" >

对话框

<!-- ui-dialog -->
    

Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

 <input id="hbtnConfirm" type="button" value="Submit" onclick="openModalDiv('dmgConfirm');" />


            </asp:Panel>

                                        

 <div id="dmgConfirm" title="Damage Claim Confirm " >
        <b> Please confirm your submission ?. You cannot undo this operation.</b><br /><br />

       <table>
           <tr> <td><asp:Button ID="but_OK"  runat="server" Text="Confirm" OnClick="but_OK_Click"  />   </td>
               <td> <input id="Button2" type="button" value="Cancel" onclick="javascript: closeModalDiv('dmgConfirm');" /></td>
           </tr>
       </table>
    <br />
     </div> 
</asp:Content> 

2 个答案:

答案 0 :(得分:0)

你必须提到按钮的触发器 - 让它甚至可以在页面的任何位置 - 它仍然会触发UpdteProgress Panel内容。

<asp:UpdatePanel>
........
........
<Triggers> <asp:AsyncPostBackTrigger ControlID="but_OK" EventName="Click" /> 
</Triggers> 
</asp:UpdatePanel>

答案 1 :(得分:0)

发布工作代码FYR(点击&#34;确认&#34;)

ASPX:

 <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:UpdateProgress ID="updProgress"
        AssociatedUpdatePanelID="UpdatePanel1" 
        runat="server">
        <ProgressTemplate>
            <div class="divProgressBarBack">
            </div>
            <div class="divProgressBar">
                //<img alt="progress" src="images/ajax_loading.gif" />
                <h1>Processing...  </h1>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>


            <asp:Button Text="Make Visible" ID="btnMakeVisible" runat="server"  />
            <asp:Panel runat="server" ID="pnl" Visible="false">
                <input id="hbtnConfirm" type="button" value="Submit onclick="openModalDiv('dmgConfirm');" />


            </asp:Panel>
            <div id="dmgConfirm" title="Damage Claim Confirm ">
                <b>Please confirm your submission ?. You cannot undo this operation.</b><br />
                <br />

                <table>
                    <tr>
                        <td>

                        </td>
                        <td>
                            <input id="Button2" type="button" value="Cancel" onclick="javascript: closeModalDiv('dmgConfirm');" /></td>
                    </tr>
                </table>
                <br />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
<asp:Button ID="but_OK" runat="server" Text="Confirm" OnClick="but_OK_Click"  />
</asp:Content>

代码背后:

    protected void but_OK_Click(object sender, EventArgs e)
    {
        UpdatePanel1.Update();

    }