• 沒有找到結果。

ASP.NET 網頁設計入門(使用 C#)

N/A
N/A
Protected

Academic year: 2022

Share "ASP.NET 網頁設計入門(使用 C#)"

Copied!
75
0
0

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

全文

(1)

ASP.NET 網頁設計入門(使用 C#)

講師︰唐士軒

CSIE NTU

(2)

.NET 專案範本

(3)

方案總管

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

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

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

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

(4)

屬性視窗

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

功能說明 圖示

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

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

物件下拉選單

(5)

控制項

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

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

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

z連續點選控制項二下

(6)

事件

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

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

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

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

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

(7)

Page 類別

z常用事件

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

觸發該事件

(8)

Response 類別

z常用方法

zWrite–將資料寫入網頁內容

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

z用法

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

zResponse.Redirect("WebForm2.aspx");

(9)

加入新網頁 (1)

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

即可加入新項目至專案中

(10)

加入新網頁 (2)

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

當中

(11)

設定起始網頁

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

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

(12)

實例探討 sample5-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");

}

(13)

實例探討 sample5-a1 (2)

z程式內容–WebForm2.aspx

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

{

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

}

(14)

Label 控制項

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

z常用屬性

zText–設定要顯示的文字

zForeColor–設定文字顏色

zVisible–是否顯示控制項

(15)

Button 控制項

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

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

z常用事件

zClick–按一下時發生

(16)

MSDN Library

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

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

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

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

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

z 線上文件

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

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

(17)

實例探討 sample5-a2

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)];

}

(18)

TextBox 控制項

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

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

zSingleLine–單行輸入 zMultiLine–多行輸入 zPassword–密碼模式

z 常用方法

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

(19)

課堂練習 sample5-b1

z程式功能

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

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

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

z基本概念

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

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

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

(20)

Session 基本概念

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

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

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

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

Request 123

123

Request 123

(21)

Session 物件

z常用屬性

Session.SessionID

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

Session.Timeout

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

z常用方法

Session.Clear()

z清除 Session 的所有值。

Session.Add(string name, object value)

z將新項目加入 Session 當中。

(22)

Session 應用

z項目存取

z項目建立︰

Session.Add(string name, object value)

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

z項目存取︰

Session[string name]

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

(23)

實例探討 sample5-a3 (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");

} }

(24)

實例探討 sample5-a3 (2)

z程式內容–WebForm2.aspx

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

{

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

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

}

(25)

安全控管

z網址列的跳躍

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

z缺乏登出機制

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

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

者的機密文件。

(26)

課堂練習 sample5-b2

z程式功能

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

z基本概念

z 在 WebForm1.aspx 及 WebForm2.aspx 網頁當中,我 們必須先判斷 Session 是否已經存在(判斷是否為 null)。存在則允許進入,不存在則自動導回

login.aspx 登入網頁。

z 登出機制的作法為設計一登出按鈕,在按鈕按下後 的事件程式中,將 Session 內的項目資料全部清

(27)

網頁快取控制 (1)

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

z 答案是否定的。

z網頁快取

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

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

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

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

的“上一頁"鍵,取得你曾經瀏覽過的網頁

內容。

(28)

網頁快取控制 (2)

z語法

z

Response.CacheControl = "no-cache";

z關閉網頁快取功能。

z程式修改

z每一個不希望被快取的網頁當中,在

Page_Load 事件程式中,加入上式語法,即

可避免該網頁被系統快取所儲存。

(29)

課堂練習 sample5-b3

z程式功能

z關閉網頁快取功能

z修改 sample5-b2 程式,預防 "上一頁" 偷渡 手法

z基本概念

z利用 Response.CacheControl = “no-cache";

語法關閉網頁快取功能

(30)

新增虛擬目錄 (1)

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

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

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

Services]

(31)

新增虛擬目錄 (2)

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

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

新增虛擬目錄

(32)

新增虛擬目錄 (3)

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

(33)

新增虛擬目錄 (4)

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

z http://localhost/ASPNET/

(34)

新增虛擬目錄 (5)

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

(35)

新增虛擬目錄 (6)

z最後設定存取權限

(36)

新增虛擬目錄 (7)

z完成新增虛擬目錄動作

(37)

建立虛擬目錄 (1)

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

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

驟完成

(38)

建立虛擬目錄 (2)

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

右鍵並選擇 [內容]

(39)

建立虛擬目錄 (3)

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

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

(40)

執行範例檔 (1)

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

z實例

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

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

(41)

執行範例檔 (2)

z建立虛擬目錄

z別名設定為 sample

(42)

執行範例檔 (3)

z建立虛擬目錄

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

(43)

執行範例檔 (3)

z完成虛擬目錄設定

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

sample

(44)

執行範例檔 (4)

z修改專案資訊檔 (.csproj.webinfo)

z修改檔案中 Web URLPath 的路徑

(45)

執行範例檔 (5)

z修改方案檔 (.sln)

z若該範例檔沒有建立方案檔則不需修改

(46)

執行範例檔 (6)

z執行範例檔

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

z其它方式

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

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

虛擬目錄即可

(47)

LinkButton 控制項

