Microsoft PowerPoint - asp06.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - asp06.ppt"

贝榴吉
5 years ago
Views:

1 HTML 控制項資科系林偉川 ASP.NET 的表單處理表單 (Forms) 是 ASP.NET 技術主要的使用介面,ASP.NET 是使用伺服端控制項建立網頁表單, 稱為 Web 表單 (Web Forms) 2 1

2 網頁表單的用途 - 說明 ASP.NET 程式屬於伺服端技術, 客戶端網頁只是負責取得使用者輸入的資料, 資料都需要送到伺服端處理, 所以網頁表單就是 ASP.NET 程式的資料輸入介面, 如同 Windows 對話方塊, 是使用者與後端程式或資料庫系統的溝通橋樑一般 3 網頁表單的用途 4 2

3 伺服端控制項的表單處理 ASP.NET 的 Web 表單是結合 HTML 程式碼和伺服端控制項, 屬於一種完全在 Web 伺服器執行的表單, 其執行過程, 如下圖所示 : 5 伺服端控制項的表單處理 - 種類伺服端控制項是一些伺服端標籤, 在 ASP.NET 的 Web 表單提供 3 種伺服端控制項, 如下所示 : HTML 控制項 : 對應傳統 HTML 表單標籤的控制項 Web 控制項 :ASP.NET 新增的伺服端控制項, 這是一組全新標籤表單驗證控制項 : 提供表單欄位資料驗證的控制項 6 3

4 Web 表單的 Form 控制項 Web 表單的控制項是置於 <form runat="server"> 表單的 HTML 控制項之間, 如下所示 : <form runat="server"> </form> Web 表單和 HTML 表單的差異只在 runat, 這個將 HTML 表單轉換成 ASP.NET 的 Web 表單控制項 7 Web 表單的 Form 控制項 - <form runat="server"> 控制項的相關, 如下所示 : method : 表單控制項欄位值的送出方式, 預設是 POST 方法, 如果需要使用 Web 表單的顯示狀態管理, 只可以是 POST 或 GET 指定表單中資料傳輸到 WWW 伺服器的方式, 有兩種選擇 : GET: 將資料附在 URL 的位址後面當作一般的查詢文字 POST: 將資料本身當作主體來傳遞 action : 指定處理 Web 表單控制項資料的 ASP.NET 程式, 預設是自已, 如果是其它 ASP.NET 程式, 請指定其 URL 網址 8 4

5 ASP.NET 的 Page 物件 ASP.NET 的 Web 表單程式設計模型屬於事件驅動程式設計, 也就是當使用者輸入資料或按下按鈕的操作時, 就會觸發相關事件, 在程式使用事件處理程序來處理這些事件當伺服端執行和編譯 ASP.NET 程式, 每一頁 ASP.NET 程式的網頁就是一個 Page 物件, 它會觸發一系列 Page 物件的事件 9 ASP.NET 的 Page 物件 - 主要事件事件名稱 Init Load PreRender 說明初始物件和變數載入 Web 表單控制項物件, 初始控制項的在建立控制項前, 執行最後的控制項更新 10 5

6 ASP.NET 的 Page_Load 事件在 ASP.NET 程式可以撰寫事件處理程式來回應事件, 以 Page 物件來說, 最常使用的是 Load 事件的事件處理程序 Page_Load, 如下所示 : Sub Page_Load(Sender As Object, e As Eventargs) End Sub Page_Load 事件處理程序擁有 2 個參數, 如下 : Sender 參數 : 事件來源的物件, 即那一個物件觸發事件 e 參數 : 取得事件相關資料的 EventArgs 物件, 因為事件本身也是一個物件 11 HTML 控制項的基礎 HTML 控制項是一種伺服端了解的 HTML 標籤, 其語法只是擴充原來 HTML 表單的標籤, 讓它成為伺服端控制項, 以便 ASP.NET 程式碼可以存取控制項的, 以便取得使用者輸入的資料 12 6

