網頁繪製圖表 Google Charts with JavaScript(2)....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)－MIS2000 Lab -- ASP.NET專題實務 / WebForm + MVC線上教學影片

網頁繪製圖表 Google Charts with JavaScript (2)....與ASP.NET網頁如何結合在一起？
ClientScriptManager.RegisterStartupScript 方法

JavaScript寫在HTML畫面上，該如何與 AP.NET後置程式碼搭配呢？

上一篇文章提到 Google Charts

http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript-1.html

今天上課時，學員都很有興趣。

但是， 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>

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

<div>

</div>

</form>

</body>

</html>

把上面咖啡色字體（斜體字）放到 "ASP.NET 後置程式碼"裡面

以字串相連來做即可。

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

<!DOCTYPE html>

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

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

// 這裡全部消失了，寫去「後置程式碼」

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

</head>

<body>

<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 />本範例 JavaScript碼沿用範例 Google_Chart_00.aspx<br /><br />

</div>

</form>

</body>

</html>

後置程式碼：

protected void Page_Load(object sender, EventArgs e)

{ //** 資料來源 http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx

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

String csname1 = "Script1";

String csname2 = "Script2";

Type cstype = this.GetType();

// Get a ClientScriptManager reference from the Page class.

ClientScriptManager cs = Page.ClientScript;

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

// 呼叫 IsStartupScriptRegistered 方法，判斷特定索引鍵和型別組的啟始指令碼是否已註冊，避免不必要的指令碼加入嘗試。

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

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

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

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

// 使用 addScriptTags (最後一個)參數，指出 script 參數所提供的指令碼是否包裝在 <script> 項目區塊中。

// 最後一個參數 addScriptTags 設為 true，表示<script>指令碼標記會自動加入。

}

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

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

StringBuilder cstext2 = new StringBuilder();

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

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

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

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

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

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

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

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

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

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

}

// 在網頁上的 OnLoad 事件引發之前。不保證指令碼區塊可以根據其所註冊的順序來輸出。

// 如果指令碼區塊的順序很重要，請使用 StringBuilder 物件，在單一字串中一起蒐集指令碼，

// 然後在單一用戶端指令碼區塊中註冊所有的指令碼。

}

執行後的成果，沒有問題

但請您注意下圖，執行後的網頁「原始成果」

您可以發現 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 事件的指令碼。在送出網頁之前就會執行指令碼，並且讓您有機會取消送出動作。