Question

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

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

我很想将Div放在所有东西的顶部 - 就像叠加一样。 Jquery UI对话框几乎完全相同。

有没有人有这方面的经验？

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

提前致谢

Answer 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，但是当回调返回时，unblock部分不会发生，它几乎在异步调用启动后立即发生。

Answer 2

对我来说，阻止控件本身DropDownList而不是整个用户界面已经足够了我所做的一切，而不是使用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的标签前缀。

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

3 个答案: