投影片 1

Size: px

Start display at page:

Download "投影片 1"

坡暑郎
6 years ago
Views:

1 1 ASP.NET 互動式網頁程式設計 ( 使用 C#) CSIE NTU

2 LinkButton 控制項 2 LinkButton 的外觀上為一個超連結, 實值上的功能和 Button 控制項一模一樣常用屬性 Text 設定要顯示的文字 Visible 是否顯示控制項常用事件 Click 按一下時發生

3 HyperLink 控制項 3 HyperLink 控制項可用來建立文字或圖片超連結常用屬性 Text 設定要顯示的文字 ImageUrl 設定要顯示的圖片 ( 較高優先權 ) NavigateUrl 設定要連結的網頁 Target 設定連結網頁顯示位置 _blank 網頁顯示於無框架的新視窗中 _parent 網頁顯示於包含作用的 frameset 標記框架中 _search 網頁顯示於搜尋視窗 _self 網頁顯示於超連結所在框架中 _top 網頁顯示於無框架的完整視窗中

4 實例探討 sample2-a1 4 程式功能簡易超連結程式內容 protected void Page_Load(object sender, System.EventArgs e) { yahoohl.navigateurl = " yahoohl.target = "_blank"; }

5 Image 控制項 5 Image 控制項主要用來顯示圖片常用屬性 ImageUrl 設定要顯示的圖片 AlternateText 無法顯示圖片時的替代文字圖片大小顯示設定固定大小..設定 Height 及 Width 屬性原始大小.. Height 及 Width 屬性設為空白

6 課堂練習 sample2-b1 6 程式功能圖片瀏覽提供三個按鈕, 按下後分別顯示不同的圖片基本概念利用 ImageUrl 屬性來更改 Image 控制項顯示的圖片

7 ImageButton 控制項 7 ImageButton 控制項使用圖片作為外觀顯示, 其於功能與 Button 控制項非常相像常用屬性 ImageUrl 設定要顯示的圖片 AlternateText 無法顯示圖片時的替代文字常用事件 Click 按一下時發生 ( 事件處理程式的第二個參數為滑鼠指標按下時的座標位置, 因此可作為影像地圖使用 )

8 實例探討 sample2-a2 (1) 8 程式功能影像地圖利用 onmouseover 與 onmouseout 改變圖片程式內容 HTML 模式部份 <asp:imagebutton onmouseover="this.src='carlogo.jpg' " onmouseout="this.src='cartext.jpg' "

9 實例探討 sample2-a2 (2) 9 程式內容 WebForm1.aspx protected void carib_click(object sender, System.Web.UI.ImageClickEventArgs e) { if(e.x<=100) textlb.text = " 原來您喜歡 BMW!!"; else textlb.text = " 原來您喜歡 BENZ!!"; }

10 課堂練習 sample2-b2 10 程式功能圖型式密碼輸入基本概念可先將使用者按下的數字存於 Label 中, 並將 Label 的 Visible 屬性設定為 false 可先將使用者按下的數字儲存於 Cookie 或 Session 當中

11 DropDownList 控制項 11 DropDownList 控制項提供下拉式選單功能常用屬性 Items 設定下拉式選單內容 (items 為 ListItemCollection 類別物件 ) ( 選單項目為 ListItem 類別物件 ) AutoPostBack 設定選取項目變更時是否通知伺服器常用事件 SelectedIndexChanged 當選取項目變更時發生 ( 需將 AutoPostBack 屬性設定為 true)

12 ListItemCollection 類別 12 DropDownList 的 items 屬性為 ListItemCollection 類別物件 ( 為一集合 ) 可直接透過索引取得集合中指定物件 ex.. DropDownList1.Items[1] 常用屬性 Count 取得集合中 ListItem 物件的數目 SelectedItem 取得選取項目物件 SelectedIndex 取得選取項目物件索引值常用方法 Add 新增項目至集合中 (ListItem string) Clear 清除所有項目 Remove 移除指定項目 (ListItem string) RemoveAt 移除指定索引項目 (int)

13 ListItem 類別 13 ListItemCollection 類別物件為一集合, 集合中每一元素為 ListItem 類別物件常用屬性 Text 設定項目顯示文字 Value 設定項目對應的關聯值 Selected 項目是否已被選取

14 實例探討 sample2-a3 (1) 14 程式功能藝人簡介由下拉式選單選擇程式內容 struct star { public string name; public string country; public string imgurl; }

15 實例探討 sample2-a3 (2) 15 程式內容 star[] mystar = new star[3]; protected 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";

16 實例探討 sample2-a3 (3) 16 程式內容 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(); }

17 實例探討 sample2-a3 (4) 17 程式內容 protected void starddl_selectedindexchanged(object sender, System.EventArgs e) { changeinfo(); } protected void changeinfo() { namelb.text = mystar[starddl.selectedindex].name; countrylb.text = mystar[starddl.selectedindex].country; pictureimg.imageurl = mystar[starddl.selectedindex].imgurl; }

18 ListBox 控制項 18 ListBox 控制項與 DropDownList 控制項相似, 提供清單方塊功能常用屬性 Items 設定清單內容 ( 同為 ListItemCollection 類別物件 ) SelectionMode 設定選取模式 Single 單選 Multiple 多選 ( 多選情況可利用迴圈檢查每一項目的 Selected 屬性是否為 true, 以判斷已被選取項目 )

19 實例探討 sample2-a4 (1) 19 程式功能購物清單程式內容 protected 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(); }

