Update Panel update() method not working, how to force refresh of page within function-CodePudding

I am writing a page that loads a PDF using the SelectPDF library. The problem I am running into is the load time for rendering the PDF. It takes like 2-3 seconds for the PDF to render from HTML.

This isn't an issue, but I want to disable the button used to create the pdf during that loading period. Because if the user gets impatient and clicks the button again, the process starts over.

I thought using a script manager and an update panel would allow me to do this, but I cannot seem to figure it out. I have partial page rendering and the update mode set to conditional, but when I call the update() method from my code, nothing happens. The button doesn't disable until the PDF finishes rendering.

I want to force the button enabled state to update before the PDF starts rendering, not after.

Here is my code

The ASPX page

<%@ 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>

And my C# Codebehind file

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;
    }
}

If you guys could help me out it would be greatly appreciated.

CodePudding user response：

Why not just hide or disable the button when you click on it?

You have this:

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

so, say this:

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

and then

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

So, that update panel is really going to behave like a whole page post-back. The button click will hide the button - update panel post-back. Crunch Crunch Crnunch, and then when done, the update panel will travel back to client, and be re-loaded - and that re-loading will also then re-display the button!!!

So, just pass "this" (the button) to the js routine. hide the button - it will stay hidden until such time the code behind is done, and when a new fresh copy of the update panel comes back - the button will show again (the hidden setting of the button does not persist).