update progress for ajax modal popup called from server side

Reply

Member

9 Points

update progress for ajax modal popup called from server side

Oct 30, 2014 10:18 AM|dson|LINK

Im trying to call ajax modal pop up from code behide file in c#. my modal popup contain a message and two buttons Yes /no . and have to execute some function inside the yes button in server side. I wnt to use update progress while system executing the server side function of yes button click event. How to do that....

I already have a update progress along with page that will dispaly for all control in this page. but when i used the below pannel4 associated with modal popup.. its events ( yes button click) not displaying any updates..

<asp:Button ID="Button5" runat="server" Text="Button" CausesValidation="False" Style="display: none" />

<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel4" TargetControlID="Button5"
CancelControlID="btnmsgCancel" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>

<asp:Panel ID="Panel4" runat="server" CssClass="modalPopup2" align="center" >
<table style ="width: 100% ; height :100%;">
<tr>
<td colspan = "3" align ="center" style =" height :60%;">
<asp:Label ID="lblmsg" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td colspan= "3" style =" width:2px;">
<hr/>
</td>
</tr>
<tr>
<td align ="right">
<asp:Button ID="btnmsgOk" runat="server" CssClass="btn" Width="60px" Text="Ok" OnClick ="btnmsgOk_Click"/>
</td>
<td style =" width :50px;">
</td>
<td align ="left">
<asp:Button ID="btnmsgCancel" runat="server" CssClass="btn" Width="60px" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>

protected void btnmsgOk_Click(object sender, EventArgs e)

{

// some functions here

//while executingg themm update progress has to work..

}

Reply

Fei Han - MS...

All-Star

39315 Points

5751 Posts

Microsoft

Re: update progress for ajax modal popup called from server side

Oct 31, 2014 01:43 AM|Fei Han - MSFT|LINK

Hi dson,

Thanks for your post.

dson
I already have a update progress along with page that will dispaly for all control in this page. but when i used the below pannel4 associated with modal popup.. its events ( yes button click) not displaying any updates..

As for your problem, you could refer to the below sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="btnmsgOk" runat="server" Text="OK" OnClick="btnmsgOk_Click" />
                    <asp:Panel ID="Panel1" runat="server" align="center">
                        <asp:Label ID="Label1" runat="server" Text="Update in progress..."></asp:Label>
                        <br />
                        <asp:Button ID="btnClose" runat="server" Text="Close" />
                    </asp:Panel>

                    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                        <ProgressTemplate>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    <asp:ModalPopupExtender ID="UpdateProgress1_ModalPopupExtender" runat="server" Enabled="True" TargetControlID="UpdateProgress1" PopupControlID="Panel1">
                    </asp:ModalPopupExtender>
                </ContentTemplate>
            </asp:UpdatePanel>

        </div>

        <script>
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(showpop);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(hidepop);

            function showpop(sender, args) {
                $find('<%= UpdateProgress1_ModalPopupExtender.ClientID%>').show();
            }

            function hidepop(sender, args) {
                $find('<%= UpdateProgress1_ModalPopupExtender.ClientID%>').hide();
            }
        </script>
    </form>
</body>
</html>

Besides, you could refer to the example in this link.