javascript - 如何在 C# .net 中将 .aspx 页面另存为 html 文件时绘制动态 JQ 图

Question

我正在使用 Bootstrap 开发基于 Web 的应用程序。

我正在尝试将 .aspx 页面保存到我的应用程序中的 html 文件。

这是我的代码:

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" />

我在 <style> 内给出了我的 css element.I 包含了 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

我在 .aspx 页面中获取动态图表，但它没有在 html 文件中生成。我只是在那个 <div id="curve-chart"> 中得到一个空白区域

我没有得到带有动态图表的输出 html 文件。

请帮我创建带有动态图表的 html 文件。

Answer 1

所以你打开了来自 D:\Test\Export.html 的 html 文件？如果是这样，生成图形数据的链接:var jsonurl = '/TestHandler/GetStatsData/Ajaxhandler.axd';是相对的，因此当您在服务器上运行它时，它可以找到正确的 .axd 文件，而当它仅在本地文件系统上时，它不知道从哪个服务器获取信息。

如果您将 URL 设为绝对，例如。 http://servername/TestHandler/GetStatsDAta/Ajaxhandler.axd ，您可能会发现它可以工作，尽管浏览器可能会担心将本地文件发送到服务器的安全问题。