Block All User Input when iteracting with server

Question

Hello, I have some actions that interact with the server and take some time... i'm trying to block all form fields in a page when i'm interacting with the server... I thought of finding all controls in a page dynamically and setting enabled=false inside update panels and enabling them again when finished.. but I don't think that this is the best way to do this... Anyone who've already did this? any suggestions?

Answer 1

Try the BlockUI JQuery plugin.

Answer 2

plz use use this code to accomplish this and let me know, if you feel any problem.. this will show progressbar as well and block the background as well.. Reference URL...http://www.codedigest.com/Articles/ASPNETAJAX/125_Using_UpdateProgress_Control_Effectively.aspx

<asp:UpdatePanel ID="upnl" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div id="dvMain">
                    your page content....
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>

<asp:UpdateProgress ID="upnlProgressBar" runat="server" AssociatedUpdatePanelID="upnl">
    <ProgressTemplate>
        <div align="center" class="prgbar">
            <img src="../Images/progressbar.gif" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<style>
    .Background
    {
        position: relative;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=40);
    }
</style>

<script type="text/JavaScript" language="JavaScript">
    function pageLoad() {
        var manager = Sys.WebForms.PageRequestManager.getInstance();
        manager.add_endRequest(endRequest);
        manager.add_beginRequest(OnBeginRequest);
    }
    function endRequest(sender, args) {
        $get('dvMain').className = '';
    }
    function OnBeginRequest(sender, args) {
        var postBackElement = args.get_postBackElement();
        if ((postBackElement.id == 'btnSubmit'))
         {
            $get('dvMain').className = 'Background';
            $get('upnlProgressBar').style.display = "block";
        }
    } 

</script>