• 沒有找到結果。

ASP.NET 網頁程式設計 (使

N/A
N/A
Protected

Academic year: 2022

Share "ASP.NET 網頁程式設計 (使"

Copied!
68
0
0

加載中.... (立即查看全文)

全文

(1)

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

CSIE NTU

1

(2)

開啟ASP.NET 專案(1)

2

(3)

開啟ASP.NET 專案(2)

3

(4)

檔案介紹

副檔案 說明

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

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

cs 儲存程式碼相關資訊

aspx 儲存網頁表單相關資料

4

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

(5)

方案總管

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

圖示 功能說明

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

重新整理 複製專案 顯示所有檔案 打開屬性視窗

5

(6)

加入新網頁 (1)

6

在方案總管中的專案名稱上按下右鍵,即可加

入新項目至專案中

(7)

加入新網頁 (2)

7

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

(8)

設定起始網頁

8

在方案總管中點選 aspx 網頁檔案右鍵,即可

將該網頁設定為起始網頁

(9)

控制項

9

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

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

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

連續點選控制項二下

(10)

屬性視窗

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

圖示 功能說明

物件下拉選單

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

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

10

(11)

事件

11

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

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

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

在事件視窗中,點選事件名稱二下,即可跳

至程式碼編輯視窗該事件內的程式區塊

(12)

常用事件

12

Page 類別事件

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

觸發該事件

控制項事件

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

(13)

資料輸出與重導網頁

13

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

Response 物件為 HttpResponse 類別物件

常用方法

Write–將資料寫入網頁內容

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

用法

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

Response.Redirect("WebForm2.aspx");

(14)

實例探討 sample1-a1 (1)

14

程式功能

將網頁重導至 WebForm2.aspx

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

程式內容–WebForm1.aspx

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

{

Response.Redirect("WebForm2.aspx");

}

(15)

實例探討 sample1-a1 (2)

15

程式內容–WebForm2.aspx

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

{

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

}

(16)

課堂練習 sample1-b1

16

程式功能

在網頁中列印 "大家好"

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

基本概念

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

可產生換行效果

(17)

新增虛擬目錄 (1)

17

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

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

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

Services]

(18)

新增虛擬目錄 (2)

18

在 Internet Information Services 視窗中,逐一展

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

新增虛擬目錄

(19)

新增虛擬目錄 (3)

19

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

(20)

新增虛擬目錄 (4)

20

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

http://localhost/ASPNET/

(21)

新增虛擬目錄 (5)

21

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

(22)

新增虛擬目錄 (6)

22

最後設定存取權限

(23)

新增虛擬目錄 (7)

23

完成新增虛擬目錄動作

(24)

建立虛擬目錄 (1)

24

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

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

驟完成

(25)

建立虛擬目錄 (2)

25

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

選擇 [內容]

(26)

建立虛擬目錄 (3)

26

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

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

(27)

課堂練習

27

程式功能

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

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

基本概念

設定虛擬目錄即可

(28)

執行範例檔 (1)

28

設定虛擬目錄,以執行範例檔 sample1-a1

步驟

目前檔案存放位置為 D:\sample1-a1

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

(29)

執行範例檔 (2)

29

建立虛擬目錄

別名設定為 sample

(30)

執行範例檔 (3)

30

建立虛擬目錄

目錄設定為 D:\sample1-a1

(31)

執行範例檔 (3)

31

完成虛擬目錄設定

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

(32)

執行範例檔 (4)

32

執行範例檔

啟動 Internet Explorer

http://localhost/sample/WebForm1.aspx

結果

(33)

Response 物件

33

常用屬性

BufferOutput–設定輸出資料是否先暫存於緩衝區

Cache–設定網頁快取功能

Cookies–儲存 cookie 的集合

常用方法

Write–將資料寫入網頁內容

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

Clear–清除緩衝區資料

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

(34)

實例探討 sample1-a2 (1)

34

程式功能

測試緩衝區暫存特性

程式內容

private void Hello() {

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

Response.Flush();

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

Response.Clear();

}

