ASP.NET 網頁程式設計 (使用 C#)

1

ASP.NET 網頁程式設計 (使用 C#)

CSIE NTU

2

開啟ASP.NET 專案(1)

3

開啟ASP.NET 專案(2)

4

檔案介紹

儲存網頁表單相關資料 aspx

儲存程式碼相關資訊 cs

利用專案所編譯出來的組件檔 dll

儲存專案中使用到那些檔案資料等資訊 csproj

儲存方案中使用到那些檔案資料等資訊 sln

說明 副檔案

(建議以開啟方案或專案檔方式來編輯程式)

5

方案總管

z 我們可以利用 [檢視] 中的 [方案總管] 來開啟方 案總管視窗

顯示所有檔案 功能說明 圖示

打開屬性視窗 複製專案 重新整理

切換到表單編輯視窗 切換到程式編輯視窗

6

加入新網頁 (1)

z在方案總管中的專案名稱上按下右鍵，

即可加入新項目至專案中

7

加入新網頁 (2)

z選擇 Web Form 項目即可新增網頁至專案

當中

8

設定起始網頁

z在方案總管中點選 aspx 網頁檔案右鍵，

即可將該網頁設定為起始網頁

9

控制項

z開啟 [檢視] 中的 [工具箱] 會列出常用控 制項

z要在表單中加入控制項的方式有二種

z點選控制項後拖曳至表單上

z連續點選控制項二下

10

屬性視窗

z 在表單設計畫面中，可以透過 [檢視] 中的 [屬 性視窗] 來設定修改表單上各控制項的屬性值

功能說明 圖示

顯示事件視窗 顯示屬性視窗

依屬性名稱排序顯示 依屬性類型分類顯示

物件下拉選單

11

事件

z在 Web 程式設計中，程式的執行流程是 以使用者觸發的事件順序來決定

z控制項提供了許多不同的事件，我們可 以在不同的事件中撰寫不同的程式

z當使用者觸發事件後，程式的流程會立 即跳至該事件內的程式區塊中執行

z在事件視窗中，點選事件名稱二下，即

可跳至程式碼編輯視窗該事件內的程式

區塊

12

常用事件

zPage 類別事件

zLoad–當網頁第一次被載入或重新整理時，

觸發該事件

z控制項事件

zClick–當滑鼠點選該控制項時觸發該事件

13

資料輸出與重導網頁

zResponse 物件具有列印資料於網頁及重 導網頁等功能

zResponse 物件為 HttpResponse 類別物件 z常用方法

zWrite–將資料寫入網頁內容

zRedirect–將網頁重新導向至新的 URL

z用法

zResponse.Write("大家好!! 我是 ives!!");

zResponse.Redirect("WebForm2.aspx");

14

實例探討 sample1-a1 (1)

z程式功能

z將網頁重導至 WebForm2.aspx

z在 WebForm2.aspx 網頁中列印歡迎訊息

z程式內容–WebForm1.aspx

private void Page_Load(object sender, System.EventArgs e)

{

Response.Redirect("WebForm2.aspx");

}

15

實例探討 sample1-a1 (2)

z程式內容–WebForm2.aspx

private void Page_Load(object sender, System.EventArgs e)

{

Response.Write("您好!! 歡迎光臨!!");

}

16

課堂練習 sample1-b1

z程式功能

z在網頁中列印 "大家好"

z換行列印 "我的名字叫做 XXX"

z基本概念

z將 HTML 語法中跳行標籤 <br> 列印至網頁

中，即可產生換行效果

17

新增虛擬目錄 (1)

z 假使我們希望將 Web 應用程式安裝至非系統 預設 (C:\Inetpub\wwwroot) 位置時，必須將檔 案存放的資料夾設定為虛擬目錄

z 虛擬目錄的設定方式，先開啟 [控制台] 中的

[系統管理工具]，再點選 [Internet Information

Services]

18

新增虛擬目錄 (2)

z 在 Internet Information Services 視窗中，逐一展

開資料夾至 [預設的網站] 部份，點選右鍵即可

新增虛擬目錄

19

新增虛擬目錄 (3)

z直接點選 [下一步] 建立虛擬目錄

20

新增虛擬目錄 (4)

z 設定虛擬目錄別名，也就是該虛擬目錄所對應 到的 URL 位址

z http://localhost/ASPNET/

21

新增虛擬目錄 (5)

z接著設定該虛擬目錄實際存放檔案的位

置

22

新增虛擬目錄 (6)

z最後設定存取權限

23

新增虛擬目錄 (7)

z完成新增虛擬目錄動作

24

建立虛擬目錄 (1)

z 如果我們需要將本機目錄底下或某虛擬目錄底

下的其它目錄設定為虛擬目錄，可透過下列步

驟完成

25

建立虛擬目錄 (2)

z在 IIS 中欲設定為虛擬目錄資料夾上點選

右鍵並選擇 [內容]

26

建立虛擬目錄 (3)

z 在內容設定視窗中，點選應用程式名稱右方

[建立] 按鈕，即可完成虛擬目錄建立動作

27

執行範例檔 (1)

z欲執行範例檔案，可更改範例檔案中方 案檔 (.sln) 及專案資訊檔 (.csproj.webinfo) 的虛擬目錄設定

z實例

z假設欲執行的範例檔為 sample5-b6 z目前檔案存放位置為 D:\

z欲執行 URL 為 http://localhost/sample/

28

執行範例檔 (2)

z建立虛擬目錄

z別名設定為 sample

29

執行範例檔 (3)

z建立虛擬目錄

z目錄設定為 D:\sample5-b6

30

執行範例檔 (3)

z完成虛擬目錄設定

z完成後即可在預設的網站底下看到虛擬目錄

sample

31

執行範例檔 (4)

z執行範例檔

z修改完畢後即可順利開啟範例程式中方案或 專案檔，進行程式編輯執行等工作

z其它方式

z若您不想更改原先範例檔所設定的 URL 位

置，則只需在 IIS 中建立範例檔案 URL 中的

虛擬目錄即可

32

課堂練習

z程式功能

z至課程網頁中下載 ch1a 範例程式檔案

z完成虛擬目錄設定使 ch1a 範例程式可正常 開啟

z基本概念

z設定虛擬目錄即可

33

Response 物件

z 常用屬性

z BufferOutput–設定輸出資料是否先暫存於緩衝區 z Cache–設定網頁快取功能

z Cookies–儲存 cookie 的集合

z 常用方法

z Write–將資料寫入網頁內容

z Redirect–將網頁重新導向至新的 URL z Clear–清除緩衝區資料

z Flush–將緩衝區資料傳送給使用者

34

實例探討 sample1-a2 (1)

z 程式功能

z 測試緩衝區暫存特性

z 程式內容

private void Hello() {

Response.Write("大家好!!<br>");

Response.Flush();

Response.Write("我的名字叫 Ives!!<br>");

Response.Clear();

}

35

實例探討 sample1-a2 (2)

z 程式內容

private void Page_Load(object sender, System.EventArgs e) {

Response.Write("啟用緩衝區暫存<br>");

Hello();

Response.Write("<br>停用緩衝區暫存<br>");

Response.BufferOutput = false;

Hello();

}

36

Label 控制項

zLabel 控制項主要是用來顯示靜態文字於 網頁上

z常用屬性

zText–設定要顯示的文字

zForeColor–設定文字顏色

zVisible–是否顯示控制項

37

Button 控制項

zButton 控制項提供按鈕功能 z常用屬性

zText–設定要顯示的文字 zVisible–是否顯示控制項

z常用事件

zClick–按一下時發生

38

MSDN Library

z MSDN Library 含括大量的專業程式設計資

訊，其中包含範例程式碼、技術文件、白皮書 及參考指南…

z 我們可以藉由工具列上 [說明] 中的 [內容]、

[索引]、[搜尋]，來查詢 MSDN Library，了解 欲使用的類別中擁在那些成員及各成員的用法 等資訊

z 在程式碼撰寫視窗中，將游標放於欲查詢的類 別或成員名稱上，可利用快速鍵 F1 查詢之

z 線上文件

z 英文–http://msdn.microsoft.com/library/

z 中文–http://msdn.microsoft.com/library/cht/

39

實例探討 sample1-a3

z 程式功能

z 按下按鈕後列印今日運勢

z 程式內容

private void submitBTN_Click(object sender, system.EventArgs e)

{

string[] fateStr = new string[5] {"大吉","吉","平","凶

","大凶"};

Random rnd = new Random();

fateLB.Text = fateStr[rnd.Next(0,5)];

}

40

TextBox 控制項

z TextBox 控制項用以讓使用者輸入資料 z 常用屬性

z Text–設定取得控制項中的文字 z ReadOnly–文字是否允許修改 z MaxLength–輸入文字最大寬度 z TextMode

z

z

z

z 常用事件

z TextChanged–當輸入文字變更時發生

41

課堂練習 sample1-b2

z程式功能

z簡易登入系統 z輸入帳號及密碼

z正確將頁面導向歡迎網頁

z錯誤停留於原網頁並將輸入資料清除

z基本概念

z建立二個網頁，利用判斷式判斷輸入資料是 否正確

z利用 Response.Redirect導向歡迎網頁

z將控制項屬性值設為空白以清除輸入資料

42

網頁間的資料傳遞

z伺服器在處理使用者的要求時，並不會 記錄任何的資訊，因此我們無法得知使 用者在上一個網頁所輸入過的資料及進 行過的動作

z我們可以藉由以下方法，主動記錄所需 要的資料

zURL 參數傳遞 zCookie

zSession

43

Request 物件

z Request 物件為 HttpRequest 類別物件 z 常用屬性

z Cookies–取得 cookie 的集合

z Form–取行前一網頁以 post 方式傳送資料的 集合

z QueryString–取得前一網頁以 get 方式傳送 資料的集合

z QueryString 用法

z 記錄資料︰Response.Redirect("abc.aspx?name=ives") z 取得資料︰Request.QueryString["name"]

44

實例探討 sample1-a4 (1)

z 程式功能

z 猜謎語

z 程式內容–WebForm1.aspx

private void rightBTN_Click(object sender, System.EventArgs e)

{

Response.Redirect("WebForm2.aspx?ans=yes");

}

private void wrongBTN_Click(object sender, System.EventArgs e)

{

Response.Redirect("WebForm2.aspx?ans=no");

}

45

實例探討 sample1-a4 (2)

z程式內容–WebForm2.aspx

private void Page_Load(object sender, System.EventArgs e)

{

if(Request.QueryString["ans"]=="yes") Response.Write("好聰明!!答對了!!");

else

Response.Write("真失敗!!答錯了!!");

}

46

課堂練習 sample1-b3

z程式功能

z簡易登入系統 z輸入帳號及密碼

z正確將頁面導向歡迎網頁

z在歡迎頁面列印出使用者的帳號及歡迎訊息

z基本概念

z請利用 Request.QueryString 來完成

47

Page 類別

z 常用屬性

z IsPostBack–判斷是否為網頁回傳資料或是 第一次被載入

z Session–存取 session 的集合

z 常用事件

z Load–當網頁第一次被載入或重新整理時，

觸發該事件

z IsPostBack 用法

z if(!IsPostBack) {

...

}

48

Cookie 基本概念

z當使用者向伺服器發出要求時，會將儲 存於電腦中的 Cookie 一起傳送至伺服器 z當伺服器產生網頁後，會將 Cookie 等資

訊回傳給使用者，儲存於使用者電腦中

Request

Response Cookie

Cookie Cookie

49

Cookie 使用方式

z 我們可以利用 Request 物件來取得使用者所傳送過來的 Cookie 內容

z 伺服器可藉由 Response 物件來將 Cookie 儲存至使用者 電腦當中

z 讀取 Cookie

z

Request.Cookies[ "Cookie 名稱" ].Value

z 儲存 Cookie

z

Response.Cookies[ "Cookie 名稱" ].Value

z

Response.Cookies ["Cookie 名稱" ].Expires

–如︰DateTime.MaxValue; DateTime.Now.AddMonths(2);

(刪 Cookie 可將有效時間設定為 DateTime.Now)

50

實例探討 sample1-a5 (1)

z 程式功能

z 記錄使用者瀏覽網頁次數

z 程式內容

private void Page_Load(object sender, System.EventArgs e) {

if(Request.Cookies["count"]==null) {

Response.Cookies["count"].Value = "0";

}

51

實例探討 sample1-a5 (2)

z 程式內容

else {

Response.Cookies["count"].Value =

(int.Parse(Request.Cookies["count"].Value)+1).ToString();

}

Response.Cookies["count"].Expires = DateTime.MaxValue;

Response.Write("歡迎光臨!! 您是第 ");

Response.Write(Response.Cookies["count"].Value);

Response.Write(" 次參觀本站!!");

}

52

課堂練習 sample1-b4

z 程式功能

z 簡易登入系統

z 當使用者登入成功時，記錄使用者帳號

z 當該使用者再次瀏覽網頁時，將該使用者帳號名填 入帳號欄位

z 基本概念

z 當登入成功時，利用 Cookie 來記錄帳號名稱 z 在網頁載入時，檢查 Cookie 是否存在

z 利用 IsPostBack 判斷是否為第一次載入

53

Session 基本概念

z 當使用者連線時會給使用者一個 Session ID。

z 程式寫作人員可以把一些重要的資料如使用者 資料、權限等存於 Server 端。

z 使用者之後的 Request 都會帶著 Session ID。

z Server 則是根據這個 ID 來索引使用者的 Session。

Request 123

123

Request 123

54

Session 物件

z常用屬性

Session.SessionID

–取得用來識別 Session 的唯一 ID。

Session.Timeout

–取得和設定 Session 的有效時間 (分鐘)。

z常用方法

Session.Clear()

–清除 Session 的所有值。

Session.Add(string name, object value)

–將新項目加入 Session 當中。

55

Session 應用

z項目存取

z項目建立︰ Session.Add(string name, object value)

zSession.Add("name" , "Alice");

zSession["name"] = "Alice";

z項目存取︰ Session[string name]

zLabel1.Text = Session["name"].ToString();

56

實例探討 sample1-a6 (1)

z 程式功能

z 登入系統

z 登入成功時，在下一個網頁顯示該使用者名稱，並列印歡迎 訊息

z 程式內容–WebForm1.aspx

private void loginBTN_Click(object sender, System.EventArgs e) {

if((idTB.Text == "alice" && pwTB.Text == "alice")||(idTB.Text

== "bob" && pwTB.Text == "bob")) {

Session.Add("id",idTB.Text);

Response.Redirect("WebForm2.aspx");

} }

57

實例探討 sample1-a6 (2)

z程式內容–WebForm2.aspx

private void Page_Load(object sender, System.EventArgs e)

{

Response.Write(Session["id"].ToString());

Response.Write(" 歡迎光臨!!");

}

58

安全控管

z網址列的跳躍

z任何人皆可透過網址列輸入 WebForm2.aspx 的網頁網址，不需登入即可輕鬆進入系統。

z缺乏登出機制

z使用者若暫離座位，即使畫面在登入頁面，

一樣可以透過 Session 的存在，竊取該使用

者的機密文件。

59

課堂練習 sample1-b5

z程式功能

z預防網址列偷渡 z登出系統

z基本概念

z必須先判斷 Session 是否已經存在。存在允 許進入，不存在則自動導回登入網頁。

z登出機制的作法為設計一登出按鈕，在按鈕

按下後的事件程式中，將 Session 內的項目

資料全部清除，並且跳回登入網頁。

60

網頁快取控制 (1)

z這樣的設計安全了嗎!?

z 答案是否定的。

z網頁快取

z當我們在瀏覽網頁時，系統會自動把網頁的

內容存入快取當中。因此就算我們按登出

鍵，把 Session 項目內容皆清除乾淨，只要

瀏覽器尚未關閉，任何入皆可利用簡簡單單

的“上一頁＂鍵，取得你曾經瀏覽過的網頁

內容。

61

網頁快取控制 (2)

z語法

zResponse.Cache.SetNoStore();

z關閉網頁快取功能。

z程式修改

z當不希望網頁被快取時，可在 Page_Load 事

件程式中，加入上式語法，即可避免該網頁

被系統快取所儲存。

62

課堂練習 sample1-b6

z程式功能

z關閉網頁快取功能

z修改 sample1-b5 程式，預防 "上一頁" 偷渡 手法

z基本概念

z利用 Response.Cache.SetNoStore(); 語法關閉

網頁快取功能

63

Application 物件

z Application 物件為 HttpApplicationState 類別物 件，可用來存取全域變數值

z 每位使用者皆可擁有屬於自己的 Cookie 及 Session 物件，但 Application 物件為全部使用 者共用一份

z 在儲存 Application 狀態資料前，需將

Applicaion 狀態資料閂鎖，以避免同步問題 z 用法

z 啟動閂鎖︰Application.Lock();

z 存取資料︰Application[ "項目名稱" ];

z 停止閂鎖︰Application.UnLock();

64

實例探討 sample1-a7 (1)

z 程式功能

z 雜誌訂閱人數統計

z 程式內容

private void Page_Load(object sender, System.EventArgs e) {

count1LB.Text = initialState("item1");

count2LB.Text = initialState("item2");

}

65

實例探討 sample1-a7 (2)

z 程式內容

private string initialState(string itemName) {

if(Application[itemName] == null) {

Application.Lock();

Application[itemName] = 0;

Application.UnLock();

}

return Application[itemName].ToString();

}

66

實例探討 sample1-a7 (3)

z 程式內容

private void order1BTN_Click(object sender, System.EventArgs e)

{

count1LB.Text = updateState("item1");

}

private void order2BTN_Click(object sender, System.EventArgs e)

{

count2LB.Text = updateState("item2");

}

67

實例探討 sample1-a7 (4)

z 程式內容

private string updateState(string itemName) {

Application.Lock();

Application[itemName] =

int.Parse(Application[itemName].ToString()) + 1;

Application.UnLock();

return Application[itemName].ToString();

}

68

課堂練習 sample1-b7

z程式功能

z記錄網頁參觀人數

z在網頁中顯示該使用者為第幾位訪客

z基本概念

z利用 Application 物件來存取全域變數