WebForms中如何结合UpdatePanel使用UpdateProgress显示打印进度条

我尝试在打印文档时显示进度条，但点击打印按钮后进度条并未显示。请问如何实现点击打印按钮时显示进度条，并在打印处理完成后隐藏它？

现有UI代码 #

<asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ItemStyle-CssClass="col-md-6">
    <ItemTemplate>
        <asp:UpdateProgress runat="server" AssociatedUpdatePanelID="upCommands" ID="uProgress">
            <ProgressTemplate>
                 <asp:Panel runat="server" ID="pnlLoader" Visible="true">
                    <div class="progress" style="height: 20px">
                        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                            <h4 style="font-size: 12px; font-weight: bold; color: white; margin: auto">Printing...</h4>
                        </div>
                    </div>
                </asp:Panel>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel runat="server" ID="upCommands">
            <ContentTemplate>
                <asp:Panel runat="server" ID="pnlCommands" Visible="true">
                    <asp:LinkButton runat="server" CssClass="btn btn-success btn-xs waves-effect waves-light" CommandArgument='<%# Eval("BuyerID") + "_" + Eval("TransactionCode") + "_" + Eval("BuyerType") %>' CommandName="ModifyBIS" ID="cmdModifyBIS"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i> Modify BIS</asp:LinkButton>
                    <asp:LinkButton runat="server" CssClass="btn btn-info btn-xs waves-effect waves-light" CommandArgument='<%# Eval("BuyerID") + "_" + Eval("TransactionCode") + "_" + Eval("BuyerType") %>' CommandName="PrintBIS" ID="cmdPrintBIS"  ClientIDMode="Static"><i class="fa fa-print" aria-hidden="true"></i> Print BIS</asp:LinkButton>                                                       
                </asp:Panel>                                                   
            </ContentTemplate>
        </asp:UpdatePanel>
    </ItemTemplate>
</asp:TemplateField>

现有后台代码 #

protected void gvInformationSheets_RowCommand(object sender, GridViewCommandEventArgs e)
{
     BuyerCode = e.CommandArgument.ToString().Split('_')[0];
     TransactionCode = e.CommandArgument.ToString().Split('_')[1];
     BuyerType = e.CommandArgument.ToString().Split('_')[2];
   
    if (e.CommandName == "PrintBIS")
    {
        if (isPrinting == false)
        {
            isPrinting = true;
            DisablePrinting(BuyerCode, false);                
            PrintBIS(BuyerCode, TransactionCode, BuyerType);                   
        }
        else
        {
            ShowToastr(this.Page, "Printing in progress, Please wait.", "Information", "info");
        }
       
    }
    else if (e.CommandName == "ModifyBIS")
    {
        Response.Redirect("BIS_Edit.aspx?BuyerID=" + BuyerCode + "&TransCode=" + TransactionCode + "&BuyerType=" + BuyerType);
    }
}

private void DisablePrinting(string BIS_ID, bool Visible)
{
    string buyerIDinRow = "";
   
    foreach (GridViewRow row in gvInformationSheets.Rows)
    {
        buyerIDinRow = row.Cells[0].Text;
        if (buyerIDinRow == BIS_ID)
        {
            Panel pnlCommand = row.FindControl("pnlCommands") as Panel;
           // Panel pnlLoader = row.FindControl("pnlLoader") as Panel;
            pnlCommand.Visible = Visible;
            //pnlLoader.Visible = !Visible;
        }
    }
}

修复方案 #

1. 调整UI代码结构 #

将UpdateProgress放入UpdatePanel内部，并添加DisplayAfter="0"确保进度条立即显示，同时移除pnlLoader的硬编码Visible="true"，让UpdateProgress自动控制显示：

<asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ItemStyle-CssClass="col-md-6">
    <ItemTemplate>
        <asp:UpdatePanel runat="server" ID="upCommands">
            <ContentTemplate>
                <asp:UpdateProgress runat="server" AssociatedUpdatePanelID="upCommands" ID="uProgress" DisplayAfter="0">
                    <ProgressTemplate>
                        <asp:Panel runat="server" ID="pnlLoader">
                            <div class="progress" style="height: 20px">
                                <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                                    <h4 style="font-size: 12px; font-weight: bold; color: white; margin: auto">Printing...</h4>
                                </div>
                            </div>
                        </asp:Panel>
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:Panel runat="server" ID="pnlCommands" Visible="true">
                    <asp:LinkButton runat="server" CssClass="btn btn-success btn-xs waves-effect waves-light" CommandArgument='<%# Eval("BuyerID") + "_" + Eval("TransactionCode") + "_" + Eval("BuyerType") %>' CommandName="ModifyBIS" ID="cmdModifyBIS"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i> Modify BIS</asp:LinkButton>
                    <asp:LinkButton runat="server" CssClass="btn btn-info btn-xs waves-effect waves-light" CommandArgument='<%# Eval("BuyerID") + "_" + Eval("TransactionCode") + "_" + Eval("BuyerType") %>' CommandName="PrintBIS" ID="cmdPrintBIS" ClientIDMode="Static"><i class="fa fa-print" aria-hidden="true"></i> Print BIS</asp:LinkButton>                                                       
                </asp:Panel>                                                   
            </ContentTemplate>
        </asp:UpdatePanel>
    </ItemTemplate>
</asp:TemplateField>

2. 修复后台代码逻辑 #

• 用Session替代类级变量isPrinting，避免Web环境下的并发问题
• 打印完成后恢复按钮可见性，并清除打印状态

protected void gvInformationSheets_RowCommand(object sender, GridViewCommandEventArgs e)
{
    BuyerCode = e.CommandArgument.ToString().Split('_')[0];
    TransactionCode = e.CommandArgument.ToString().Split('_')[1];
    BuyerType = e.CommandArgument.ToString().Split('_')[2];
   
    if (e.CommandName == "PrintBIS")
    {
        // 用Session存储当前行的打印状态
        string sessionKey = $"IsPrinting_{BuyerCode}";
        if (Session[sessionKey] == null || !(bool)Session[sessionKey])
        {
            Session[sessionKey] = true;
            DisablePrinting(BuyerCode, false);                
            PrintBIS(BuyerCode, TransactionCode, BuyerType);
            // 打印完成后恢复状态
            Session[sessionKey] = false;
            DisablePrinting(BuyerCode, true);
        }
        else
        {
            ShowToastr(this.Page, "Printing in progress, Please wait.", "Information", "info");
        }
       
    }
    else if (e.CommandName == "ModifyBIS")
    {
        Response.Redirect($"BIS_Edit.aspx?BuyerID={BuyerCode}&TransCode={TransactionCode}&BuyerType={BuyerType}");
    }
}

private void DisablePrinting(string BIS_ID, bool Visible)
{
    foreach (GridViewRow row in gvInformationSheets.Rows)
    {
        string buyerIDinRow = row.Cells[0].Text;
        if (buyerIDinRow == BIS_ID)
        {
            Panel pnlCommand = row.FindControl("pnlCommands") as Panel;
            if (pnlCommand != null)
            {
                pnlCommand.Visible = Visible;
            }
        }
    }
}

3. 确保页面存在ScriptManager #

UpdatePanel和UpdateProgress依赖ScriptManager，需在页面添加：

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

内容的提问来源于stack exchange，提问作者Milo