(35)

實例探討 sample1-a2 (2)

35

程式內容

protected void Page_Load(object sender, EventArgs e) {

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

Hello();

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

Response.BufferOutput = false;

Hello();

}

(36)

Label 控制項

36

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

常用屬性

Text–設定要顯示的文字

ForeColor–設定文字顏色

Visible–是否顯示控制項

(37)

Button 控制項

37

Button 控制項提供按鈕功能

常用屬性

Text–設定要顯示的文字

Visible–是否顯示控制項

常用事件

Click–按一下時發生

(38)

MSDN Library

38

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

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

我們可以藉由工具列上 [說明] 中的 [內容]、[索 引]、[搜尋],來查詢 MSDN Library,了解欲使 用的類別中擁在那些成員及各成員的用法等資 訊

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

線上文件

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

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

(39)

實例探討 sample1-a3

39

程式功能

按下按鈕後列印今日運勢

程式內容

private void submitBTN_Click(object sender, EventArgs e) {

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

"};

Random rnd = new Random();

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

}

(40)

TextBox 控制項

40

TextBox 控制項用以讓使用者輸入資料

常用屬性

Text–設定取得控制項中的文字

ReadOnly–文字是否允許修改

MaxLength–輸入文字最大寬度

TextMode

SingleLine–單行輸入

MultiLine–多行輸入

Password–密碼模式

常用事件

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

(41)

課堂練習 sample1-b2

41

程式功能

簡易登入系統

輸入帳號及密碼

正確將頁面導向歡迎網頁

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

基本概念

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

利用 Response.Redirect導向歡迎網頁

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

(42)

網頁間的資料傳遞

42

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

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

URL 參數傳遞

Cookie

Session

(43)

Request 物件

43

Request 物件為 HttpRequest 類別物件

常用屬性

Cookies–取得 cookie 的集合

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

集合

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

QueryString 用法

記錄資料︰Response.Redirect("abc.aspx?name=ives")

取得資料︰Request.QueryString["name"]

(44)

實例探討 sample1-a4 (1)

44

程式功能

猜謎語

程式內容–WebForm1.aspx

private void rightBTN_Click(object sender, EventArgs e) {

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

}

private void wrongBTN_Click(object sender, EventArgs e) {

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

}

(45)

實例探討 sample1-a4 (2)

45

程式內容–WebForm2.aspx

private void Page_Load(object sender, EventArgs e) {

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

else

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

}

(46)

課堂練習 sample1-b3

46

程式功能

簡易登入系統

輸入帳號及密碼

正確將頁面導向歡迎網頁

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

基本概念

請利用 Request.QueryString 來完成

(47)

Page 類別

47

常用屬性

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

Session–存取 session 的集合

常用事件

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

觸發該事件

IsPostBack 用法

if(!IsPostBack) {

...

}

(48)

Cookie 基本概念

48

當使用者向伺服器發出要求時,會將儲存於 電腦中的 Cookie 一起傳送至伺服器

當伺服器產生網頁後,會將 Cookie 等資訊回 傳給使用者,儲存於使用者電腦中

Request

Response Cookie

Cookie Cookie

(49)

Cookie 使用方式

49

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

Cookie 內容

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

讀取 Cookie

Request.Cookies[ "Cookie 名稱" ].Value –取得使用者所傳送的 Cookie 內容

儲存 Cookie

Response.Cookies[ "Cookie 名稱" ].Value –將 Cookie 內容傳送給使用者

Response.Cookies ["Cookie 名稱" ].Expires –設定 Cookie 有效時間

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

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

(50)

實例探討 sample1-a5 (1)

50

程式功能

記錄使用者瀏覽網頁次數

程式內容

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

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

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

}

(51)

實例探討 sample1-a5 (2)

51

程式內容

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

52

程式功能

簡易登入系統

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

當該使用者再次瀏覽網頁時,將該使用者帳號名填入帳

號欄位

基本概念

當登入成功時,利用 Cookie 來記錄帳號名稱

