如何在C＃中将.aspx页面保存为html文件时绘制动态JQ图。

Question

我正在使用引导程序开发基于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> element.I内我的CSS已包括的jquery.js，jQuery的ui.min.js，jquery.flot .js文件，jquery.flot.resize.js，jquery.flot.pie.js， jquery.flot.stack.js，个sparklines.js，火花，index.js

我得到在.aspx页面中是动态的图表，但它不是在HTML文件中如何产生..我刚开始在<div id="curve-chart">空格

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

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

Answer 1

我已经使用`JavaScriptSerializer”宣布TESTDATA和testLabel全球和页面加载分配的值。现在我可以用动态图表创建html文件。

代码

隐藏文件：

public List<object> testDataList = new List<object>(); 
public List<string> testLabelList = new List<string>(); 

protected void Page_Load(object sender, EventArgs e) 
{ 
//Load data to testDataList and testLabelList 
} 

protected string JsontestDataArray 
{ 
    get 
     {   
      var myArray = testDataList.ToArray(); 
      return new JavaScriptSerializer().Serialize(myArray); 
     } 
} 
protected string JsontestLabelArray 
{ 
    get 
     { 
      var myArray = testLabelList.ToArray(); 
      return new JavaScriptSerializer().Serialize(myArray); 
     } 
} 

在.aspx页面中：

$(document).ready(function() {  
      var testDataList = {values: <%= JsontestDataArray %>}; 
      for (var i = 0; i < testDataList.values.length; i++){       
      testData.push([i, testDataList.values[i]]);   
      }   
      var testLabelList = {values: <%= JsontestLabelArray %>}; 
      for (var j = 0; j < testLabelList.values.length; j++){       
      testLabel.push([j, testLabelList.values[j]]);   
      }   
}); 

现在我能够得到的数据加载我的动态图。

Answer 2

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

如果您使网址绝对，例如。 http://servername/TestHandler/GetStatsDAta/Ajaxhandler.axd，您可能会发现它可以正常工作，尽管浏览器有可能会担心本地文件会进入服务器。