MIS2000 Lab. - ASP.NET專題實務 & WebForm +MVC 遠距教學

2017年1月9日星期一

19/30 ADO.NET與資料庫 #2 -- ADO.NET程式 DataReader為何不能分頁？

從上一篇文章起（ http://mis2000lab.blogspot.com/2017/01/1830-adonet-1-adonet.html）

我們開始自己寫程式作資料存取

DataSet / DataReader兩者的差異，可以參閱這篇文章
** 初探ADO.NET #2，DataReader 與 DataSet（資料集）**
https://dotblogs.com.tw/mis2000lab/archive/2008/08/15/4919.aspx

ADO.NET程式 DataReader為何不能分頁？
這句話是什麼意思？

「從資料來源讀取「順向」且「唯讀」的資料流」，有範例示範一下，為我說明嗎？

https://youtu.be/oY7jd0ABXeM

後續的範例也會跟各位介紹「DataReader + 自己寫SQL指令做分頁」

當我們要查詢數據時，如果數據量太大，要自己寫SQL指令做 "分頁" 呈現。
您在Google查到一千筆數據，Google也是分成一頁一頁的呈現吧？
畫面的呈現，可以透過GridView、Repeater（這東西 "預設"不提供分頁功能）來呈現，但分頁功能則是我們自己寫的。或是透過 DataReader來呈現每一頁的數據。

這些範例在後續都會為您介紹。

順便也分享一篇文章。
如果您對於DataReader / DataSet想進一步瞭解，我收集了許多前輩的經驗談

[ADO.NET] Web Form為求快速，可使用 DataReader直接處理資料來源
https://dotblogs.com.tw/mis2000lab/2012/01/13/dataset_datareader_20120113

下一篇文章，讓我們開始動手寫程式--
ADO.NET與資料庫 #3 -- 跨平台(Web + Windows)的程式與範例

18/30 ADO.NET與資料庫 #1 -- ADO.NET程式的四大步驟

今天開始，我們試著「自己寫程式」做資料庫的存取。
上一篇文章 http://mis2000lab.blogspot.com/2017/01/1730-9-optimistic-concurrency.html

ADO.NET程式的四大步驟--以DataReader為例。

並且用SqlDataSource簡單說明ADO.NET底下兩名大將--DataReader & DataSet。

今天的 Youtube影片 https://youtu.be/zeXgLVqSy50

如果您需要一些文章、範例來參考，請看

初探ADO.NET #1，程式與資料庫互動的四大步驟
https://dotblogs.com.tw/mis2000lab/2008/08/15/4918

初探ADO.NET #2，DataReader 與 DataSet（資料集）
https://dotblogs.com.tw/mis2000lab/archive/2008/08/15/4919.aspx

DataReader的範例與程式碼
https://dotblogs.com.tw/mis2000lab/archive/2008/04/24/3446.aspx

下一篇文章

ADO.NET與資料庫 #2 -- ADO.NET程式 DataReader為何不能分頁？

http://mis2000lab.blogspot.com/2017/01/1930-adonet-2-adonet-datareader.html

17/30 網頁與資料庫#9 -- 開放式並行存取 (Optimistic Concurrency)

SqlDataSource控制項的設定步驟裡面
當您按下「進階」按鈕，就會產生對應的新增、刪除、修改的SQL指令
（上一篇文章 http://mis2000lab.blogspot.com/2017/01/1630-8-html.html ）

有一個選項，名為「開放式並行存取 (Optimistic Concurrency)」

名詞有點坳口，這到底是什麼東西啊？

我用 Youtube影片為您示範一次，希望這樣比較容易明瞭。
SqlDataSource 開放式並行存取 (Optimistic Concurrency)，以GridView為例
https://youtu.be/R9c3krJrZsE

其實，您在大型控制項的 xxx_Updating事件裡面可以看到這樣的程式碼，意思也差不多。
e.NewValues["欄位"]
e.OldValues["欄位"] ，簡單的說，這就是您修正「以前」，原本的數值

