ASP.NET：在 UpdatePanel 中使用回发​​时禁用所有控件 - 类似于 ajas 动画？

Question

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

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

我很乐意在所有内容的顶部放置一个 Div - 就像覆盖层一样。 Jquery UI 对话框的作用几乎相同。

有人有这方面的经验吗？

问题是用户在从回发（使用更新面板）返回之前单击项目，

提前致谢

Answer 1

我也遇到了同样的问题，并且很幸运地偶然发现了 UpdateProgress MSDN 上的控件概述。该页面上的示例显示了用于挂钩 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控制工具包的Update进度控制。当页面引用更新面板时，将显示下图，并且用户无法单击页面项目。

<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的标签前缀。