更新jQuery UI对话框中的标签

本文关键字：标签 对话框 jQuery UI 更新 | 更新日期: 2023-09-27 18:08:17

这是一个小背景，我有一个web应用程序，搜索大文件夹在我的网络的特定部分，并将它们存储在数据库中供以后使用。第二个应用程序将检索这些文件夹到网格，并允许用户根据网格上的选择压缩文件夹。

当处理多个文件夹的过程可能需要太长时间，我的解决方案是添加一个jQuery对话框，将显示给用户有多少文件夹正在处理和哪个文件夹最后被压缩(或至少这是想法)，当完成一个简单的弹出显示有多少文件夹被压缩，如果有任何被跳过。

我无法让jQuery对话框中的标签更新。我所有的代码工作和应用程序正在做压缩，但对话框没有改变。如果我运行一个选择并压缩这些文件夹，然后返回并进行另一个选择，标签将显示上次运行的更新内容。以下是我的部分代码，我将非常感谢任何建议和/或指导。

ASP。Net代码 

 <div>
      <asp:Button ID="btnZip" runat="server" Text="Zip Folders" OnClick="btnZip_Click" Visible="False" />
 </div>
 <br />
 <div id="dialog" title="Compression status" style="display: none">
       <asp:UpdatePanel ID="udpZipUpdate" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                  <asp:Label ID="lblUpdate1" runat="server" Text="Compression Started...<br />"></asp:Label>
            </ContentTemplate>
       </asp:UpdatePanel>
 </div>

jQuery代码

$(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "OK": function (e) {
                    <%=Page.ClientScript.GetPostBackEventReference(btnZip, "") %>
                }
            }
        });
        $('#<%=btnZip.ClientID%>').click(function (e) {
            e.preventDefault();
            $("#dialog").dialog("open");
        });
    });

和 c#代码在循环中，我处理每个文件夹并将其发送给压缩，然后尝试更新标签。

protected void btnZip_Click(object sender, EventArgs e)
{
    ... some code to get the folders checked ...
    for (int i = 0; i < checkedCount; i++)
    {
        if (i == 0)
        {
            lblUpdate1.Text += "Updating a total of " + checkedCount.ToString() + " Please wait...<br />";
            udpZipUpdate.Update();
        }
        FolderToZip(strCkdFolders[i]);
        lblUpdate1.Text += strCkdFolders[i].Substring(Math.Max(0, strCkdFolders[i].Length - 4)) + "... Zipped! <br />";
        udpZipUpdate.Update();
    }
    ...... code to do final popup .................
}

我愿意接受建议，我已经看过不同的方法来做到这一点，就像我说的web应用程序的主要目的一样，我只是想通过为用户添加一个视觉辅助来让这个更友好，而不是让他们挂在一个打开的页面上，没有办法知道这个过程有多远。

提前感谢您的回复。

Marco。

更新jQuery UI对话框中的标签

您应该添加AsyncPostBackTrigger并将其绑定到btnZipClick-Event。还有UpdateProgress，以确保用户提供反馈，如果事情需要更长的时间来完成。不需要进行其他更改。好运！

ASPX: 

<div id="dialog" title="Compression status" style="display: none">
    <asp:UpdatePanel ID="udpZipUpdate" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnZip" EventName="Click" />
        </Triggers>
        <ContentTemplate>
            <asp:Label ID="lblUpdate1" runat="server" Text="Compression Started...<br />">
            </asp:Label>
        </ContentTemplate>
   </asp:UpdatePanel>
   <asp:UpdateProgress ID="UpdateProgress1" runat="server">       
        <ProgressTemplate>         
            <center>
                <img src="../Content/img/CircularProgressAnimation.gif" /><br />
                <i>Zipping Files...</i> 
            </center>
        </ProgressTemplate>
    </asp:UpdateProgress>  
</div>

在asp.net中使用jQuery UI Dialog时。. NET环境中，您需要使用appendTo选项并将其追加到表单。我发现不这样做会导致各种各样的头痛(大多数是严重的)。

$("#dialog").dialog({
            autoOpen: false,
            modal: true,
            appendTo: "form",
            buttons: {
                "OK": function (e) {
                    <%=Page.ClientScript.GetPostBackEventReference(btnZip, "") %>
                }
            }
        });
相关文章：