个人中心
gpt4 book ai didi

javascript - 通过 JavaScript 进行部分回发期间阻止 UI

转载 作者：行者123 更新时间：2023-11-28 09:20:52 24 4
gpt4 key购买 nike

我有一个 ASP.NET 页面 (WebForm1)，它打开一个模式对话框 WebForm2(通过 OpenForm2() js 函数)进行进一步处理。关闭对话框后，我只需通过 JavaScript 更新 UpdatePanel。现在的问题是，在此 js 调用期间，它不会阻塞 UI。

只有当我从服务器端调用 OpenForm2 js 方法(Button1_Click)时才会发生这种情况。由于 UI 已进入阻止模式，因此在关闭 WebForm2 时，它不会等待部分回发 (JavaScript) 的完成并解除对 UI 的阻止。

如果我直接在按钮(示例中的按钮 2)的 OnClientClick 标记中调用 OpenForm2 js 函数，它会很好地工作并一直阻塞 UI，直到回发完成。

我尝试将部分回发js代码包装在add_endRequest中，但在这种情况下，它不断调用refreshUpdatePanel() js方法，因此阻止/解除阻止UI继续进行。在这种情况下，发生这种情况的原因可能是页面上使用了两个 add_endRequest 吗？

非常感谢在这方面的任何帮助。

注意:我已使用 jQuery blockUI 在部分回发期间阻止页面。

WebForm1页面的代码示例如下。 (WebForm2 aspx页面只有一个关闭对话框的按钮和相关的js函数)。

WebForm1.aspx

<head runat="server">
    <title></title>
    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        function OpenForm2() {
            var url = "WebForm2.aspx";
            var width = 950;
            var height = 455; // screen.availHeight - (120 + 65);

            // open modal dialog
            obj = window.showModalDialog(url, window, "dialogWidth:" + width + "px; dialogHeight:" + height + "px; center:yes");

            // partial postback to reflect the changes made by form2
            refreshUpdatePanel();
            //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(refreshUpdatePanel);
            // ** here it doesn't wait for the completion and unblocks the UI **
        }

        function refreshUpdatePanel() {
            //window.__doPostBack('UpdatePanel1', '1');
            // a timeout/delay before a client side updatepanel postback. That compelled the UI to go in blocking again with a little screen flickering.
            setTimeout('__doPostBack("<%= UpdatePanel1.ClientID %>", "1")', 0);
        }

        $(document).ready(function () {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_initializeRequest(InitializeRequest);
            prm.add_endRequest(EndRequest);

            $.blockUI.defaults.css = {};
            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();
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
        <ContentTemplate>
            <asp:Label ID="Label2" runat="server" Text=""></asp:Label><br />
            <asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_Click" />
            <asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="OpenForm2();return false;" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

WebForm1.aspx.cs

protected void Button1_Click(object sender, EventArgs e)
{
    // some server side processing here
    System.Threading.Thread.Sleep(1000);

    // then calling javascript function to open form2 as modal
    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "Button1Click", "OpenForm2();", true);
}

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
    string parameter = Request["__EVENTARGUMENT"];
    if (parameter == "1")
    {
        System.Threading.Thread.Sleep(3000);
        Label2.Text = DateTime.Now.ToString();
    }
}

最佳答案

使用

 function refreshUpdatePanel() {
        __doPostBack"<%= UpdatePanel1.ClientID %>", '1');
    }

而不是

 function refreshUpdatePanel() {
        window.__doPostBack('UpdatePanel1', '1');
    }

谢谢

关于javascript - 通过 JavaScript 进行部分回发期间阻止 UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14998487/

24 4 0
文章推荐： javascript - 适合包含两个图像的框
文章推荐： ios - 以泛型类型数组作为参数的 Swift 编译器错误
文章推荐： css - Sass 有不同的运算符 (!=) 吗？
文章推荐： swift - 调用全局类时无法解包可选
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com