Microsoft PowerPoint - ch2.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - ch2.ppt"

畔钰岑
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 程式功能電腦採購基本概念可將選項價格儲存於 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 DataAdapter 物件 36 DataAdapter 物件為資料來源與 DataSet 之間的溝通橋樑常用方法 Fill 將資料來源資料內容填入資料集當中 Update 更新資料來源中的資料內容

37 利用 DataAdapter 建立連線 (1) 37 當我們從工具箱資料類別分類中拖拉 DataAdapter 物件時, 即會產生組態設定精靈視窗

38 利用 DataAdapter 建立連線 (2) 38 選擇新增連接來建立連線

39 利用 DataAdapter 建立連線 (3) 39 我們所採用的是 ACCESS 資料庫, 因此提供者必須選取 Microsoft Jet 4.0 OLE DB Provider

40 利用 DataAdapter 建立連線 (4) 40 在連線部份設定好資料來源檔案位置, 並測試連線是否正常

41 利用 DataAdapter 建立連線 (5) 41 連線正常後按下確定按鈕即可產生連接設定記錄

42 利用 DataAdapter 建立連線 (6) 42 設定存取方式部份選擇使用 SQL 陳述式

43 利用 DataAdapter 建立連線 (7) 43 在產生 SQL 陳述式設定中, 可點選查詢產生器來產生欲執行的 SQL 查詢語法

44 利用 DataAdapter 建立連線 (8) 44 選擇欲查詢的資料表

45 利用 DataAdapter 建立連線 (9) 45 勾選設定欲查詢的欄位, 按下確定後即可產生對應的 SQL 語法

46 利用 DataAdapter 建立連線 (10) 46 完成 DataAdapter 設定

47 利用 DataAdapter 建立連線 (11) 47 在 DataAdapter 屬性視窗中, 可建立對應的 DataSet ( 資料集 )

48 利用 DataAdapter 建立連線 (12) 48 按下確定即可產生 DataSet ( 資料集 ), 再利用 DataAdapter 中 Fill 方法即可將所設定的查詢內容填入 DataSet 當中

49 新增資料庫至方案總管打開方案總管方案上點右鍵, 選取加入現有項目選取欲使用的資料庫

50 DataGrid 控制項 (1) 50 DataGrid 控制項以表格方式顯示資料, 適用於表現資料庫內容常用屬性 DataSource 設定資料來源 AutoGenerateColumns 自動產生資料欄位 Columns 設定欲包含的欄位自動格式化內建色彩配置屬性產生器自訂各項屬性內容常用方法 DataBind 進行資料繫結動作

51 DataGrid 控制項 (2) 51 設定 DataSource 選擇資料來源 < 新資料來源 > 在設定資料來源視窗, 選擇資料庫

52 實例探討 sample2-a6 52 程式功能將資料庫內容顯示於 DataGrid 控制項中程式內容 protected void Page_Load(object sender, System.EventArgs e) { DataGrid1.DataBind(); }

53 課堂練習 sample2-b5 53 資料庫內容建立一會員帳號資料表包含帳號及密碼二個欄位程式功能將資料庫內容顯示於 DataGrid 控制項中基本概念利用 DataAdapter 建立所需連線

54 資料行類型 54 繫結資料行顯示資料來源指定的欄位按鈕資料行建立可處理該筆資料的按鈕超連結資料行將資料行內容以超連結顯樣板資料行可利用其它控制項來自訂顯示配置樣式

55 繫結資料行 55 繫結資料行可用來顯示資料來源指定繫結欄位的資料內容頁首文字 DataGrid 上所顯示的欄位名稱資料欄位指定繫結資料來源的欄位名稱

56 編輯 DataGrid 資料行點選屬性產生器點選資料行

57 選取按鈕資料行 57 按鈕資料行包含選取按鈕編輯更新取消按鈕及刪除按鈕選取按鈕文字選取按鈕上欲顯示的文字 ( 全一致 ) 文字欄位選取按鈕上欲顯示的資料內容 ( 繫結 ) 用法可透過 SelectedIndexChanged 事件捕捉使用者選取狀況可利用 SelectedItem 屬性取得被選取的資料列

58 DataGrid 儲存格資料 58 欲取得 DataGrid 某一儲存格資料, 可藉由 Items 屬性中的 Cells 屬性來達成 Items 屬性儲存 DataGrid 資料列的集合 Cells 屬性儲存資料列的儲存格的集合用法取得控制項中第一列第三欄儲存格的資料 DataGrid1.Items[1].Cells[3].Text;

59 實例探討 sample2-a7 59 程式功能將購物資訊顯示於 DataGrid 控制項中計算總消費金額程式內容 protected void Page_Load(object sender, System.EventArgs e) { DataGrid1.DataBind(); int total = 0; foreach(datagriditem item in DataGrid1.Items) total += int.parse(item.cells[1].text); totallb.text = total.tostring(); }

60 課堂練習 sample2-b6 60 資料庫內容建立一學生成績資料表包含姓名國文英文及數學四個欄位程式功能計算全班成績總平均設計選取欄位可供選取列出被選取學生各科成績總分及平均等資料預設選取第一位學生基本概念利用選取資料行來顯示特定學生資料需將 AutoGenerateColumns 設定為 false

61 超連結資料行 61 超連結資料行能將資料行中各項內容以超連結顯示文字欲顯示的文字 ( 全一致 ) 文字欄位欲顯示的資料內容 ( 繫結 ) 目標網頁開啟位置 URL 欄位繫結超連結目標 URL 格式字串可透過此屬性傳遞網址列參數用法若將 URL 格式設定為 WebForm2.aspx?filename={0}, 則 URL 欄位資料會填入 {0} 位置

