更新面板更新（）方法不起作用，如何在函数内强制刷新页面答案

【问题标题】：Update Panel update() method not working, how to force refresh of page within function更新面板更新（）方法不起作用，如何在函数内强制刷新页面
【发布时间】：2022-01-09 12:16:39
【问题描述】：

我正在编写一个使用 SelectPDF 库加载 PDF 的页面。我遇到的问题是渲染 PDF 的加载时间。从 HTML 呈现 PDF 大约需要 2-3 秒。

这不是问题，但我想在加载期间禁用用于创建 pdf 的按钮。因为如果用户不耐烦并再次单击按钮，则该过程会重新开始。

我认为使用脚本管理器和更新面板可以让我这样做，但我似乎无法弄清楚。我有部分页面渲染和更新模式设置为条件，但是当我从我的代码中调用 update() 方法时，没有任何反应。在 PDF 完成呈现之前，该按钮不会禁用。

我想强制按钮启用状态在 PDF 开始渲染之前更新，而不是之后。

这是我的代码

ASPX 页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <form id="frmMain"  runat="server">
            <asp:ScriptManager ID="smMain" EnablePartialRendering="true" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="upMain" UpdateMode="Conditional" runat="server">
                <ContentTemplate>
                    <table id="form">
                        <tr>
                            <td>Page Header:&nbsp;&nbsp;&nbsp;</td>
                            <td><asp:TextBox ID="txtPageHeader" runat="server"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td>Page Content:&nbsp;&nbsp;&nbsp;</td>
                            <td><asp:TextBox ID="txtPageContent" runat="server"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><asp:Button ID="cmdLoadPDF" Text="Create PDF" OnClientClick="doLoading();" runat="server" /></td>
                        </tr>
                        <tr>
                            <td><asp:Label ID="lblLoading" Text="Loading" Visible="false" runat="server"></asp:Label></td>
                        </tr>
                    </table>
                    <iframe id="ifPDF" visible="false" runat="server"></iframe>
                </ContentTemplate>
                <Triggers>
                </Triggers>
            </asp:UpdatePanel>
        </form>
    </body>
</html>

还有我的 C# 代码隐藏文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Threading.Tasks;
using SelectPdf;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ifPDF.Attributes["class"] = "pdf_view";
        cmdLoadPDF.Click += new EventHandler(Click_Event);
    }

    protected void Click_Event(object sender, EventArgs e)
    {
        cmdLoadPDF.Enabled = false;
        lblLoading.Visible = true;
        upMain.Update();

        ifPDF.Visible = true;
        string pdf_string = File.ReadAllText(Server.MapPath("template.html"));

        pdf_string = pdf_string.Replace("{{page_header}}", txtPageHeader.Text);
        pdf_string = pdf_string.Replace("{{page_content}}", txtPageContent.Text);

        HtmlToPdf make_pdf = new HtmlToPdf();
        PdfDocument my_doc = make_pdf.ConvertHtmlString(pdf_string);
        byte[] doc_array = my_doc.Save();
        my_doc.Close();

        string b64_doc = Convert.ToBase64String(doc_array, 0, doc_array.Length);
        string pdf_src = $"data:application/pdf;base64,{b64_doc}";
        ifPDF.Attributes["Src"] = pdf_src;
    }
}

如果你们能帮助我，将不胜感激。

【问题讨论】：

标签： c# asp.net ajax webforms updatepanel

【解决方案1】：

为什么不点击按钮时隐藏或禁用它？

你有这个：

    <td><asp:Button ID="cmdLoadPDF" Text="Create PDF" 
    OnClientClick="doLoading();" runat="server" /></td>

所以，这样说：

    <td><asp:Button ID="cmdLoadPDF" Text="Create PDF" 
    OnClientClick="doLoading(this);" runat="server" /></td>

然后

        <script>
            function doLoading(e) {
                btn = $(e)
                btn.hide()
                // rest of your code here
            }
        </script>

因此，该更新面板实际上会像回发整个页面一样。单击按钮将隐藏按钮 - 更新面板回发。 Crunch Crunch Crnunch，然后完成后，更新面板将返回客户端并重新加载 - 然后重新加载也会重新显示按钮！！！

所以，只需将“this”（按钮）传递给 js 例程即可。隐藏按钮 - 它将一直隐藏，直到后面的代码完成，并且当更新面板的新副本返回时 - 按钮将再次显示（按钮的隐藏设置不会保留）。

【讨论】：

这行得通，谢谢。
使用客户端 JS 会比 Albert 描述的更新面板更好。
@SalikRafiq 我只是想避免 javascript 被禁用和加载功能不起作用的机会。但这真的没什么大不了的。
我不会担心 - 有一个小组建议更新面板不好或应该避免使用。我不同意，并认为它们是网络表单最出色的补充之一。如果你看看最近的新 blazer 和 page 指令，他们实际上是在构建一个系统，允许开发人员只使用 signalR 轻松更新页面的部分内容——大量的技术可以实现我们通过更新面板获得的极大便利。所以，不用担心，因为更新面板也往往会节省大量编写 JavaScript 和使用 Web 方法的工作——而且在大多数情况下都能获得同样好的结果。
我认为如果禁用 javascript，UpdatePanels 也不起作用？只要您的页面很轻，UpdatePanels 就可以正常工作。请记住，ViewState 和控件被回发——所有这些不仅仅是 UpdatePanel——然后被返回并被修剪掉。只是不要对你的页面疯狂。