Saturday 19 May 2012

show processing image when click on button and freeze background in asp.net

                           This post gives some useful information to beginner's  those don't know to design the page.
here i am just blocking the background screen to stop clicking any buttons or controls in the page. so with this u can click on particular button to freeze the screen


Example : 


             in the following example i am taking one registration form to show the processing


    after filling all the required fields click on the save button it will take some time to inseret the fields in database. in the meanwhile user should not click on any buttons or controls for that u can do the following design or logic.... 

In aspx Page:

<body>
    <form id="form1" runat="server">
  
   <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <div style="background-color: Transparent; color: Black">
            <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
                DisplayAfter="0">
                <ProgressTemplate>
                    <div style="top: 0px; height: 100%; background-color: White; opacity: 2.75; filter: alpha(opacity=75);
                        vertical-align: middle; left: 0px; z-index: 999999; width: 100%; position: absolute;
                        text-align: center; vertical-align: middle">
                        <table width="100%" height="100%">
                            <tr>
                                <td align="center" valign="middle">
                                    <img id="Img1" src="Processing.gif" runat="server" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
        <table width="100%">
            <tr>
                <td valign="middle" align="center" style="padding: 50px;">
                    <table width="500px" style="height: 500px; background-color: #b4cfe4;">
                        <tr>
                            <td width="100%" valign="bottom" style="padding:10px;">
                                <span style="font-family: Times New Roman; font-weight: bold; color: Red; font-size:20px;">Please fill
                                    the following form to complete registration</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="100%">
                                <table width="100%">
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblFirstName" runat="server" Text="FirstName :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtFName" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblLastName" runat="server" Text="LastName :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtLName" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblCity" runat="server" Text="City :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="textCity" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblState" runat="server" Text="State :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtState" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblPhone" runat="server" Text="PhoneNumber :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblEmail" runat="server" Text="EMailID :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblpwd" runat="server" Text="Password :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%" align="right" style="padding: 5px;">
                                            <asp:Label ID="lblcpwd" runat="server" Text="ConfirmPassword :">
                                            </asp:Label>
                                        </td>
                                        <td width="60%" align="left" style="padding: 5px;">
                                            <asp:TextBox ID="txtcpwd" runat="server" TextMode="Password"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="100%" align="right" style="padding-bottom: 50px; padding-right:15px;">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                    <ContentTemplate>
                                        <asp:Button ID="btnSave" Width="100px" runat="server" OnClick="lnkbtnSave_Click"
                                            Text="Save" />
                                        <asp:Button ID="btnCancel" Width="100px" runat="server" Text="Cancel" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</form>
</body>

                 So when u click on save button the scrren will be freezed (upto finish the code written in button click) and it will come back to normal

Final Output:




Note : 1) To work with this example should place   'script manager '  in the form
           2) No need to write any code for processing image in cs page(u can write ur logic such as insert,update or etc....)


Thank U

    

1 comments:

  1. The solution worked fine for me. Thanks.

    ReplyDelete