在jQuery UI对话框中更新标签

时间:2014-06-12 17:53:14

标签: c# jquery asp.net

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

处理多个文件夹时,这个过程可能需要很长时间,我的解决方案是添加一个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 .................

}

我愿意接受建议,我已经考虑了不同的方法来做到这一点,就像我说网络应用程序的主要目的一样,我只是想通过为用户添加视觉辅助来提高用户友好性。只是让他们挂在一个打开的页面上,无法知道这个过程有多远。

提前感谢您的回复。

马哥。

2 个答案:

答案 0 :(得分:0)

您应该添加 AsyncPostBackTrigger 并将其绑定到 btnZip Click-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>

答案 1 :(得分:0)

在ASP.NET环境中使用jQuery UI Dialog时,需要使用appendTo选项并将其附加到表单中。我发现不这样做会引起各种各样的头痛(主要是坏的)。

$("#dialog").dialog({
            autoOpen: false,
            modal: true,
            appendTo: "form",

            buttons: {
                "OK": function (e) {

                    <%=Page.ClientScript.GetPostBackEventReference(btnZip, "") %>
                }
            }
        });