zLinkButton 的外觀上為一個超連結,實 值上的功能和 Button 控制項一模一樣 z常用屬性

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

z常用事件

zClick–按一下時發生

(48)

HyperLink 控制項

z HyperLink 控制項可用來建立文字或圖片超連結 z 常用屬性

z Text–設定要顯示的文字

z ImageUrl–設定要顯示的圖片(較高優先權) z NavigateUrl–設定要連結的網頁

z Target–設定連結網頁顯示位置

z_blank–網頁顯示於無框架的新視窗中

z_parent–網頁顯示於包含作用的 frameset 標記框架中 z_search–網頁顯示於搜尋視窗

z_self–網頁顯示於超連結所在框架中

(49)

實例探討 sample5-a4

z程式功能

z簡易超連結

z程式內容–WebForm1.aspx

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

{

yahooHL.NavigateUrl = "http://tw.yahoo.com";

yahooHL.Target = "_blank";

}

(50)

Image 控制項

zImage 控制項主要用來顯示圖片 z常用屬性

zImageUrl–設定要顯示的圖片

zAlternateText–無法顯示圖片時的替代文字

(51)

ImageButton 控制項

zImageButton 控制項使用圖片作為外觀顯示,

其於功能與 Button 控制項非常相像 z常用屬性

zImageUrl–設定要顯示的圖片

zAlternateText–無法顯示圖片時的替代文字

z常用事件

zClick–按一下時發生

(事件處理程式的第二個參數為滑鼠指標按下時

的座標位置,因此可作為影像地圖使用)

(52)

實例探討 sample5-a5 (1)

z程式功能

z影像地圖

z利用 onmouseover 與 onmouseout 改變圖片

z程式內容–WebForm1.aspx

<asp:ImageButton

onmouseover="this.src='carLogo.jpg' "

onmouseout="this.src='carText.jpg' " …

(53)

實例探討 sample5-a5 (2)

z程式內容–WebForm1.aspx

private void carIB_Click(object sender,

System.Web.UI.ImageClickEventArgs e) {

if(e.X<=100)

textLB.Text = "原來您喜歡BMW!!";

else

textLB.Text = "原來您喜歡BENZ!!";

}

(54)

課堂練習 sample5-b4

z程式功能

z圖型式密碼輸入

z基本概念

z可先將使用者按下的數字存於 Label 中,並 將 Label 的 Visible 屬性設定為 false

z可先將使用者按下的數字儲存於 Session 當

(55)

DropDownList 控制項

z DropDownList 控制項提供下拉式選單功能 z 常用屬性

z Items–設定下拉式選單內容

(items 為 ListItemCollection 類別物件) (選單項目為 ListItem 類別物件)

z AutoPostBack–設定選取項目變更時是否通知伺服器

z 常用事件

z SelectedIndexChanged–當選取項目變更時發生 (需將 AutoPostBack 屬性設定為 true)

(56)

ListItemCollection 類別

z DropDownList 的 items屬性為

ListItemCollection 類別物件 (為一集合)

z 可直接透過索引取得集合中指定物件 z ex︰DropDownList1.Items[1]

z 常用屬性

z Count–取得集合中 ListItem 物件的數目 z SelectedItem–取得選取項目物件

z SelectedIndex–取得選取項目物件索引值

z 常用方法

z Add–新增項目至集合中 (ListItem、string) z Clear–清除所有項目

z Remove–移除指定項目 (ListItem、string)

(57)

ListItem 類別

zListItemCollection 類別物件為一集合,集 合中每一元素為 ListItem 類別物件

z常用屬性

zText–設定項目顯示文字

zValue–設定項目對應的關聯值

zSelected–項目是否已被選取

(58)

實例探討 sample5-a6 (1)

z程式功能

z藝人簡介

z程式內容–WebForm1.aspx

struct star {

public string name;

public string country;

public string imgUrl;

}

(59)

實例探討 sample5-a6 (2)

z 程式內容–WebForm1.aspx

star[] myStar = new star[3];

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

myStar[0].name = "S.H.E";

myStar[0].country = "台灣";

myStar[0].imgUrl = "she.jpg";

myStar[1].name = "宋惠喬";

myStar[1].country = "韓國";

myStar[1].imgUrl = "宋惠喬.jpg";

(60)

實例探討 sample5-a6 (3)

z 程式內容–WebForm1.aspx

myStar[2].name = "孫燕姿";

myStar[2].country = "新加坡";

myStar[2].imgUrl = "孫燕姿.jpg";

if(!IsPostBack) {

foreach(star starItem in myStar)

starDDL.Items.Add(starItem.name);

starDDL.AutoPostBack = true;

changeInfo();

}

(61)

實例探討 sample5-a6 (4)

z 程式內容–WebForm1.aspx

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

{

changeInfo();

}

private void changeInfo() {

nameLB.Text = myStar[starDDL.SelectedIndex].name;

countryLB.Text = myStar[starDDL.SelectedIndex].country;

pictureImg.ImageUrl = myStar[starDDL.SelectedIndex].imgUrl;

}

(62)

ListBox 控制項

