加载部分视图（AJAX）时应隐藏MVC视图页

Question

I have a drop down list, when I change the drop down list a telerik tree will be loading which is in a partial view and ajax loading bar appears in the tree content only. But I want to disable the page (user should not be able to use the page but he should see the page) while the content is loading and show the user a "loading....." screen.

Answer 1

也许您可以使用BlockUI

Answer 2

If you use MVC's Ajax.BeginForm to do your ajax call back (rather than jquery) you can use the built in AjaxOption called LoadingElementId . The downside is that it will require you to use a form to post instead of using $.ajax() . In the form you have to have an invisible button and the onchange event for the dropdown would have to build the form data in hidden fields and then issue a click event to the hidden button.

The other approach is to toss a div up like this:

<div id="loading-pane">
    <img src='<%: Url.Content("~/Content/Images/ajax-loader.gif") %>' />
</div>

and then css like this

#loading-pane { display:none; opacity: 0.8;  position: fixed; top: 0; left: 0; 
    width: 100%; height: 100%; filter: alpha(opacity=80); -moz-opacity: 0.8; 
    z-index: 999998; background-color: #ffffff; }
#loading-pane img { position: absolute; top: 40%; left: 47%; z-index: 999999; }

then something like this

$('#MyDropDown').change(function() {  
    $('#loading-pane').show();

    $.ajax({
        success: function() {
            $('#loading-pane').hide();
        }
    });
});