用來偵測、比較，您取出這一筆記錄時，是否有人也同時取出修改？
如果是的話，那麼您寫回資料庫時，就會被阻擋。

不知道我這樣解釋「開放式並行存取 (Optimistic Concurrency)」，有沒有比較清楚？

這個範例可以很明白的指出：
文字＋圖片的傳統敘述，比不上現場操作（影片）的解說
可以讓人一看就懂。

如果您需要這個範例的文字稿，請看http://www.dotblogs.com.tw/mis2000lab/archive/2014/03/14/sqldatasource_optimistic_concurrency_20140314.aspx

下一篇文章，我們開始自己寫 ADO.NET 程式存取資料庫吧？不要再依賴精靈了
請看 http://mis2000lab.blogspot.com/2017/01/1830-adonet-1-adonet.html

16/30 網頁與資料庫#8 -- 自己設計HTML畫面的 "新增"一筆記錄

前面幾篇文章，都使用到大型控制項（如GridView or DetailsView）與SqlDataSource，快速產生CRUD的資料存取畫面。
上一篇文章 http://mis2000lab.blogspot.com/2017/01/1530-7-gridview.html

但使用這些大型控制項，因為不好修改，如果您搭配前端設計師（媒體設計、美工人員），對方可能不願意配合。在這種情況下，盡量讓畫面上的輸入欄位，越貼近傳統HTML表單、變化越少，可能會好一些。

所以今天要跟大家分享的就是：
以基礎的Web控制項（如TextBox、清單控制項等等），作為畫面輸入（新增）的輸入元件

目前雖然還沒有能力，自己寫程式存取資料庫（如ADO.NET）
但仍可以搭配 SqlDataSource來幫幫忙

YouTube教學影片 https://youtu.be/VDLu879rt14

這個範例，最早是在章立民老師的書本裡面看見的（用實例學ASP.NET 3.5-基礎篇，碁峰出版社）

因為我沒有記憶、背誦 SqlDataSource產生的 <標籤>
所以我找了一下 Visual Studio的設定步驟，發現這些步驟可以自動產生這些<標籤>
對初學者來說，接受度比較高
也分享給大家

感恩章立民老師在資訊大道上，不斷提攜、教育我們
從大學畢業專題，我就是用章老師的書籍 -- FoxPro 2.6做為參考

文末也分享章立民老師的大作，我非常喜歡這篇文章 --
笑談我的學習之路
https://dotblogs.com.tw/limingstudio/2009/11/13/11759

下一篇文章：網頁與資料庫#9 -- 開放式並行存取 (Optimistic Concurrency)

http://mis2000lab.blogspot.com/2017/01/1730-9-optimistic-concurrency.html

15/30 網頁與資料庫#7 -- 我的 GridView有 "新增"功能

上一篇文章（ http://mis2000lab.blogspot.com/2017/01/1330-5-calendardatabinding.html ）提到：
當我們練習多個ASP.NET控制項、SqlDataSource的互動。

您可知道這些精靈組合出來的東西，有不少漏洞與缺失？
該怎麼處理？考驗您（初學者）對ASP.NET觀念是否熟悉？

尤其是「DataBinding的時機」

==========================================
如果您可以控制大型控制項「DataBinding的時機」
那麼您可以進行下一個範例「我的 GridView有 "新增"功能」

透過控制 GridView的資料來源：

"有"資料的時候，就呈現資料。一般的 GridView外觀。
例如 GridView1.DataSourceID = "SqlDataSource1"
或是
GridView1.DataSource = ds（註：自己寫程式 DataSet or DataTable等）
GridView1.DataBind()
"沒有" 資料時，就呈現GridView「空白樣版 EmptyDataTemplate」。
裡面事先加入 DetailsView的「新增」便可完成
例如
C#語法的GridView1.DataSourceID = null
VB語法的GridView1.DataSourceID = Nothing