20 實例探討 sample2-a4 (2) 20 程式內容 protected 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();

21 實例探討 sample2-a4 (3) 21 程式內容 protected int total() { int sum = 0; foreach(listitem item in shoppinglb.items) { sum += int.parse(item.value); } return sum; }

22 課堂練習 sample2-b3 22 程式功能書藉分類清單根據使用者所選擇的下拉式選單項目, 改變書藉清單內容小說射鵰英雄傳神鵰俠侶倚天屠龍記電腦 C# 程式設計入門十天學會 JAVA 資料庫程式設計食譜韓式料理日式料理台式料理

23 CheckBox 控制項 23 CheckBox 控制項提供核對方塊功能常用屬性 Text 設定標題文字 TextAlign 設定標題文字顯示位置 Checked 核對方塊是否已被勾選常用事件 CheckedChanged 當勾選狀態改變時發生 ( 需將 AutoPostBack 屬性設定為 true)

24 CheckBoxList 控制項 24 CheckBoxList 控制項提供多重選取核對方塊群組常用屬性 Items 設定清單內容 ( 同為 ListItemCollection 類別物件 ) RepeatColumns 設定資料欄位數 RepeatDirection 設定配置方向順序常用事件 SelectedIndexChanged 當選取項目變更時發生 ( 需將 AutoPostBack 屬性設定為 true)

25 RadioButton 控制項 25 RadioButton 控制項提供單選選項按鈕功能常用屬性 Text 設定標題文字 TextAlign 設定標題文字顯示位置 Checked 核對方塊是否已被勾選 GroupName 設定所屬群組常用事件 CheckedChanged 當勾選狀態改變時發生 ( 需將 AutoPostBack 屬性設定為 true)

26 RadioButtonList 控制項 26 RadioButton 控制項可用來建立單選選項按鈕群組常用屬性 Items 設定清單內容 ( 同為 ListItemCollection 類別物件 ) RepeatColumns 設定資料欄位數 RepeatDirection 設定配置方向順序常用事件 SelectedIndexChanged 當選取項目變更時發生 ( 需將 AutoPostBack 屬性設定為 true)

27 實例探討 sample2-a5 (1) 27 程式功能會員資料輸入程式內容 WebForm1.aspx protected void submitbtn_click(object sender, System.EventArgs e) { Session.Add("name",nameTB.Text); Session.Add("sex",sex1RB.Checked?" 先生 ":" 小姐 "); Session.Add("education", educationrbl.selecteditem.text);

28 實例探討 sample2-a5 (2) 28 程式內容 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");

29 實例探討 sample2-a5 (3) 29 程式內容 WebForm2.aspx protected 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());

30 課堂練習 sample2-b4 30 程式功能電腦採購單選項目 : CPU 和記憶體複選項目 : 螢幕鍵盤滑鼠基本概念可將選項價格儲存於 ListItem 的 Value 屬性中