zListBox 控制項與 DropDownList 控制項 相似,提供清單方塊功能

z常用屬性

zItems–設定清單內容

(同為 ListItemCollection 類別物件) zSelectionMode–設定選取模式

zSingle–單選 zMultiple–多選

(多選情況可利用迴圈檢查每一項目的 Selected 屬性是否為 true,以判斷已被選取項目)

(63)

實例探討 sample5-a7 (1)

z 程式功能

z 購物清單

z 程式內容–WebForm1.aspx

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

{

shoppingLB.Items.Add(itemLB.SelectedItem);

itemLB.Items.Remove(itemLB.SelectedItem);

shoppingLB.SelectedIndex = -1;

totalLB.Text = total().ToString();

}

(64)

實例探討 sample5-a7 (2)

z 程式內容–WebForm1.aspx

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

{

itemLB.Items.Add(shoppingLB.SelectedItem);

shoppingLB.Items.Remove(shoppingLB.SelectedItem);

itemLB.SelectedIndex = -1;

totalLB.Text = total().ToString();

}

(65)

實例探討 sample5-a7 (3)

z 程式內容–WebForm1.aspx

private int total() {

int sum = 0;

foreach(ListItem item in shoppingLB.Items) {

sum += int.Parse(item.Value);

}

return sum;

}

(66)

課堂練習 sample5-b5 (1)

z程式功能

z書藉分類清單

z根據使用者所選擇的下拉式選單項目,改變 書藉清單內容

台式料理 日式料理

韓式料理 食譜

資料庫程式 設計

十天學會 JAVA C# 程式設

計入門 電腦

倚天屠龍記 神鵰俠侶

射鵰英雄傳 小說

(67)

課堂練習 sample5-b5 (2)

z基本概念

z在下拉式選單中的 SelectedIndexChanged 事 件中修改 ListBox 清單內容

z需將下拉式選單的 AutoPostBack 屬性設定

為 true

(68)

CheckBox 控制項

zCheckBox 控制項提供核對方塊功能 z常用屬性

zText–設定標題文字

zTextAlign–設定標題文字顯示位置 zChecked–核對方塊是否已被勾選

z常用事件

zCheckedChanged–當勾選狀態改變時發生

(需將 AutoPostBack 屬性設定為 true)

(69)

CheckBoxList 控制項

z CheckBoxList 控制項提供多重選取核對方塊群 組

z 常用屬性

z Items–設定清單內容

(同為 ListItemCollection 類別物件) z RepeatColumns–設定資料欄位數

z RepeatDirection–設定配置方向順序

z 常用事件

z SelectedIndexChanged–當選取項目變更時發生 (需將 AutoPostBack 屬性設定為 true)

(70)

RadioButton 控制項

zRadioButton 控制項提供單選選項按鈕功 能

z常用屬性

zText–設定標題文字

zTextAlign–設定標題文字顯示位置 zChecked–核對方塊是否已被勾選 zGroupName–設定所屬群組

z常用事件

zCheckedChanged–當勾選狀態改變時發生

(71)

RadioButtonList 控制項

z RadioButton 控制項可用來建立單選選項按鈕群 組

z 常用屬性

z Items–設定清單內容

(同為 ListItemCollection 類別物件) z RepeatColumns–設定資料欄位數

z RepeatDirection–設定配置方向順序

z 常用事件

z SelectedIndexChanged–當選取項目變更時發生 (需將 AutoPostBack 屬性設定為 true)

(72)

實例探討 sample5-a8 (1)

z 程式功能

z 會員資料輸入

z 程式內容–WebForm1.aspx

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

{

Session.Add("name",nameTB.Text);

Session.Add("sex",sex1RB.Checked?"先生":"小姐");

Session.Add("education",

educationRBL.SelectedItem.Text);

(73)

實例探討 sample5-a8 (2)

z 程式內容–WebForm1.aspx

string hobby = "";

foreach(ListItem item in hobbyCBL.Items) if(item.Selected) hobby+= item.Text +" ";

if(hobby == "") hobby = "無";

Session.Add("hobby", hobby);

Response.Redirect("WebForm2.aspx");

}

(74)

實例探討 sample5-a8 (3)

z 程式內容–WebForm2.aspx

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

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

Response.Write(Session["sex"].ToString() + "您好!!<br>");

Response.Write("您的學歷為

"+Session["education"].ToString() + "<br>");

Response.Write("您的興趣為

"+Session["hobby"].ToString());

}

(75)

課堂練習 sample5-b6

z程式功能

z電腦採購

z基本概念

z可將選項價格儲存於 ListItem 的 Value 屬性

參考文獻

相關文件

- strengthening students’ ability to integrate and apply knowledge and skills (including skills related to hands-on experiences) within and across the KLAs of Science, Technology

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

private void closeBTN_Click(object sender, System.EventArgs

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

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

private void answerLB Click(object sender private void answerLB_Click(object sender,. System.EventArgs

(Web Form、Web Service Mobile Form) Windows Form ADO.NET、XML. Base Class

Briefing of the home assignment (Designing a plan for e-assessment) Ø  Participants have to complete the assignment before attending Session 2 Ø  File name: