ASP.NET：与UpdatePanel一起使用回发时禁用所有控件-与ajas动画类似吗？

Question

我正在使用UpdatePanel，并且在使用UpdatePanel刷新页面时需要显示某种Ajax动画。

最好是能够禁用所有控件并显示ajax加载消息。

我很乐意将Div放在所有内容的顶部，例如覆盖层。 jQuery UI对话框几乎相同。

有人对这个有经验么？

问题是用户是单击项目的，然后才能从PostBack返回（使用更新面板）

提前致谢

Answer 1

我也为同样的问题而苦苦挣扎，很幸运地偶然发现了MSDN上的UpdateProgress Control Overview 。 该页面上的示例显示了用于挂接到ASP UpdatePanel控件的异步ajax调用的秘密 javascript。 稍加修改，我就能使jQuery BlockUI插件与ASP UpdatePanel一起使用。

这就是我最后得到的。 这里应该有足够的资源，以便您可以在异步回调开始和结束时做任何您想做的事情。

HTML

<asp:UpdateProgress runat="server" id="updateProgress1" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false" DisplayAfter="0">
    <ProgressTemplate>Processing...</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <!-- Some stuff here -->
    </ContentTemplate>
</asp:UpdatePanel>

JAVASCRIPT

$(document).ready(function () {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    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();
    }
});

请注意，我包括了一个ASP UpdateProgress控件，这一点很重要，因为如果您没有该控件，那么javascript将无法正常工作。 它会阻止和取消阻止UI，但是取消阻止部分不会在回调返回时发生，而是几乎在异步调用开始后立即发生。

Answer 2

我只需要阻止控件本身的DropDownList而不是整个UI，就可以完成所有工作，而不是使用jquery.blockUI()插件，我只添加了一行，对我来说一切正常

这是我添加的内容：

$('#DD_selectPassportType').attr('disabled', 'disabled');

@ InitializationRequest

function InitializeRequest(sender, args) {

    // Whatever you want to happen when the async callback starts
    $('#DropDownList_ID').attr('disabled', 'disabled');
}
function EndRequest(sender, args) {
    // Whatever you want to happen when async callback ends
    nothing I did in here
}

Answer 3

您可以使用ajax控制工具套件的更新进度控制。 当带有更新面板的页面引用时，将显示下面的图像，并且用户无法单击页面项目。

<ajax:UpdateProgress AssociatedUpdatePanelID="UpdatePanel3" ID="updateProgress3"                 runat="server">
<ProgressTemplate>
 <div>
  <img alt="Loading" src="images/Adding.gif" />
 </div>
</ProgressTemplate>
</ajax:UpdateProgress>

这里UpdatePanel3是您的更新面板的ID。

您还可以添加ajaxcontrol工具箱的AlwaysVisibleControlExtender。

<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server"
                TargetControlID="updateProgress3" VerticalSide="Middle" HorizontalSide="Center"
                VerticalOffset="10" HorizontalOffset="10" ScrollEffectDuration=".1">
            </cc1:AlwaysVisibleControlExtender>

cc1是​​ajax控制工具套件dll的标记前缀。