ASP.NET：使用带有 UpdatePanel 的回发时禁用所有控件 - 类似于 ajas 动画？答案

【问题标题】：ASP.NET: Disabling all controls when using postback with UpdatePanel - similar to ajas animation?ASP.NET：使用带有 UpdatePanel 的回发时禁用所有控件 - 类似于 ajas 动画？
【发布时间】：2011-05-13 20:15:33
【问题描述】：

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

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

我很想把一个 Div 放在所有东西的顶部——就像一个叠加层。 Jquery UI 对话框的作用几乎相同。

有人有这方面的经验吗？

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

提前致谢

【问题讨论】：

标签： asp.net ajax asp.net-ajax updatepanel ajaxcontroltoolkit

【解决方案1】：

我也在同样的问题上苦苦挣扎，幸运地偶然发现了UpdateProgress Control Overview on MSDN。该页面上的一个示例显示了 secret javascript，用于挂钩到 ASP UpdatePanel 控件的异步 ajax 调用。稍作修改，我就可以让jQuery BlockUI plugin 与 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，但是当回调返回时，解除阻塞部分不会发生，它几乎会在异步调用开始后立即发生。

【讨论】：

【解决方案2】：

对我来说，阻止控件本身 DropDownList 而不是整个 UI 就足够了，而我所做的一切而不是使用 jquery.blockUI() 插件我只添加了一行，它对我来说效果很好

这是我添加的内容：

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

@初始化请求

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
}

【讨论】：

【解决方案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的标签前缀。

【讨论】：