BlockUI during partial postback through JavaScript

Question

I have an ASP.NET page (WebForm1) that opens a modal dialog WebForm2 (via OpenForm2() js function) for some further processing. Upon closing the dialog I just update the UpdatePanel via JavaScript. Now the problem is, during this js call it doesn't block the UI.

This is only happening when I am calling the OpenForm2 js method from the server side (Button1_Click). As the UI already went into block mode, upon closing the WebForm2 it doesn't wait for the completion of partial postback (JavaScript) and unblocks the UI.

If I directly call the OpenForm2 js function in OnClientClick tag of the button (Button 2 in the sample), it works well and keeps blocking the UI till completion of postback.

I tried wrapping the partial postback js code in an add_endRequest, but in that case it keeps calling the refreshUpdatePanel() js method, hence blocking/unblocking the UI keeps going on. May this be happening due to two add_endRequest used on a page in that case?

Any assistance is highly appreciated in this regard.

NOTE: I have used jQuery blockUI for blocking the page during partial postbacks.

The code sample for the WebForm1 page is as follows. (The WebForm2 aspx page just have a button to close the dialog and a related js function).

WebForm1.aspx

<head runat="server">
    <title></title>
    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        function OpenForm2() {
            var url = "WebForm2.aspx";
            var width = 950;
            var height = 455; // screen.availHeight - (120 + 65);

            // open modal dialog
            obj = window.showModalDialog(url, window, "dialogWidth:" + width + "px; dialogHeight:" + height + "px; center:yes");

            // partial postback to reflect the changes made by form2
            refreshUpdatePanel();
            //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(refreshUpdatePanel);
            // ** here it doesn't wait for the completion and unblocks the UI **
        }

        function refreshUpdatePanel() {
            //window.__doPostBack('UpdatePanel1', '1');
            // a timeout/delay before a client side updatepanel postback. That compelled the UI to go in blocking again with a little screen flickering.
            setTimeout('__doPostBack("<%= UpdatePanel1.ClientID %>", "1")', 0);
        }

        $(document).ready(function () {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_initializeRequest(InitializeRequest);
            prm.add_endRequest(EndRequest);

            $.blockUI.defaults.css = {};
            function InitializeRequest(sender, args) {
                // Whatever you want to happen when the async callback starts
                $.blockUI();
            }
            function EndRequest(sender, args) {
                // Whatever you want to happen when async callback ends
                $.unblockUI();
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
        <ContentTemplate>
            <asp:Label ID="Label2" runat="server" Text=""></asp:Label><br />
            <asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_Click" />
            <asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="OpenForm2();return false;" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

WebForm1.aspx.cs

protected void Button1_Click(object sender, EventArgs e)
{
    // some server side processing here
    System.Threading.Thread.Sleep(1000);

    // then calling javascript function to open form2 as modal
    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "Button1Click", "OpenForm2();", true);
}

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
    string parameter = Request["__EVENTARGUMENT"];
    if (parameter == "1")
    {
        System.Threading.Thread.Sleep(3000);
        Label2.Text = DateTime.Now.ToString();
    }
}

I didn't find the solution to this issue. But for a workaround, I put a timeout/delay before a client side updatepanel postback. That compelled the UI to go in blocking again with a little screen flickering. I have updated the line of code in refreshUpdatePanel() js method above in the sample. — Khadim Ali

felix Antony felix Antony · Accepted Answer · 2013-02-21T09:31:40

use

 function refreshUpdatePanel() {
        __doPostBack"<%= UpdatePanel1.ClientID %>", '1');
    }

instead of

 function refreshUpdatePanel() {
        window.__doPostBack('UpdatePanel1', '1');
    }

thank you

BlockUI during partial postback through JavaScript

1 Answers