在網頁載入時,檢查 Cookie 是否存在

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

(53)

Session 基本概念

53

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

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

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

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

Request 123

123

Request 123

(54)

Session 物件

54

常用屬性

Session.SessionID

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

Session.Timeout

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

常用方法

Session.Clear()

–清除 Session 的所有值。

Session.Add(string name, object value)

–將新項目加入 Session 當中。

(55)

Session 應用

55

項目存取

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

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

Session["name"] = "Alice";

項目存取︰ Session[string name]

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

(56)

實例探討 sample1-a6 (1)

56

程式功能

登入系統

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

程式內容–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)

57

程式內容–WebForm2.aspx

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

{

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

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

}

(58)

安全控管

58

網址列的跳躍

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

缺乏登出機制

使用者若暫離座位,即使畫面在登入頁面,一樣可

以透過 Session 的存在,竊取該使用者的機密文件。

(59)

課堂練習 sample1-b5

59

程式功能

預防網址列偷渡

登出系統

基本概念

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

登出機制的作法為設計一登出按鈕,在按鈕按下

後的事件程式中,將 Session 內的項目資料全部

清除,並且跳回登入網頁。

(60)

網頁快取控制 (1)

60

這樣的設計安全了嗎!?

答案是否定的。

網頁快取

當我們在瀏覽網頁時,系統會自動把網頁的內容存

入快取當中。因此就算我們按登出鍵,把 Session

項目內容皆清除乾淨,只要瀏覽器尚未關閉,任何

入皆可利用簡簡單單的“上一頁”鍵,取得你曾經

瀏覽過的網頁內容。

(61)

網頁快取控制 (2)

61

語法

Response.Cache.SetNoStore();

關閉網頁快取功能。

程式修改

當不希望網頁被快取時,可在 Page_Load 事件程式

中,加入上式語法,即可避免該網頁被系統快取所

儲存。

(62)

課堂練習 sample1-b6

62

程式功能

關閉網頁快取功能

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

基本概念

利用 Response.Cache.SetNoStore(); 語法關閉網頁快

取功能

(63)

Application 物件

63

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

每位使用者皆可擁有屬於自己的 Cookie 及

Session 物件,但 Application 物件為全部使用者 共用一份

在儲存 Application 狀態資料前,需將

Applicaion 狀態資料閂鎖,以避免同步問題

用法

啟動閂鎖︰Application.Lock();

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

停止閂鎖︰Application.UnLock();

(64)

實例探討 sample1-a7 (1)

64

程式功能

雜誌訂閱人數統計

程式內容

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

count1LB.Text = initialState("item1");

count2LB.Text = initialState("item2");

}

(65)

實例探討 sample1-a7 (2)

65

程式內容

private string initialState(string itemName) {

if(Application[itemName] == null) {

Application.Lock();

Application[itemName] = 0;

Application.UnLock();

}

return Application[itemName].ToString();

}

(66)

實例探討 sample1-a7 (3)

66

程式內容

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)

67

程式內容

private string updateState(string itemName) {

Application.Lock();

Application[itemName] =

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

Application.UnLock();

return Application[itemName].ToString();

}

(68)

課堂練習 sample1-b7

68

程式功能

記錄網頁參觀人數

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

基本概念

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

參考文獻

相關文件

例如 : http ( 網頁伺服器所用的協定 ) 定義了 client 如何向 server request 網頁及 server 如何 將網頁及其中的各種內容回傳給 client 。. 提供服務給 application layer

z請利用 struct 記錄 Bob 和 Alice 的相關資訊 z列印出 Bob 及 Alice 分別花多少錢. z再列印出

 下載 Visual Web Developer 2008 Express Edition.

private void closeBTN_Click(object sender, System.EventArgs

Session.Add(string name, object value) z將新項目加入 Session 當中。..

zCount 屬性–取得項目個數 zAdd 方法–新增項目. zRemove 方法–移除指定項目

z屬性 (property) z方法 (method) z事件

利用 BeautifulSoup 將網頁資料以 html.parser 儲存 (