locked
Problems with dynamic html, I can't show the structure of my report via javaScript on print button action RRS feed

  • Question

  • User662762443 posted

    I am performing an implementation of a given report, and implemented the structure (html of the page) dynamically, however when I try to print it with the data filled it does not open a tab showing the whole structure of this page. I'm trying to do it via JavaScript, but it doesn't work.
    My print button click action is this:

    <div class="box-footer">
                        <button class="btn btn-print" id="btnPrint" runat="server" visible="false" onserverclick="btnPrint_ServerClick">Print</button></i>New</button>
    </div>

    My javaScript is this:

    function Imprimir() {
        var panel = document.getElementById("ConteinerPrint");
        var printWindow = window.open('', '', '');
        printWindow.document.write('<html><head><script src="JsFinancingReport.js"></script>');
        printWindow.document.write('<link href="../StyleJs.RelFinancing.css" rel="stylesheet"/>');
        printWindow.document.write('</head><body>');
        printWindow.document.write('<div class="conteiner" style="width: 700px">' + panel.innerHTML + '</div>');
        printWindow.document.write('</body></html>');
    
    
        printWindow.document.close();
    
        setTimeout(function () {
            printWindow.print();
        }, 500);
    
        return false;

    And my .cs code that implements the dynamic html page structure implementation is this:

    #region html
            #region Header
            private string header = @"
            <table style = 'margin-bottom: 0px;'>
                <tr id='topLogo'>
                    <img src = 'test/topo_brasao.png' alt=''>
                    <td style = 'border: 0px; padding-bottom: 5px;'>
                        <h2 style='margin-top: 15px;' class='center'>
                            TEST 1
                        </h2>
                        <h3 style = 'margin-top: 15px;' class='center'>
                            TEST 2 - 2<br/>
                        </h3>
                        <h3 style = 'margin-top: 15px;' class='center'>
                            TEST 3<br/>
                        </h3>
                        <h3 style = 'margin-top: 15px;' class='center'>
                        FUNDING RELEASED - ALL COMPANIES<br/>
                        </h3>
                        <h3 style = 'margin-top: 15px;' class='center'>
                        Base {1}<br/>
                        </h3>
                        <h1 style = 'margin-top: 15px;' class='left'>
                        COMPANIES TESTE4 - {2}<br/>
                        </h1>
                    </td>        
                </tr>           
            </table>";
            #endregion
            #region Content
            private const string DataFinancing = @" 
            <table style='padding: 0px; margin: 0px;' class='no-bold'>
                 <tr class='tr-center'>
                     <tr>
                         <td colspan = '4' > Company Name
                             <h4> {0}</h4>
                         </td>
                     </tr>
                     <tr>
                          <td>State registration
                              <h4 class='center'>{1}</h4>
                          </td>
                              <td colspan ='2'> C.N.P.J
                                  <h4> {2} </h4>
                              </td>
                              <td colspan='2'>Fantasy name
                                  <h4>{3}</h4>
                              </td>           
                       </tr>
            </table>
            <br/>";
            #endregion
            #region ValuesFin
            private const string dataValues= @" 
            <table style='padding: 0px; margin: 0px;'class='no-bold'>
                                    <tr>
                                        <td rowspan = '3' style=border-bottom: 3px solid black>
                                                <h5>December Billing 2014</h5>
                                                <h4>Saldo</h4>
                                        </td>
                                        <td class='center'>
                                                <h2>ICMS Foreseen</h2>
                                        </td >
                                        <td class='center'>
                                                <h2>ICMS Collected</h2>
                                        </td>
                                        <td class='center'>
                                                <h2>Hired</h2>
                                        </td>
                                        <td class='center'>
                                                <h2>Released</h2>
                                        </td>
                                   </tr>
                                   <tr>
                                        <td class='center'>
                                           {0}
                                        </td>
                                        <td class='center'>
                                           {1}            
                                        </td>
                                        <td class='center'>
                                           {2}        
                                        </td>
                                        <td class='center'>
                                           {3}   
                                        </td>
                                   </tr>      
            </table>
            <br/>";
            #endregion
            #endregion

    Aprenda a pronunciar and I'm using StringBuilder:

    This is my method of printing the data:

     protected void btnPrint_ServerClick(object sender, EventArgs e)
            {
                
                string[] dateArray = txtBaseMonth.Text.Split('-'); // MM/yyyy.
                string date = dataArray[1] + dataArray[0];
                string exit = rblCadin.SelectedValue;
    
    
                //Preenche as informações do Header
                strConstrution.Append(string.Format(header,"teste","teste", exit));
                
                
                    strConstrution.Append(string.Format(dataValues, data.VlrICMSPrevisto, dados.TotalRecolhimento, dados.VlrFinanciamento, dados.VlrTotalLiberacao));
                }
                //It builds the structure of the test report, but it is not the correct one just to bring in the data.
                Report.GroupingText += strConstrution.ToString();
                
                gv.Enabled = true;
            }

    Tuesday, October 22, 2019 8:58 PM

