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

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