62 實例探討 sample2-a8 62 程式功能我的最愛程式內容 protected void Page_Load(object sender, System.EventArgs e) { oledbdataadapter1.fill(dataset11); favoritedg.databind(); }

63 課堂練習 sample2-b7 63 資料庫內容建立一藝人簡介資料表包含姓名國藉及圖片三個欄位程式功能加入一超連結資料行點選超連結導至 WebForm2.aspx 網頁, 並於該網頁顯示所點選的藝人照片以網址列傳送圖片檔案名稱基本概念設定 URL 格式字串, 使 URL 欄位資料能以網址列參數型式傳送

64 按鈕資料行 64 按鈕資料行提供自訂按鈕功能文字欲顯示的文字 ( 全一致 ) 文字欄位欲顯示的資料內容 ( 繫結 ) 命令名稱執行的命令 (CommandName) 用法當按鈕資料行中的按鈕被點選時, 會引發 ItemCommand 事件 ItemCommand 事件會將選取到的資料列傳入事件參數 e 當中在一個 DataGrid 控制項中可包含多個按鈕資料行, 可藉由命令名稱來判斷出被點選到的按鈕設定成按鈕外觀時, 需將 EnableViewState 設為 false

65 實例探討 sample2-a9 65 程式功能購物網站程式內容 protected void Page_Load(object sender, System.EventArgs e) { itemdg.databind(); } protected void itemdg_itemcommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e) { shoppinglb.items.add(e.item.cells[1].text+ " " +e.item.cells[2].text); totallb.text = (int.parse(totallb.text) + int.parse(e.item.cells[2].text)).tostring(); }

66 課堂練習 sample2-b8 66 資料庫內容建立一商品資訊資料表包含項目及金額二個欄位程式功能修改 sample2-a9 多加入移除按鈕基本概念利用 CommandName 來區分被點選的按鈕可藉由 Items 屬性中的 FindByText 等方法檢查是否含有該欲刪除項目

67 分頁 67 DataGrid 控制項允許我們在資料筆數過多時, 能利用分頁檢視方式來顯示資料利用屬性產生器或屬性視窗將允許分頁 (AllowPaging) 屬性設定為 true 頁面大小 (PageSize) 可設定每頁資料筆數利用 PageIndexChanged 事件捕捉使用者選擇其它分頁, 可從事件中物件參數 e 的 NewPageIndex 屬性得知使用者欲前往的分頁修改 DataGrid 中 CurrentPageIndex 屬性, 並重新進行繫結動作

68 課堂練習 sample2-b9 68 資料庫內容建立一學號資料表包含學號及姓名二個欄位填入十筆學生資料程式功能利用分頁方式檢視資料每一分頁顯示四位學生資料基本概念利用 PageIndexChanged 事件參數來設定 DataGrid 控制項的 CurrentPageIndex 屬性

69 伺服器總管開啟檢視其它視窗伺服器總管資料連接項目設定資料庫連線資料查詢或管理

70 建立 SQL Server 資料庫在伺服器總管視窗, 點選資料連接項目, 再按滑鼠右鍵選取建立新的 SQL Server 資料庫

$設定連線資訊伺服器名稱 : (local)\sqlexpress 登入伺服器 : 選擇$

71 設定連線資訊伺服器名稱 : (local)\sqlexpress 登入伺服器 : 選擇使用 Windows 驗證新資料庫名稱 : 輸入名稱, 例如 MyDB 按確定自動建立資料庫

72 連接到 SQL Server 資料庫開啟伺服器總管視窗在資料連結選項上按滑鼠右鍵選擇加入資料連接

73 連接到 SQL Server 資料庫在加入連接視窗, 選擇適用的資料來源預設使用 Microsoft SQL Server 按下變更按鈕, 跳出變更資料來源視窗

$設定加入連接視窗伺服器名稱 (local)\sqlexpress 登入伺服器點選使用$

74 設定加入連接視窗伺服器名稱 (local)\sqlexpress 登入伺服器點選使用 Windows 驗證資料庫選取 ADO_NET_DB 按一下測試連接測試連線是否成功按確定離開

75 修改資料連結項目進入伺服器總管視窗點選資料連結下的連接項目

76 建立資料表與查詢伺服器總管資料連結展開 ADO_NET_DB 的連接對資料表項目按右鍵加入新的資料表新增查詢

77 建立 MySQL 資料庫下載建立資料庫與資料表下載並安裝 MySQL Connector/NET MySQL Connector/ODBC

78 使用 MySQL Connector/NET 連接建立 Windows 視窗程式專案加入 MySQL.Data.dll 參考 C:\Program Files\MySQL\MySQL Connector Net 1.0.7\bin 在程式中匯入以下命名空間 : Imports MySql.Data.MySqlClient Imports System.Data

79 使用 MySQL Connector/NET 連接 Button 的 click 事件, 加入以下程式碼, 開啟資料庫連線 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim cn As MySqlConnection Dim da As MySqlDataAdapter Dim ds As New DataSet cn = New MySqlConnection("server=localhost; user id=root; password=mysql; database=mysql ") cn.open() MessageBox.Show(" 連線的狀態為 " + _ cn.state.tostring()) cn.close() End Sub

80 使用 MySQL Connector/NET 連接開始偵錯, 並按下 button 鍵

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