我正在使用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。我已经包含了 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文件。
答案 0 :(得分：0)
您是否正在从D:\Test\Export.html打开html文件？如果是这样，生成图形数据的链接：var jsonurl = '/TestHandler/GetStatsData/Ajaxhandler.axd';是相对的，所以当你在服务器上运行它时，它可以找到正确的.axd文件，而当它只是在本地文件系统上时它不会＃39 ; t知道从哪个服务器获取信息。
如果您使URL绝对，例如。 http://servername/TestHandler/GetStatsDAta/Ajaxhandler.axd，您可能会发现它有效，尽管浏览器可能会对本地文件发送到服务器存在安全问题。
答案 1 :(得分：0)
我已全局声明 testData 和 testLabel ，并使用“JavaScriptSerializer”从页面加载中分配值。现在我可以使用动态图表创建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]]);
}
});
现在我可以获取数据来加载我的动态图表。