31 Access 資料庫 (1) 31 建立資料庫選擇 [ 檔案 ] 中的 [ 開新檔案 ] 會跳出開新檔案視窗, 在視窗新增部份選取 [ 空白資料庫 ] 設定完檔案儲存位置後會跳出下圖視窗

32 Access 資料庫 (2) 32 建立資料表選擇資料庫視窗中的 [ 使用設計檢視建立資料表 ]

33 Access 資料庫 (3) 33 儲存資料表當關閉資料表視窗時, 系統即會詢問是否要儲存資料表等資訊資料表操作開啟輸入資料設計檢視修改資料表欄位設定

34 ADO.NET 34 ADO.NET 為.NET Framework 所提供的類別, 專門用來存取資料儲存體中的資料資料儲存體包含資料庫或非資料庫型式的儲存體 Ex.. MSSQL Access Excel XML ADO.NET 採用中斷連線的方式, 減低系統工作負載

35 .NET 資料提供者 35.NET 資料提供者為存取資料來源的一組類別.NET Data Provider SQL.NET Data Provider 命名空間.. System.Data.SqlClient 可用資料庫.. MS-SQL OLE DB.NET Data Provider 命名空間.. System.Data.OleDb 可用資料庫.. Dbase FoxPro Excel Access Oracle Access ODBC.NET Data Provider 需至微軟網站另外下載可用資料庫.. MySQL

36 AccessDataSource 物件 36 AccessDataSource 物件為連接資料庫其他控制項的橋梁常用方法 Select 由資料庫中選取資料 Update 更新資料庫的內容

37 利用 AccessDataSource 建立連線 (1) 37 設定資料來源

38 利用 AccessDataSource 建立連線 (2) 38 先將 Access 資料庫加入至方案中選取要使用的資料庫

39 利用 AccessDataSource 建立連線 (3) 39 選擇自訂 SQL 陳述式

40 利用 AccessDataSource 建立連線 (4) 40 使用查詢產生器, 可自動生成 SQL 陳述式

41 利用 AccessDataSource 建立連線 (5) 41 勾選設定欲查詢的欄位, 按下確定後即可產生對應的 SQL 語法

42 利用 AccessDataSource 建立連線 (6) 42 設定完成可使用測試查詢檢驗結果是否正確

43 GridView 控制項 43 GridView 控制項以表格方式顯示資料, 適用於表現資料庫內容常用屬性 DataSource 設定資料來源的控制項 AutoGenerateColumns 自動產生資料欄位 Columns 設定欲包含的欄位常用方法 DataBind 進行資料繫結動作

44 實例探討 sample2-a6 44 程式功能將資料庫內容顯示於 GridView 控制項中程式內容建立 AccessDataSource 控制項建立 GridView 控制項, 並連結到 AssessDataSource protected void Page_Load(object sender, EventArgs e) { bookgv.datasource = bookds; bookgv.databind(); }

45 課堂練習 sample2-b5 45 資料庫內容建立一會員帳號資料表包含帳號及密碼二個欄位程式功能將資料庫內容顯示於 GridView 控制項中基本概念利用 AccessDataSource 建立所需連線

46 資料行類型 46 繫結資料行顯示資料來源指定的欄位按鈕資料行建立可處理該筆資料的按鈕超連結資料行將資料行內容以超連結顯示樣板資料行可利用其它控制項來自訂顯示配置樣式

47 繫結資料行 47 繫結資料行可用來顯示資料來源指定繫結欄位的資料內容 DataField 欄位指定繫結資料來源的欄位名稱

48 選取按鈕資料行 48 按鈕資料行包含選取按鈕編輯更新取消按鈕及刪除按鈕選取按鈕文字選取按鈕上欲顯示的文字 ( 全一致 ) 文字欄位選取按鈕上欲顯示的資料內容 ( 繫結 ) 用法可透過 SelectedIndexChanged 事件捕捉使用者選取狀況可利用 SelectedRow 屬性取得被選取的資料列