今天的 YouTube影片： https://youtu.be/86u63WJrZ34

============================================
推薦微軟MVP -- KK Bruce老師的文章，寫得非常詳細喔
GridView「新增」功能破解完整攻略
kkbruce.blogspot.com/2010/04/gridview.html

GridView新增功能圖文篇
kkbruce.blogspot.com/2010/07/gridview.html

好的，我們的下一篇文章將會分享

如果畫面上「不使用」大型控制項？例如：不使用 DetailsView控制項
完全用「基礎」的Web控制項來設計畫面，能否（盡量）不寫程式也做到資料新增？？

詳見下一篇文章 http://mis2000lab.blogspot.com/2017/01/1630-8-html.html

14/30 網頁與資料庫#6 -- SqlDataSource做不到、做不好的地方

雖然前面的文章 (http://mis2000lab.blogspot.com/2017/01/1330-5-calendardatabinding.html)
提到 SqlDataSource加上大型控制項（資料繫結控制項）可以做出不少變化
但還是有些隱藏的缺失

也因為有這些缺失，所以自己寫程式來處理，可以做得比「精靈」更好

今天與您分享的就是：SqlDataSource做不到、做不好的地方
Youtube影片：https://youtu.be/P7AKhH-9YrE

當我們練習多個ASP.NET控制項、SqlDataSource的互動。

您可知道這些精靈組合出來的東西，有不少漏洞與缺失？
該怎麼處理？考驗您（初學者）對ASP.NET觀念是否熟悉？

尤其是「DataBinding的時機」

==========================================
如果您可以控制大型控制項「DataBinding的時機」
那麼您可以進行下一個範例「我的 GridView有 "新增"功能」

透過控制 GridView的資料來源：

"有"資料的時候，就呈現資料。一般的 GridView外觀。
"沒有" 資料時，就呈現GridView「空白樣版 EmptyDataTemplate」。
裡面事先加入 DetailsView的「新增」便可完成

請看下一篇文章

13/30 網頁與資料庫#5 -- 樣板裡面的 Calendar日曆控制項「編輯DataBinding」無法呈現日期？

樣板裡面的 Calendar日曆控制項「編輯DataBinding」無法呈現日期？

ASP.NET 大型控制項轉成「樣板（Template）」以後，沒想到日曆控制項會遇見這種錯誤？
對應資料表欄位的 DateTime格式會出一點小bug。

幸好透過資料繫結運算式 (DataBinding Expression)就能修正，很簡單。

SelectedDate='<%# Convert.ToDateTime(Eval("欄位名稱", "{0:yyyy/MM/dd}")) %>' ....

當資料表裡面的日期與時間，預設的時間是上午12:00:00 或是 00:00:00。
日曆控制項正常呈現。

圖片下方，資料表裡面的「時間」不是預設值的時候，日曆控制項無法呈現結果？？？？

透過影片教學來分享這個有趣範例......

YouTube影片 --https://youtu.be/OsUT5Qu9yRE

關於本文與範例，請看 www.dotblogs.com.tw/mis2000lab/archive/2015/08/05/databinding-expression-calendar-datetime-template.aspx

下一篇文章，請看：
網頁與資料庫#6 -- SqlDataSource做不到、做不好的地方

12/30 網頁與資料庫#4 -- 大型控制項的樣版（Template）與清單控制項

延續上一篇文章的主題（http://mis2000lab.blogspot.com/2017/01/1130-3-template.html）
我們繼續下去

如果您要在大型控制項「裡面」、樣版「裡面」加入清單控制項，如DropDownList
有這兩種情況
第一，選項很簡單，例如：是/否？男/女？
第二，選項多而且可能異動。例如：出生地、部門別、科系....

出生地（縣市）可能因為行政區重整，做修改
部門可以擴編或是異動
當初就讀的科系可能改名字或異動

我直接用Youtube教學影片說明，比較清楚 -- https://youtu.be/Gaatqr2pJFw

以今天分享的範例來說，其實滿實用的
我也是在台灣幾本入門書上沒看見，才想到要做這示範

下一篇文章則是讀者詢問的範例，頗為有趣 --

http://mis2000lab.blogspot.com/2017/01/1330-5-calendardatabinding.html

11/30 網頁與資料庫#3 -- 大型控制項的樣版（Template）

今天要分享的範例是「大型控制項的樣版（Template）」
上一篇文章 http://mis2000lab.blogspot.com/2017/01/1030-2-sqldatasource.html

網站的「前台」，給一般用戶（End User）觀賞時，當然是爭奇鬥艷，各種前端的花俏技巧都得加上。

但到了「後台」，也就是必須輸入會員帳號、密碼才能看見的「網站管理區」。
這裡的功能就很單純，但是程式數量很 "多"，例如：資料存取（CRUD）、查詢（搜尋）、各種報表的產生（光是各式各樣的報表，都是幾十份起跳！）....等等。

如果一個一個功能，還是得自己寫程式＋自己手寫HTML畫面，那麼「生產力」太差勁了

ASP.NET (Web Form)最強的的應該就是「大型控制項」，尤其是「資料繫結控制項」吧
常用的功能，可以快速完成，然後小幅修改即可。

其實修改大型控制項，除了畫面上的修改（樣版）以外
也可以在後置程式碼裡面動手，但這難度又高了一點點。沒關係，我們慢慢來.....

問題是：接下來的這兩個小幅修改（範例），該怎麼做呢？

第一個比較簡單，我們只是把 TextBox（文字輸入方塊）改成 Calendar日曆控制項
用意是：避免使用者輸入「日期格式」時，自己填寫毫無規範。
例如：有人寫2017/1/1，有人會補上零 2017-01-01，有人寫日月年格式 Jan-1-2017

不如直接點選 Calendar日曆控制項，產生的「日期格式」比較一致化

請看 Youtube教學影片 - https://youtu.be/Sr61a1sCSqM

這個範例有兩三種變化，也可以說「大型控制項＋基礎控制項」可以做出什麼變化呢？

我得在下一篇文章，再與您分享了

http://mis2000lab.blogspot.com/2017/01/1230-4-template.html

2017年1月4日星期三

10/30 網頁與資料庫#2 -- SqlDataSource控制項，資料存取的精靈

SqlDataSource控制項，在 APS.NET(Web Form)有這個小精靈，
協助初學者連結資料庫、產生SQL指令（CRUD）......等等。

等到您熟悉「程式搭配資料庫」就是這四大步驟時，
後續我們就能自己「動手寫」程式碼了

連結資料庫
執行T-SQL指令 (CRUD，新增、查詢、修改、刪除)
畫面設計，由您自由發揮
關閉連線、關閉資源

資料庫連線字串，不要死背，請由SqlDataSource精靈產生
完成後，會把連結字串放在 Web.Config設定檔裡面

<configuration>
  <connectionStrings>

    <add name="testConnectionString（註：標題，可自己命名或讓系統自動產生）" connectionString="Data Source=.\SQLExpress;Initial Catalog=test(註：資料庫的名稱);Integrated Security=True" providerName="System.Data.SqlClient" />
    
  </connectionStrings>

Youtube教學影片在此 -- https://youtu.be/oEHy-oTvd3s

今天有個意外的插曲，錄製影片時，我剛好在聽佛經
不小心把佛經、咒語也給錄製下來了（當成背景音樂）
所以我在影片中，加入字幕，希望這樣可以更清楚地表達相關步驟

請看下一篇文章：大型控制項（如GridView / DetailsView）與樣版

http://mis2000lab.blogspot.com/2017/01/1130-3-template.html

9/30 網頁與資料庫#1 -- 範例資料庫的安裝

前幾天完成了網頁的「畫面」與簡單的「後置程式碼」

但如果沒有資料庫來紀錄這些「個別的」資料
日後無法統計彙整，變成有用的「資訊」

所以今天開始，我們會加入資料庫，搭配網頁程式，就能做到資料存取

首先，請下載MS SQL Server。一般人使用可以下載 Express版
只要上網搜尋「SQL Server 2012 download」就能找到官方下載網站
當然，您堅持要學新版的SQL 2014 or 2016都可以的

如果您連下載軟體與安裝，都發生困難（或是覺得怕怕的），
那麼我寫這篇文章來幫助您
詳見https://dotblogs.com.tw/mis2000lab/2016/11/12/download_install_vs2015_sql_express

接著，當您安裝完成後，
請把我們日後會用到的兩個資料庫加入

這個步驟也錄製成 YouTube教學影片了，請看 https://youtu.be/t50M_s8QnkE

影片中，我用了兩種方法：
第一，直接「附加」資料庫檔案，將 .mdf檔附加上去
第二，透過** script檔案**來安裝

優缺點與應用情境，我在影片都有提到。

下一篇文章：
網頁與資料庫#2 -- SqlDataSource控制項，資料存取的精靈

8/30 回家作業 HomeWork -- 表單 & 輸入畫面

學會 Visual Studio的操作
學會簡單的驗證（Validate）與防呆
學會基本的控制項，如 TextBox文字輸入方塊、DropDownList下拉式選單、Button按鈕等等
也學會了 PostBack與某些控制項的「AutoPostBack」屬性之後.....

我們來寫一個基本的表單，用它來輸入簡單資料吧？

例如：
*會員登入，是否要對方填寫一些個資呢？
*學生或員工資料的檢檔，也得這樣的表單，輸入人員資料？
*購物網站的「商品」，也可以用這樣的表單，輸入產品的基本資料？
*新聞媒體或是BLOG網站，也可以靠這樣的表單，輸入每一篇文章、新聞？

因此這個範例的用途很廣，很實用。

在我們親自撰寫 & 自己動手做的過程中，會發現一些特別的地方。例如：
*我想做的一些特效（在別的網站有看過），但我目前作不出來？
*我使用的控制項，有些功能好像有異常？或是某些功能，我做不到？

唯有「自己動手做」了以後，才知道自己還缺什麼？還要補強什麼？

因為「自己動手做」太重要了，
所以今天的教學影片，時間很長，將近50分鐘呢！！

YouTube影片網址 https://youtu.be/YEr_SCBDsh8

我親自帶著您一步一步慢慢做，請您也跟著練習

如果您寫好表單的「輸入畫面」，
等到後續「資料庫」、「SqlDataSource控制項」或是自己會撰寫ADO.NET程式以後，
您就可以把這表單 "填入的資料"，寫入資料庫囉！

請拭目以待，下一篇文章是：資料庫的安裝

我們會介紹兩種方法，讓您把資料庫的「範例」，裝在您的電腦上
完成後，未來的課程中，您就能自己做網頁（畫面）＋資料庫，兩者互相搭配了

7/30 ASP.NET (Web Form)最可怕、最特別的 PostBack

PostBack是最特別的一點，他帶來許多便利，如上一篇文章的範例（）
但也造成許多失誤

相關文章，請看：
上課第一天的有趣範例 -- PostBack基礎觀念 & Page.IsPostBack
https://dotblogs.com.tw/mis2000lab/2013/01/08/postback_q_and_a_20130108

YouTube影片教學 https://youtu.be/xk-oGKl8aFE

很多老手，即使寫過其他網頁程式（ASP / PHP / JSP）
但是，對於 ASP.NET (Web Form)的PostBack仍然束手無策

希望這個簡單的範例，對於初學者有些許啟發與幫助
[給ASP.NET 初學者的話]不要練功練了三年，才發現自己必須「砍掉重練」！....學習ASP.NET之前，請先把自己杯中的水倒掉
https://dotblogs.com.tw/mis2000lab/2012/03/15/game_over

請看下一篇文章：回家作業 HomwWork -- 表單 & 輸入畫面

6/30 AutoPostBack屬性 - 簡單、入門的 TextBox 密碼強度警示圖

AutoPostBack屬性 - 簡單、入門的 TextBox 密碼強度警示圖

一方面練習 TextBox控制項（瞭解它的 AutoPostBack屬性、OnTextChanged事件）

一方面練習基礎的程式，例如： For迴圈（如何脫離 For迴圈）、 If判別式（或是類似的 switch...case... or Select...Case...）

https://www.youtube.com/watch?v=5CRCnQfjNLg

這個範例其實展示了 ASP.NET (Web Form)控制項與傳統HTML表單的差異
只要偵測到TexTBox裡面文字被改變，就會自動送出（Submit）並開始執行檢驗（檢查密碼強度）

下一個範例要介紹 PostBack回傳

5/30 從零開始的 C# 線上學習網站

感恩微軟讚嘆微軟
提供了一個 "從零開始" 的 C# 線上學習網站，讚！

Getting Started with C# 從零開始，有二十個小課程

https://dotblogs.com.tw/mis2000lab/2016/10/21/c_sharp_beginner_20_lession

這個網站的教學理念，跟我很類似，他一開始介紹了字串、日期時間等等函數的寫法
加上簡單的IF判別與迴圈，就可以了

先求「實用」，讓初學者能跟上
在「學習之火」（五分鐘熱度）消失以前，您得用有趣的範例讓他知道「他有所得」！
不然很快就會因為「無趣」「枯燥」，他不想學了

微軟的這個教學網站，雖然只有20門課
一門課只有一個網頁，不多！
但也能介紹到OOP、LINQ，所以不能小覷

我建議初學者完成前面五～七堂課即可，

你全部學完了，但不知道「怎麼用」
可能會很沒有成就感

介紹的影片在此 https://youtu.be/beBzBMyG_gw

明天（下一篇文章）再見囉....

4/30 VS 2015起，VB後置程式碼的 Page_Load事件消失了？

VS 2005~20013的操作其實大同小異

到了VS 2015，在VB語法的操作上略有一點小小變化
導致上個範例，使用VB語法的朋友，找不到 Page_Load事件（上一篇文章 http://mis2000lab.blogspot.com/2017/01/330.html ）

C#語法，後置程式碼可以看到
protected void Page_Load(object sender, EventArgs e)
{
// 程式碼寫在這裡
}

VB語法，從VS 2015開始，您得這麼做
請看 YouTube影片的教學 https://www.youtube.com/watch?v=ZzVEkrgPHLE&t=50s

簡單的說，他會用你的「檔名」加上 Load事件，取代以前 Page_Load事件。

說是「檔名」也不對
應該說是「類別名稱」啦
Partial Class _Default
Inherits System.Web.UI.Page

Private Sub _Default_Load(sender As Object, e As EventArgs) Handles Me.Load
       ' 程式碼寫在這裡
End Sub

End Class

謝謝您的觀看，下一篇文章

http://mis2000lab.blogspot.com/2017/01/530-c.html

3/30 網頁程式的前端？後端？到底有什麼差別？

延續上一篇文章：http://mis2000lab.blogspot.com/2017/01/230.html

很多初學者學習網頁，大概只知道「工具」不同
例如：FrontPage or DreamWeaver用來製作靜態網頁
Visual Studio可以寫網頁程式（偏向程式設計，而不只有畫面設計）

其實，如果您有上述的概念，大概已經能區分「前端」與「後端」兩種技術了

(1). 前端技術
jQuery / JavaScript / CSS / RWD？----這些東西通常在瀏覽器上就能執行，並看見成果。

(2). 後端技術
ASP.NET Web Form、控制項？----這些東西要靠Web Server翻譯以後，才會變成HTML網頁的成果

當然，依照我們的慣例，我用 Youtube教學影片與大家分享
請看 https://www.youtube.com/watch?v=T0EkQysLNXE