網頁繪製圖表 Google Charts with JavaScript(2)....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)

2016年12月21日星期三

網頁繪製圖表 Google Charts with JavaScript(2)....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)

網頁繪製圖表 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 .........


 



    
 
    <!--Load the AJAX API   提醒您  2016/11月起，第一列Script有異動

-->

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

以字串相連來做即可。

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

上一個範例：

 



    ASP.NET如何搭配「Google Charts」的JavaScript
 
    <!--Load the AJAX API
    
 
    //============================================================
    //  這裡全部消失了，寫去「後置程式碼」
    //============================================================

-->

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

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

本範例 JavaScript碼沿用範例 Google_Chart_00.aspx

後置程式碼：

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 參數所提供的指令碼是否包裝在 ");

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