您的位置：首页 > Web前端 > JavaScript

网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

2014-05-27 14:47 811 查看
此为文章备份，原文出处（我的网站）

网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/10/google_charts-with-asp.net-clientscriptmanager.registerstartupscript.aspx

上一篇文章提到 Google Charts

黯然销魂之网页绘制图表 Google Charts with JavaScript....好强、好简单啊！太好用了，以后用不到怎么办？

http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx

今天上课时，学员都很有兴趣。

但是， JavaScript写在HTML画面上，该如何与 AP.NET后置程序代码搭配呢？

您可以参考：ClientScriptManager 类别http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx

把您的 Google Charts范例（JavaScript程序代码）

沿用上面超链接的写法，把它（字符串相连）写在后置程序代码里面，就搞定啰！

============================================================================

我的教学影片：https://www.youtube.com/watch?v=or8tibRKams

============================================================================

上一个范例：

<%@ Page .........

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<!--Load the AJAX API-->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

// Load the Visualization API and the piechart package.

google.load('visualization', '1.0', { 'packages': ['corechart'] }); // ****您要引用哪种图表格式呢？？****

// Set a callback to run when the Google Visualization API is loaded.

google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,

// instantiates the pie chart, passes in the data and draws it.

function drawChart() {

// Create the data table. ***** 原始资料 ********

var data = new google.visualization.DataTable();

//数据的表头 / Header（数据型态, 域名）

data.addColumn('string', 'Topping');

data.addColumn('number', 'Slices');

// 加入原始数据

data.addRows([

['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]

]);

// ******** 请修改这一区 ********************

// Set chart options

var options = {

'title': '图表的标题--How Much Pizza I Ate Last Night', //图表的标题

'width': 400,

'height': 300

//, 'is3D': true, // *** 启动 3D效果。***

};

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

//******************************** 这里有一个 .PieChart要搭配您的图表修改。

chart.draw(data, options);

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<!--Div that will hold the pie chart-->

<div id="chart_div"></div>

</div>

</form>

</body>

</html>

把上面咖啡色字体（斜体字）放到 "ASP.NET 后置程序代码"里面

以字符串相连来做即可。

您可以参考：ClientScriptManager 类别http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>ASP.NET如何搭配「Google Charts」的JavaScript</title>

<!--Load the AJAX API-->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

//============================================================

// 这里全部消失了，写去「后置程序代码」

//============================================================

</head>

<body>

<form id="form1" runat="server">

<div>

ClientScriptManager.RegisterStartupScript 方法 (Type, String, String, Boolean)

<br /><br />数据源：<a href="http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx">http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx</a> 

<br />

<br />

<br />

<br />本范例 JavaScript码沿用范例 Google_Chart_00.aspx<br /><br />

<hr />

<!--Div that will hold the pie chart-->

<div id="chart_div"></div>

</div>

</form>

</body>

</html>

后置程序代码如下：

01

protected void Page_Load(object sender, EventArgs e)

02

{

03

//** 数据源 http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx

04

05

// Define the name and type of the client scripts on the page.

06

String csname1 = "Script1";

07

String csname2 = "Script2";

08

Type cstype = this.GetType();

09

10

// Get a ClientScriptManager reference from the Page class.

11

ClientScriptManager cs = Page.ClientScript;

12

13

// Check to see if the startup script is already registered.

14

// 呼叫 IsStartupScriptRegistered 方法，判断特定索引键和型别组的启始脚本是否已注册，避免不必要的脚本加入尝试。

15

if (!cs.IsStartupScriptRegistered(cstype, csname1))

16

{

17

String cstext1 = "google.load('visualization', '1.0', { 'packages': ['corechart'] });";

18

cstext1 += "google.setOnLoadCallback(drawChart);";

19

20

cs.RegisterStartupScript(cstype, csname1, cstext1, true);

21

// 使用 addScriptTags (最后一个)参数，指出 script 参数所提供的脚本是否包装在<script><![CDATA[项目区块中。

22

// 最后一个参数 addScriptTags 设为 true，表示<script>脚本标记会自动加入。

23

}

24

25

// Check to see if the client script is already registered.

26

if (!cs.IsClientScriptBlockRegistered(cstype, csname2))

27

{

28

StringBuilder cstext2 = new StringBuilder();

29

cstext2.Append("<script type=\"text/javascript\"> function drawChart() {");

30

cstext2.Append("var data = new google.visualization.DataTable();");

31

cstext2.Append("data.addColumn('string', 'Topping');");

32

cstext2.Append("data.addColumn('number', 'Slices');");

33

cstext2.Append("data.addRows([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);");

34

cstext2.Append("var options = { 'title': '图表的标题--How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };");

35

cstext2.Append("var chart = new google.visualization.PieChart(document.getElementById('chart_div'));");

36

cstext2.Append("chart.draw(data, options);");

37

cstext2.Append("}]]></script>");

38

39

cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false);

40

}

41

// 在网页上的 OnLoad 事件引发之前。 不保证脚本区块可以根据其所注册的顺序来输出。

42

// 如果脚本区块的顺序很重要，请使用 StringBuilder 对象，在单一字符串中一起搜集脚本，然后在单一客户端脚本区块中注册所有的脚本。

43

}

执行后的成果，没有问题

但请您注意下图，执行后的网页「原始成果」

您可以发现 JavaScript放置的为置有点差异

这点请您小心。

请参阅我以前的文章

ASP.NET与 JavaScript -- ClientScriptManager 类别

http://www.dotblogs.com.tw/mis2000lab/archive/2012/09/06/asp_net_javascript_20120906.aspx

在伺服端程序代码中，呼叫下表中列出的方法之一。

方法

说明

RegisterClientScriptBlock

将脚本区块加入页面顶端。 您可以字符串形式建立脚本，然后将它传递给加入网页的方法。 您可以使用这个方法将任何脚本插入网页。 请注意，在完成所有项目之前脚本可能就会呈现至网页。因此您可能无法从脚本参考网页上所有的项目。

RegisterClientScriptInclude

这个方法类似 RegisterClientScriptBlock 方法，但是会加入参考外部 .js 档的脚本区块。 在以动态方式加入任何其他脚本之前就会加入这个包含档。因此您可能无法参考网页上的某些项目。

RegisterStartupScript

将脚本区块加入当网页完成加载，但是在引发网页的 onload 事件之前，就会执行的网页。 这个脚本通常不会建立为事件处理程序或函式。其通常只包含想要执行一次的语句。

RegisterOnSubmitStatement

加入执行以响应网页 onsubmit 事件的脚本。 在送出网页之前就会执行脚本，并且让您有机会取消送出动作。

HOW TO：以动态方式将客户端脚本(JavaScript)加入至 ASP.NET [Web网页]

http://msdn.microsoft.com/zh-tw/library/ms178207.aspx

HOW TO：将客户端脚本事件加入至 ASP.NET [ Web服务器控件]

http://msdn.microsoft.com/zh-tw/library/7ytf5t7k.aspx
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航