Issue while saving .aspx page to html file

Question

I'm developing a web based application using bootstrap.

I'm trying to save a .aspx page to html file in my application.

Here is my code:

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 iTextSharp.text;
using iTextSharp.text.html.simpleparser;
using iTextSharp.text.pdf;


 protected void btnExport_Click(object sender, EventArgs e)
    {

        string FileNamePath = @"D:\Test\Export.html";
        StreamWriter sWriter = File.CreateText(FileNamePath);

        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
  pnlData.RenderControl(htw);
        sWriter.WriteLine(sw.ToString());
  sWriter.Close();
    }

   <panel id="pnlData" runat="server">


<style type="text/css">

//given css here

</style>

 <div class="col-sm-12">
        <div class="col-sm-12">
            <!-- List starts -->
            <ul class="today-datas">
                <!-- List #1 -->
                <li class="bred" style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <span id="todayspark5" class="spark"></span>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>98%</span>Compliance</div>
                    <div class="clearfix">
                    </div>
                </li>
                <li style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <i class="icon-group"></i>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>Yes</span>Reviewed</div>
                    <div class="clearfix">
                    </div>
                </li>
                <li style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <i class="icon-laptop"></i>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>20</span>Outstanding Count</div>
                    <div class="clearfix">
                    </div>
                </li>
  </ul>
        </div>
    </div>
<div class="col-sm-12">
        <div class="col-sm-6">
            <!-- Widget -->
            <div class="widget" id="DivHeader" runat="server">
                <!-- Widget head -->
                <div class="widget-head">
                    <div class="pull-left">
                        Compliance Chart</div>
                    <div class="widget-icons pull-right">
                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                            <i class="icon-remove"></i></a>
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
                <!-- Widget content -->
                <div class="widget-content">
                    <div class="padd" style="padding-bottom: 2px;">
                        <!-- Bar chart (Blue color). jQuery Flot plugin used. -->
                        <div id="curve-chart">
                        </div>
                    </div>
                    <div style="padding-bottom: 5px;">
                        <div class="legend" id="Legend" style="padding-left: 15px;">
                            <div class="header">
                                <span>Legend</span>
                            </div>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <span class="label bred"><i class="icon-2x icon-only"></i></span><span style="margin-left: 7px;">
                                                < 80% </span>
                                        </td>
                                        <td>
                                            <span style="margin-left: 20px;" class="label byellow"><i class="icon-2x icon-only">
                                            </i></span><span style="margin-left: 7px;">< 95% </span>
                                        </td>
                                        <td>
                                            <span style="margin-left: 20px;" class="label bgreen"><i class="icon-2x icon-only"></i>
                                            </span><span style="margin-left: 7px;">> 95% </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Widget ends -->
            </div>
        </div>
       </div>


 <script type="text/javascript">
            var chartResult = null;
            $(document).ready(function () { 
  var jsonurl = '/TestHandler/GetStatsData/Ajaxhandler.axd';
                $.ajax({
                    async: false,
                    url: jsonurl,
                    dataType: "json",
                    data: { AccId: 1 },
                    success: function (data) {
                        InitJQPlot(data);
                    }
                });
});

  function InitJQPlot(data) {                  
                var minValue = Math.round(Math.min.apply(Math, data.values)) - 1;
                var testData = [];
                var testLabel = [];
                var j = 0;
                for (var i = 0; i < data.Length; i++) {
                    testData.push([j, data.values[i]]);
                    testLabel.push([j, data.months[i]]);
                    j++;
                }
                var plot = $.plot($("#curve-chart"),
                   [{ data: testData, label: "Test Plot"}], {
                       series: {
                           lines: { show: true,
                               fill: true,
                               fillColor: {
                                   colors: [{
                                       opacity: 0.05
                                   }, {
                                       opacity: 0.01
                                   }]
                               }
                           },
                           points: { show: true }
                       },
                       grid: { hoverable: true, clickable: true, borderWidth: 0 },
                       yaxis: { min: minValue, max: 100 },
                       xaxis: {
                           ticks: testLabel
                       },
                       colors: ["#fa3031"]
                   });
}
</script>
</panel>
 <asp:Button ID="btnExport" OnClick="btnExport_Click" runat="server" Text="Export To HTML" />

I have given my css within <style> element.I have included jquery.js , jquery-ui.min.js , jquery.flot.js , jquery.flot.resize.js , jquery.flot.pie.js , jquery.flot.stack.js , sparklines.js , sparkline-index.js , respond.min.js , html5shiv.js,custom.js

i'm getting that dynamic chart in .aspx page but its is not getting generated in html file .. i'm just getting a blank space in that <div id="curve-chart">

I'm not getting an output html file with dynamic chart.

Please help me out to create html file with dynamic chart.

Answer 1

After you have defined an external cascading style sheet (CSS), you can link the style sheet to individual ASP.NET Web pages to apply the styles to the elements on the page. Style sheets allow you to specify formatting styles for HTML elements.

You have to add the stylesheet in your aspx page for reference

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
     <link href="MyStyles.css" rel="stylesheet" type="text/css" />      
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
     // body goes here 
</asp:Content>