Answers

  • User665608656 posted

    Hi rtaVix,

    According to your description, I'm not particularly clear about your front office and back office contact.

    You passed some HTML code to the report in the code behind click event, but it can't be printed out, right?

    Is the button you control printing 'print' button? Which button in your impremir method triggered it?

    If it's the same button control, you can't get HTML code in the code behind and implement js printing method.

    If it is for the same button to complete the event, I suggest you can use ajax and jQuery to complete the function.

    I have created a case based on your code. You can refer to it.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.2.1.min.js"></script>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <script type="text/javascript">
    
            function Imprimir() {
                event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: 'WebForm_1023_2160893.aspx/GetHtmlCode',
                    contentType: 'application/json; charset=utf-8',
                    data: '{ textDate : "' + $("#txtBaseMonth").val() + '",select:"' + $("#rblCadin").val() + '" }',//send message you need to use in code behind
                    dataType: 'json',
                    success: function (r) {
                        document.getElementById("Report").innerHTML += r.d; // give the html content to report  
                        document.getElementById("Button1").disabled = false; // set button to enabled
                        var panel = document.getElementById("ConteinerPrint");
    
                        var printWindow = window.open('', '', '');
                        printWindow.document.write('<html><head>');
                        printWindow.document.write('<link rel="stylesheet" href="../Content/RelFinancing.css" type="text/css" />');
                        printWindow.document.write('</head><body>');
                        printWindow.document.write('<div class="conteiner" style="width: 700px">' + panel.innerHTML + '</div>');
                        printWindow.document.write('</body></html>');
    
    
                        printWindow.document.close();
    
                        setTimeout(function () {
                            printWindow.print();
                        }, 500);
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="ConteinerPrint">
                Original content<br />
                <div id="Report" runat="server"></div>
            </div>
            <asp:TextBox ID="txtBaseMonth" runat="server" Text="2019-3-4"></asp:TextBox>
            <asp:DropDownList ID="rblCadin" runat="server">
                <asp:ListItem Text="A" Value="A"></asp:ListItem>
                <asp:ListItem Text="B" Value="B"></asp:ListItem>
            </asp:DropDownList>
            <div class="box-footer">
                <button class="btn btn-print" id="btnPrint" runat="server" onclick="return Imprimir();">Print</button>
                <asp:Button ID="Button1" runat="server" Text="Button" Enabled="false"></asp:Button>
            </div>
        </form>
    </body>
    </html>
            [WebMethod]
            public static string GetHtmlCode(string textDate, string select)
            {
                string[] dataArray = textDate.ToString().Split('-'); // MM/yyyy.
                string date = dataArray[1] + dataArray[0];
                string exit = select.ToString();
    
                StringBuilder strConstrution = new StringBuilder(); 
                strConstrution.Append(string.Format(header, "teste", "teste", "sdas"));
     
                strConstrution.Append(string.Format(dataValues, "xcasd", "asdwqqw", "erwetw", "rfwe")); 
                 
                return strConstrution.ToString();
            }

    Here is the RelFinancing.css content:

    .conteiner {
        background-color:cornflowerblue;
        
    }
    .no-bold{
        color:red;
    
    }
    #topLogo
    {
        color:blueviolet
    }
    

    Here is the result:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 23, 2019 6:53 AM

All replies

  • User665608656 posted

    Hi rtaVix,

    According to your description, I'm not particularly clear about your front office and back office contact.

    You passed some HTML code to the report in the code behind click event, but it can't be printed out, right?

    Is the button you control printing 'print' button? Which button in your impremir method triggered it?

    If it's the same button control, you can't get HTML code in the code behind and implement js printing method.

    If it is for the same button to complete the event, I suggest you can use ajax and jQuery to complete the function.

    I have created a case based on your code. You can refer to it.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.2.1.min.js"></script>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <script type="text/javascript">
    
            function Imprimir() {
                event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: 'WebForm_1023_2160893.aspx/GetHtmlCode',
                    contentType: 'application/json; charset=utf-8',
                    data: '{ textDate : "' + $("#txtBaseMonth").val() + '",select:"' + $("#rblCadin").val() + '" }',//send message you need to use in code behind
                    dataType: 'json',
                    success: function (r) {
                        document.getElementById("Report").innerHTML += r.d; // give the html content to report  
                        document.getElementById("Button1").disabled = false; // set button to enabled
                        var panel = document.getElementById("ConteinerPrint");
    
                        var printWindow = window.open('', '', '');
                        printWindow.document.write('<html><head>');
                        printWindow.document.write('<link rel="stylesheet" href="../Content/RelFinancing.css" type="text/css" />');
                        printWindow.document.write('</head><body>');
                        printWindow.document.write('<div class="conteiner" style="width: 700px">' + panel.innerHTML + '</div>');
                        printWindow.document.write('</body></html>');
    
    
                        printWindow.document.close();
    
                        setTimeout(function () {
                            printWindow.print();
                        }, 500);
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="ConteinerPrint">
                Original content<br />
                <div id="Report" runat="server"></div>
            </div>
            <asp:TextBox ID="txtBaseMonth" runat="server" Text="2019-3-4"></asp:TextBox>
            <asp:DropDownList ID="rblCadin" runat="server">
                <asp:ListItem Text="A" Value="A"></asp:ListItem>
                <asp:ListItem Text="B" Value="B"></asp:ListItem>
            </asp:DropDownList>
            <div class="box-footer">
                <button class="btn btn-print" id="btnPrint" runat="server" onclick="return Imprimir();">Print</button>
                <asp:Button ID="Button1" runat="server" Text="Button" Enabled="false"></asp:Button>
            </div>
        </form>
    </body>
    </html>
            [WebMethod]
            public static string GetHtmlCode(string textDate, string select)
            {
                string[] dataArray = textDate.ToString().Split('-'); // MM/yyyy.
                string date = dataArray[1] + dataArray[0];
                string exit = select.ToString();
    
                StringBuilder strConstrution = new StringBuilder(); 
                strConstrution.Append(string.Format(header, "teste", "teste", "sdas"));
     
                strConstrution.Append(string.Format(dataValues, "xcasd", "asdwqqw", "erwetw", "rfwe")); 
                 
                return strConstrution.ToString();
            }

    Here is the RelFinancing.css content:

    .conteiner {
        background-color:cornflowerblue;
        
    }
    .no-bold{
        color:red;
    
    }
    #topLogo
    {
        color:blueviolet
    }
    

    Here is the result:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 23, 2019 6:53 AM
  • User662762443 posted

    Thanks for the feedback Yongqing, or if you made more or less as a reference, but I don't understand why you pass a URL: 'WebForm_1023_2160893.aspx / GetHtmlCode', what my print button method does is linq and through the linq result i fill in the stringbuilder information.

    How did you get this URL? URL: 'WebForm_1023_2160893.aspx / GetHtmlCode'?

    I am working with a front end and back end page which would be the .cs case, so I got confused.

    In your example my dynamic html code I made in the .cs that I posted, would it be called at what time in your script example? and this contentType code:

    'application / json; charset = utf-8 ', data: '{textDate: "' + $ (" # txtBaseMonth "). val () + '", select: "' + $ (" # rblCadin "). val () + '"}',

    I don't quite understand what exactly it does, because the txtBaseMonth (MM / yyyy) which is of type Month, and the radio button rblCadin, I already have the logic ready for them in my html as it was posted in my doubt, which I am in doubt about my print button method I had posted, it will change due to the actions you suggested?

    Wednesday, October 23, 2019 11:29 AM
  • User665608656 posted

    Hi rtaVix,

    How did you get this URL? URL: 'WebForm_1023_2160893.aspx / GetHtmlCode'?

    This url represents the code behind method I used to call ajax, which is the GetHtmlCode method in the code behind of WebForm_1023_2160893.cs page. I suggest you refer to the use of ajax in webform: Static WebMethod in Code Behind WebForm

    I don't quite understand what exactly it does, because the txtBaseMonth (MM / yyyy) which is of type Month, and the radio button rblCadin, I already have the logic ready for them in my html as it was posted in my doubt, which I am in doubt about my print button method I had posted, it will change due to the actions you suggested?

    If you use the code behind click event of the button directly, you can easily get the values ​​of other controls in the .cs file (such as the value of your date or the value of the radio button), but when you use ajax's webmethod to implement this function, you can't get the value of the control in the static method of webmethod, so you can only pass it to the webmethod as a parameter by getting the value of the control you need in js.

    And this is the purpose of this sentence: data: '{textDate: "' + $ (" # txtBaseMonth "). val () + '", select: "' + $ (" # rblCadin "). val () + '"}'.

    I have clearly demonstrated in the animation, when I click the print button, I will execute the Imprimir method, then call the GetHtmlCode method in the code behind to fill the html code, and then print the page, which will ensure when you are printing, the page has already got the html code you need to render.

    If you still can't understand it clearly, I suggest that you describe your requirements in more details and provide all your current code, which will help us solve your isseu more easily.

    Best Regards,

    YongQing.

    Thursday, October 24, 2019 2:52 AM
  • User662762443 posted

    YongQing, I followed your guidelines regarding the code you posted and it worked, I thank you for your help, I also had to make some changes to the code and had to use Session to retrieve the information recorded in my temporary list, but it did all right. And taking the opportunity, I created another topic with another question regarding filtering dates by period, I'm leaving the link below, if you can help me thank you too.

    https://forums.asp.net/p/2160974/6282641.aspx?p=True&t=637075401464392184

    https://forums.asp.net/p/2160975/6282646.aspx?p=True&t=637075424968888715

    Regards, Rtavix

    Friday, October 25, 2019 2:01 AM