How can I block the user from using the page while ASP.NET MVC Ajax unobtrusive form is loading?

Question

When you using MVC Ajax in a razor view like this

@using (Ajax.BeginForm("Something", new { id = Model.Id }, new AjaxOptions
{
    UpdateTargetId = "something + Model.Id,
    InsertionMode = InsertionMode.ReplaceWith,
    LoadingElementId = "loading"
}))
{
    Html.RenderPartial("Something", foto);
}

How can I create in bootstrap a overlay to show progress and prevent the user to use the page while the page is loading?

Answer 1

You can create a hidden bootstrap overlay and modal with infinite loading progressbar like this for example:

<div id="loading" style="display: none">
    <div class="modal fade in" tabindex="-1" role="dialog" style="display: block">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1>Processando...</h1>
                </div>
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade in"></div>
</div>