7 HTML 控制項標籤 HTML 控制項都是.NET Framework 的物件, 這些控制項擁有對應的 HTML 標籤, 如下所示 : <input type="text" id="name" size ="20" runat="server"> runat id 說明值一定是 Server, 表示標籤是伺服端控制項, 不再是傳統 HTML 標籤值是控制項名稱, 伺服端控制項需要指定此才能存取其值, 而且整個 Page 物件中的名稱需要唯一 13 HTML 控制項標籤 HTML 控制項 HtmlForm HtmlInputText HtmlTextArea HtmlInputCheckBox HtmlSelect HTML 標籤 <form>, 在第節已經說明 <input type="text"> 和 <input type="password"> <textarea> <input type="checkbox"> <select> HtmlInputRadioButton <input type="radio"> HtmlInputHidden HtmlInputButton HtmlButton HtmlGenericControl <input type="hidden"> <input type="button"> <button>, 這是 HTML 4.0 的標籤其它標籤, 例如 :<span> <div> 等 14 7

8 存取 HTML 控制項 -InnerText 和 InnerHtml HTML 控制項可以使用 InnerText 和 InnerHtml 存取控制項的內容, 如下表所示 : InnerHTML InnerText 說明設定或取出控制項物件內的子標籤和內容, 不含標籤本身設定或取出控制項物件的文字內容在建立好 HTML 控制項後, 就可以指定標籤內容, 也就是控制項的值, 如下所示 : show1.innertext = " 顯示 InnerText 的內容 " show2.innerhtml = "<b> 顯示 InnerHTML 的內容 </b>" 15 存取 HTML 控制項 - HtmlInputButton 按鈕控制項當使用者在 Web 表單欄位輸入資料後, 需要按下按鈕送出表單, 最常使用的是 HtmlInputButton 按鈕控制項的 ServerClick 事件, 如下所示 : <input type="button" Value=" 送出 " OnServerClick="button_Click" runat="server"> button_click() 事件處理程序, 用來處理按鈕的 ServerClick 事件, 如下所示 : Sub button_click(sender As Object, e As Eventargs) show2.innerhtml = "<b> 顯示 InnerHTML 的內容 </b>" End Sub 16 8

9 資料輸入控制項 HTML 控制項依據資料輸入的方式, 其中資料輸入控制項是指使用者需要使用鍵盤輸入字串資料的相關控制項 17 文字與密碼方塊 - 語法文字方塊是表單欄位使用最頻繁的欄位, 它可以直接傳遞使用者以鍵盤輸入的資料, 例如 : 姓名地址和電話等資料密碼欄位只是輸入的資料以小圓點或星號取代, 在使用上和文字方塊並沒有什麼不同其基本語法如下所示 : <input type="text PASSWORD" id="name" Maxlength=value Size="Value" Value="String" runat="server"/> 18 9

10 文字與密碼方塊 - Maxlength Size Value 說明使用者允許輸入的最大字元個數, 預設值為 0 表示不限長度設定欄位顯示的寬度有多少字元設定欄位的預設值取得控制項值是使用 Value, 如下所示 : Name.Value 19 文字區域 - 語法文字區域和文字方塊都是讓使用者輸入資料, 只不過文字區域允許輸入一整篇的文字內容, 特別適用在地址描述或備註等文字內容的輸入其基本語法如下所示 : <textarea id="name" Rows=value Cols=value Value="String" runat="server"/> 20 10

11 文字區域 - Rows Cols Value 說明可以輸入幾列每列有幾個字欄位的預設值取得控制項值也是使用 Value, 如下所示 : Name.Value 21 隱藏欄位 - 語法隱藏欄位可以在不必使用者輸入資料的情況下, 直接傳送資料到伺服器, 通常我們使用隱藏欄位傳送表單的環境資料或是在 HTML 文件間傳遞資料, 其基本語法如下所示 : <input type="hidden" id="name" Value="String" runat="server"/> 標籤建立名為 Name 的 HtmlInputHidden 控制項,Value 是傳遞的值 22 11

12 隱藏欄位 - Value 說明控制項的值取得控制項值也是使用 Value 23 選擇控制項 HTML 控制項的選擇控制項會提供數個選項, 可以讓使用者使用鍵盤或滑鼠選取指定的選項 24 12

13 核取方塊 - 語法核取方塊如同一個開關, 可以決定是否選取或取消選取的功能, 其基本語法如下所示 : <input type="checkbox" id="name" Checked=True Value="String" runat="server"> 標籤建立名為 Name 的 HtmlInputCheckBox 控制項 25 核取方塊 - Checked Value 說明值 True 表示預設選取此核取方塊選取核取方塊控制項的值, 如果沒有選取, 這個值會被忽略掉核取方塊控制項是否選取是使用 Checked 配合 If 條件來檢查, 如下所示 : If Tel.Checked Then str &= Tel.Value & ": 使用電話來確認 <br>" End If 26 13

