如何在 C# .net 中将.aspx页另存为 html 文件时绘制动态 JQ 图
How to draw dynamic JQ plot while saving a .aspx page as html file in C# .net
我正在使用引导程序开发一个基于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" />
我已经在元素中给出了我的 css <style>
。我包括了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文件。
所以你从D:'Test'Export.html
打开html文件?如果是这样,则生成图形数据的链接:var jsonurl = '/TestHandler/GetStatsData/Ajaxhandler.axd';
是相对的,因此当您在服务器上运行它时,它可以找到正确的.axd文件,而当它只是在本地文件系统上时,它不知道从哪个服务器获取信息。
如果您将 URL 设为绝对,例如。 http://servername/TestHandler/GetStatsDAta/Ajaxhandler.axd
,您可能会发现它可以工作,尽管浏览器可能会对本地文件进入服务器存在安全问题。
我已经全局声明了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]]);
}
});
现在我能够获取数据来加载我的动态图表。
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- 导入jQuery脚本获胜'我不处理html文件
- 生成pdf或其他非html文件时的错误处理
- 从HTML调用typescript文件中的函数
- 使用metro-uiJS对话框调用其他文件html
- 使用选项卡导航到不同的html文件(html、JavaScript)
- 使用 socket.io 时如何发送文件(html,js,css和资源)
- 采购<p>从.txt文件.HTML
- 包含的html中的类无法访问父文件html中的函数
- 重新加载链接文件 HTML
- 如何使用 JavaScript 或 JQuery 从输入类型=文件 html 元素获取文件名
- Angularjs + 指令文件 html 内容点击事件在 js 文件中不起作用
- 如何直接从网页读取/写入本地文件 (html)
- jQuery加载txt文件.html()
- 指定简单配置文件HTML或javascript的最佳方式是什么
- Angular将所有头文件html提取到一个文件中
- 想要部分上传大文件.HTML/PHP
- AJAX -上传文件(HTML 5) &PHP