ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學 線上教程 教學影片

2015-09-17

黯然銷魂 之 網頁繪製圖表 Google Charts with JavaScript.... ADO.NET取得圖表原始資料

料理東西軍！ 「Google Chart V.S. ASP.NET Chart控制項」，今晚您要選擇哪一項？
寫在 HTML網頁內，前端 JavaScript的資料格式如下：
// 加入原始資料
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);

 

黯然銷魂 之 網頁繪製圖表 Google Charts with JavaScript.... ADO.NET取得圖表原始資料

 

前兩篇文章介紹 Google Chart，並且把 "前端"程式 (JavScript) 改寫到ASP.NET (Web Form)後置程式碼

 
這兩篇文章的內容，都有 YouTube教學影片的簡介
藉此也讓各位看到「實際操作、(影片)教學」會比自己慢慢K書、看文件、K程式碼有效率多了。
http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx
 
https://dotblogs.com.tw/mis2000lab/2014/05/10/google_charts-with-asp_net-clientscriptmanager_registerstartupscript
 
 
一旦把 "前端"程式 (JavScript) 轉移到「後置程式碼」之後
   （請善用上面第二篇文章介紹的ClientScriptManager類別），就是我們動手腳的好時機
 
「組合字串」、「字串相連」，一直以來都是資料庫程式、網頁程式擅長的作法
   （但也因為動態地「組字串」造成 SQL Injection資料隱碼攻擊、XSS攻擊....等等缺失）
 
請透過「參數」的寫法來避免，詳見以下文章說明：
http://www.dotblogs.com.tw/mis2000lab/archive/2014/08/29/ado.net_parameter_sql_injection_20140829.aspx
 
http://www.dotblogs.com.tw/mis2000lab/archive/2014/11/04/microsoft_anti-xss_v43.aspx
 
首先，我們來看看原始的 Google Chart的資料格式（Raw Data）有哪些？
 
以簡單的圓餅圖（Pie Chart）、地理圖表（GeoChart）為例，
兩者比較就能看出來：
 
 
 
甚至還能從 "google試算表"取得資料，透過大家熟悉的SQL指令來查詢
 
         //*** 查詢 Google的一份試算表。
         dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         query: 'SELECT A,D WHERE D > 100 ORDER BY D',
 
這就是我強調：盡量學習「國際標準」的作法，可以避免單一廠商、單一技術改朝換代的威脅
 

寫在 HTML網頁內，前端 JavaScript的資料格式如下：
            // 加入原始資料
            data.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 1],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);
 
 
我們可以看出他的架構，每一筆記錄就是   ['欄位', 值]
類似JSON文件。說穿了並不難。
 
您在後置程式碼，透過ADO.NET或是任何您善用的技術，
把資料庫的數據取出，組合成以上字串格式即可！
 
以下圖為例，我用DataReader來做，會用到兩個方法，取得「欄位名稱」與欄位裡面的「值」
詳見：
http://www.dotblogs.com.tw/mis2000lab/archive/2011/04/14/datareader_fieldcount_getname.aspx
 
 
 
 
 
料理東西軍！
「Google Chart  V.S.  ASP.NET Chart控制項」，今晚您要選擇哪一項？
 
 
完整內容將會收錄在 -- ASP.NET專題實務 (II) VS 2015版 裡面。 書本請看 http://www.books.com.tw/products/0010705908
----------------------------------------------------------------------------------------------
從最傳統的圖表作法，透過 <asp:Image> 與<img>的寬度與高度修改，來做最原始的長條圖。
 
然後介紹  ASP.NET Chart控制項 
 （這東西功能很強，但學起來也很費時、後置程式碼來控制要寫很多程式碼、熟悉很多屬性與方法）
 
 最後介紹「前端技術」為主的 Google Chart，讓您的ASP.NET Web Form跟得上時代
----------------------------------------------------------------------------------------------
 
內容是否豐盛？是否比上一本書又多了好多新鮮事？   請拭目以待。
 
 
 
這裡有一份 YouTube線上影片教學，雖然講英文，但應該看影片就會懂 --
 
Google Chart搭配JSON。這篇講得很清楚 
 
Google Chart原廠說明
 
這位網友提供 Google Chart + Web Service的範例（2016年五月補充）

 

我將思想傳授他人， 他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我，不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程（Web Form + MVC）。 第一天課程， "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了！MIS2000Lab.主講   事先錄好的影片，並非上課側錄！   觀看時，有如「一對一」面對面講課。

 

 

 

贊助商連結

BloggerAds