14 下拉式清單方塊 HTML 控制項的 <select> 標籤配合 <option> 標籤的選項, 就可以建立多選一或複選的表單欄位, 下拉式功能表一共有 2 種不同顯示方式, 以 size 值區分, 如下所示 : 下拉式功能表 : 只會顯示一個選項, 需要按右邊的鈕才可以顯示所有的選項, 如下圖所示 : 清單方塊 : 其實和下拉式功能表一樣, 只不過顯示的選項不只一個, 如下圖所示 : 27 下拉式清單方塊下拉式清單方塊標籤的基本語法, 如下所示 : <select name="name" Multiple=True Size=number> <option Value="Item_Name"> 選項名稱 </option> <option Value="Item_Name" Selected=True> 選項名稱 </option>.. </select> 標籤建立名為 Name 的下拉式清單方塊 HtmlSelect 控制項, 在 <select> 標籤內含數個 <option> 標籤的選項 28 14

15 下拉式清單方塊 - <select> 標籤的說明, 如下表所示 : Multiple Size 說明設定是否為多重選擇, 值 True 為多選, 如為多選一定是清單方塊顯示選項的數目,1 為下拉式功能表, 大於 1 為清單方塊 <option> 標籤的說明, 如下表所示 : Value Text Selected 說明選項值選項名稱值 True 表示是預選的選項 29 下拉式清單方塊如果是單選的控制項, 選取的選項只需使用 Value 取得, 如下所示 : show.innertext = Ship.Value 如果是複選的控制項, 需要使用 Items 取得選取選項的集合物件, 使用迴圈取得多個選項, 如下所示 : For i = 0 to Gift.Items.Count - 1 If Gift.Items(i).Selected Then str &= Gift.Items(i).Text & "/" & Gift.Items(i).Value & " " End If Next i 30 15

16 選擇鈕選擇鈕能夠在表單設計一系列選項, 每個選項旁有一個圓形的選項鈕, 屬於一種多選一的選擇題, 其基本語法如下所示 : <input type="radio" id="name" Name="GroupName" Checked=True Value="String" runat="server"> 31 選擇鈕 - Checked Name Value 說明值 True 表示預設選取此選擇鈕群組名稱, 相同 Name 的控制項屬於同一個群組選取選擇鈕控制項的值, 如果沒有選取, 這個值會被忽略掉控制項是否選取是使用 Checked, 如下所示 : If Card.Checked Then str &= Card.Value & "<br>" End If 32 16

17 按鈕控制項 HTML 控制項提供多種按鈕控制項, 可以使用傳統的按鈕外觀 HTML 4.0 的按鈕或是圖片作為按鈕來使用 33 HtmlButton 按鈕控制項 HtmlButton 控制項是對應 HTML 4.0 的 <button> 標籤, 不同於 <input type="button"> 標籤, 在 <button> 標籤中可以使用 HTML 標籤或其它 ASP.NET 伺服端控制項, 如下所示 : <button OnServerClick="button_Click" runat="server"> <b><i>html 4.0 按鈕 </I></b> </button> 34 17

18 HtmlButton 按鈕控制項 - 與事件 CausesValidation OnServerClick 說明檢查在按下控制項時, 是否執行驗證, 預設值 True 為是,False 為否, 需要配合第 8 章的驗證控制項來使用指定事件處理程序 35 影像按鈕影像按鈕和 HtmlInputButton 按鈕擁有相同的功能, 其基本語法如下所示 <input type="image" id="name" Src="sample.jpg" Border="number" Alt="String" OnServerClick="button_Click" runat="server"> 標籤建立名為 Name 的 HtmlInputImage 控制項, 使用 OnServerClick 指定事件處理程序 36 18

19 影像按鈕 - Src Border Alt 說明指定圖片的 URL 網址指定圖片的框線, 以像素為單位在沒有影像或尚未下載完成時, 指定瀏覽程式顯示的替代文字 37 19

Microsoft PowerPoint - P766Ch09.ppt

Microsoft PowerPoint - P766Ch09.ppt PHP5&MySQL 程式設計第 9 章在網頁之間傳遞資訊 9-1 蒐集網頁上的資訊 9-1-1 建立表單一決定要蒐集的資訊二建立表單三撰寫表單處理程式單行文字方塊多行文字方塊選擇鈕核取方塊下拉式功能表按鈕密碼欄位 ... 標籤 ACCEPT-CHARSET="... CHARSET="... ACCEPT="... ACTION="URL URL"