I start to using jQuery BlockUI Plugin to block user activity for the page until plete a button process on C#/ASP.NET side.

So I wrote this;

<script src=".7/jquery.js"></script> 
<script src=".blockUI.min.js" ></script> 
<script type="text/javascript">
    $(document).ready(function () {
        $('#MyButtonID').click(function () {
            $.blockUI({ message: '<h1>Please wait..</h1>' });
        });
    });
</script>

As you can see, this is a simple code that blocks UI when I click asp:button which ID is MyButtonID until it finish it's process. This works great.

Now I try to create some alert based on a condition while on this click process. If I understand clearly, now I need to unblock my page as a first, show the alert and keep it blocked again until plete button process.

That's why I wrote two function (maybe I can call these $.unblockUI and $.blockUI directly without them?) in my javascript side for that;

function UnblockUI() {
    $.unblockUI();
}
function BlockUI() {
    $.blockUI({ message: '<h1>Please wait..</h1>' });
}

As far as I search, most mon way to call Javascript function on server side is using ClientScriptManager.RegisterStartupScript method in C#. So I tried to alert something on C# side as an example with;

if(condition)
{
    string script = string.Format("alert('{0}');", "Some error message");
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}

and it worked. After that, I tried to unblock page with calling UnblockUI function in my javascript side but it didn't unblock it.

if(condition)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "unblock", "UnblockUI", true);
    string script = string.Format("alert('{0}');", "Some error message");
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}

If I understand correctly, this UnblockUI parameter calls my UnblockUI javascript function which I defined above and this function calls $.unblockUI(); and unblock my page which is blocked but as expected, it didn't work.

What am I missing here? Or am I didn't even understand that This plugin lets you simulate synchronous behavior when using AJAX, without locking the browser sentence?

I start to using jQuery BlockUI Plugin to block user activity for the page until plete a button process on C#/ASP.NET side.

So I wrote this;

<script src="http://ajax.googleapis./ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.io/min/jquery.blockUI.min.js" ></script> 
<script type="text/javascript">
    $(document).ready(function () {
        $('#MyButtonID').click(function () {
            $.blockUI({ message: '<h1>Please wait..</h1>' });
        });
    });
</script>

As you can see, this is a simple code that blocks UI when I click asp:button which ID is MyButtonID until it finish it's process. This works great.

Now I try to create some alert based on a condition while on this click process. If I understand clearly, now I need to unblock my page as a first, show the alert and keep it blocked again until plete button process.

That's why I wrote two function (maybe I can call these $.unblockUI and $.blockUI directly without them?) in my javascript side for that;

function UnblockUI() {
    $.unblockUI();
}
function BlockUI() {
    $.blockUI({ message: '<h1>Please wait..</h1>' });
}

As far as I search, most mon way to call Javascript function on server side is using ClientScriptManager.RegisterStartupScript method in C#. So I tried to alert something on C# side as an example with;

if(condition)
{
    string script = string.Format("alert('{0}');", "Some error message");
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}

and it worked. After that, I tried to unblock page with calling UnblockUI function in my javascript side but it didn't unblock it.

if(condition)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "unblock", "UnblockUI", true);
    string script = string.Format("alert('{0}');", "Some error message");
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}

If I understand correctly, this UnblockUI parameter calls my UnblockUI javascript function which I defined above and this function calls $.unblockUI(); and unblock my page which is blocked but as expected, it didn't work.

What am I missing here? Or am I didn't even understand that This plugin lets you simulate synchronous behavior when using AJAX, without locking the browser sentence?

• javascript
• c#
• jquery-blockui

• Are you blocking the entire page? Also, are you able to send an ajax request back to the server in lieu of using the default asp button functionality? This will make what you're trying to do very easy because of the callbacks. – Mark C. Commented Dec 22, 2015 at 14:48
• @MarkC. Yes. On documentation it says: Usage is very simple; to block user activity for the page $.blockUI();. Element blocking is different as far as I see. are you able to send an ajax request How can I do that exactly? You mean in if statement? – Soner Gönül Commented Dec 22, 2015 at 14:52
• Is your asp:button running a serverside event handler? Try a regular button. – Bindrid Commented Dec 22, 2015 at 14:53
• @Bindrid Yes. It's running on server side and it has to because I do server side functionality on it's Click event handler. – Soner Gönül Commented Dec 22, 2015 at 14:55
• I don't understand your last sentence. Is ajax an option here? It would fit your needs perfectly. – Mark C. Commented Dec 22, 2015 at 15:09

4 Answers 4

Try using the function call as follows:

function unblockUI() {
    $(function() {
        $.unblockUI();
    });
}


function blockUI() {
    $(function() {
        $.blockUI({ message: '<h1>Please wait..</h1>' });
    });    
}

I hope I have helped...

Here is what i am using in my current project.

  $(document).ready(function () {

      // unblock when ajax activity stops when DOM gets updated, means Ajax is pleted
      $(document).ajaxStop($.unblockUI);

      //Block when trying for Ajax Activity
      $('ul#Appdropdown').click(function (ev) {

            $.blockUI(); 

       //Add ajax call to get data
      }   
 });

Implement the same and it will do the block and unblock for you.

I had an issue when using the $ajax plete function to stop the animation, If the ajax call fails i was resubmitting the ajax call, and wanted to block UI on resubmitting. But when making the call $.unblockUI inside of plete it was not animating correctly. It would flicker and disapear and not continue to block. However using global call to stop did work, allowing for blocking to re occur with a updated message on blocked UI.

$(document).ajaxStop($.unblockUI); // this works 

instead of inside of the plete function of ajax

$.ajax({
    plete: function(jqXHR, textStatus) {                    
                $.unblockUI();// this did not always work
            }
    });

If you block user interface on this way :

BlockUI.Component(".page-content");

Then this is a working solution:

BlockUI.UnblockComponent(".page-content");