49 GridView 儲存格資料 49 欲取得 GridView 某一儲存格資料, 可藉由 Rows 屬性中的 Cells 屬性來達成 Rows 屬性儲存 GridView 資料列的集合 Cells 屬性儲存資料列的儲存格的集合用法取得控制項中第一列第三欄儲存格的資料 GridView1.Rows [0].Cells[2].Text;

50 實例探討 sample2-a7 50 程式功能將購物資訊顯示於 GridView 控制項中計算總消費金額程式內容 protected void Page_Load(object sender, System.EventArgs e) { int total = 0; foreach (GridViewRow Rows in GridView1.Rows) total += int.parse(rows.cells[1].text); totallb.text = total.tostring(); }

51 課堂練習 sample2-b6 51 資料庫內容建立一學生成績資料表包含姓名國文英文及數學四個欄位程式功能計算全班成績總平均設計選取欄位可供選取列出被選取學生各科成績總分及平均等資料預設選取第一位學生基本概念利用選取資料行來顯示特定學生資料需將 AutoGenerateColumns 設定為 false

52 超連結資料行 52 超連結資料行能將資料行中各項內容以超連結顯示 HeaderText 欲顯示的欄位標題 NavigateURL 繫結超連結目標 DataNavigateUrlFields -- 聯繫至超連結的欄位 DataNavigateUrlFormatString 可透過此屬性傳遞網址列參數用法若將 DataNavigateUrlFormatString 設定為 WebForm2.aspx?filename={0}, 則 DataNavigateUrlFields 的資料會被填入 {0} 位置

53 實例探討 sample2-a8 53 程式功能我的最愛程式內容資料庫中包含兩個欄位 : 站名和網址利用超連結資料資料行顯示網址

54 課堂練習 sample2-b7 54 資料庫內容建立一藝人簡介資料表包含姓名國藉及圖片三個欄位程式功能加入一超連結資料行點選超連結導至 WebForm2.aspx 網頁, 並於該網頁顯示所點選的藝人照片以網址列傳送圖片檔案名稱基本概念設定 URL 格式字串, 使 URL 欄位資料能以網址列參數型式傳送

55 按鈕資料行 55 按鈕資料行提供自訂按鈕功能文字欲顯示的文字 ( 全一致 ) 文字欄位欲顯示的資料內容 ( 繫結 ) 命令名稱執行的命令 (CommandName) 用法當按鈕資料行中的按鈕被點選時, 會引發 RowCommand 事件 RowCommand 事件會將選取到的資料列傳入事件參數 e 當中在一個 GridView 控制項中可包含多個按鈕資料行, 可藉由命令名稱來判斷出被點選到的按鈕設定成按鈕外觀時, 需將 EnableViewState 設為 false

56 實例探討 sample2-a9 56 程式功能購物網站程式內容用 ListBox 當作購物清單將選擇的項目加入購物清單 protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { int ind = int.parse(e.commandargument.tostring()); shoppinglb.items.add(gridview1.rows[ind].cells[0].text); }

57 課堂練習 sample2-b8 57 資料庫內容建立一商品資訊資料表包含項目及金額二個欄位程式功能修改 sample2-a9 多加入取消按鈕計算總購買金額基本概念利用 CommandName 來區分被點選的按鈕可藉由 Items 屬性中的 FindByText 等方法檢查是否含有該欲刪除項目

58 分頁 58 GridView 控制項允許我們在資料筆數過多時, 能利用分頁檢視方式來顯示資料利用屬性產生器或屬性視窗將允許分頁 (AllowPaging) 屬性設定為 true 頁面大小 (PageSize) 可設定每頁資料筆數設定 GridView 中的 PageIndex 屬性, 可跳至指定分頁

59 課堂練習 sample2-b9 59 資料庫內容建立一學號資料表包含學號及姓名二個欄位填入十筆學生資料程式功能利用分頁方式檢視資料每一分頁顯示四位學生資料基本概念利用 PageIndexChanged 事件參數來設定 GridView 控制項的 PageIndex 屬性

untitled

untitled 1 LinkButton LinkButton 連 Button Text Visible Click HyperLink HyperLink 來立連 Text ImageUrl ( ) NavigateUrl 連 Target 連 _blank _parent frameset _search _self 連 _top 例 sample2-a1 易連 private void Page_Load(object