動態網頁程式 設計實習 1042 數位教材 單元 9:ASP.NET物件及表單

Slides:



Advertisements
Similar presentations
第一單元 建立java 程式.
Advertisements

本章要点: 掌握HttpRequest对象的应用。 掌握HttpResponse对象的应用。
Introduction to ASP.NET
第7章 JSP的表單處理與Cookie 7-1 JSP狀態管理的基礎 7-2 URL參數傳遞 7-3 HTML表單欄位處理
Task #3 使用ASP.NET服务器控件创建页面.
第13章 FTP檔案上傳、 自動傳送 報告人 M9153314 李育旻.
《ASP.NET数据库网站设计教程(C#版)》
第6章 HTML控件和Web服务器控件 本章讲述的主要内容 6.1 ASP.NET控件概述 6.2 标准服务器端控件 6.3 数据验证控件
《计算机网络技术》 asp.net 程序设计 文本类控件 笪静.
5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
Ch03 VB.NET語法建立ASP.NET 網頁程式設計.
《ASP.NET数据库网站设计教程(C#版)》
Ch08 ASP.NET的HTTP物件 網頁程式設計.
《ASP.NET数据库网站设计教程(C#版)》
第 4 章 資料輸入表單與 Request物件 製作.
第四章 網頁表單與資料傳遞.
Chapter 4 基本伺服器控制項.
Ch06 建立WEB表單 網頁程式設計.
ASP.NET 網頁製作教本 – 從基本語法學起
Chapter 5 進階伺服器控制項.
表單處理及URL參數傳遞.
Ch07 表單欄位驗證控制項 網頁程式設計.
Ch11 檔案上傳及電子郵件 WEB程式設計.
ASP.NET 網頁製作教本 – 從基本語法學起
9/28號專題報告 Web網頁遊戲 曾建瑋.
在 Web 应用中,导航是非常重要的。ASP
客戶端的檔案上傳 HtmlInputFile檔案控制項 上傳單一檔案 同時上傳多個檔案.
ASP.NET 網頁製作教本 – 從基本語法學起
Controls.
ASP.NET 網頁製作教本 – 從基本語法學起
SQL Stored Procedure SQL 預存程序.
R教學 安裝RStudio 羅琪老師.
WEB伺服器控制項.
第11章 ASP.NET的Web應用程式 11-1 ASP.NET應用程式的基礎 11-2 Global.asax檔的使用
第5章 Web表單程式設計模型 5-1 Web表單程式設計模型 5-2 ASP.NET的Page物件
ASP动态网页设计实用教程 主讲教师: 开课单位:.
網頁切換移轉 JS vs. ASP.NET.
ASP.NET 網頁製作教本 – 從基本語法學起
Ch10 網頁間的資料分享: Application Session 與Cookies的處理
第4章 使用验证控件.
主 讲 教 师:陆有军 Web技术与应用 第四章 内部对象 主 讲 教 师:陆有军
第4章 視窗應用程式的基本輸出入.
系統設定 IE8相容性檢視
Ch04 表單 網頁程式設計.
第3章 ASP.NET程序设计基础 3.
網頁切換移轉 JS vs. ASP.NET.
表單(Form).
第一單元 建立java 程式.
VS.NET 2003 IDE.
第10章 Web應用程式的資料分享 10-1 Web應用程式的基礎 10-2 設定ASP.NET的Web應用程式 10-3 網頁間的資料分享
第4章 ASP.NET的HTTP物件、輸出入與Cookie處理
Ch20. 計算器 (Mac 版本).
第18章 個人入口網站的建立 18-1入口網站的基礎 18-2 建立網站的搜尋引擎 18-3 網頁組件的個人化功能
表單(Form).
網頁程式概論 建國科技大學資管系 饒瑞佶 2015/9 V1 2016/4 V2 2016/9 V3.
表格(HTML – FORM).
1 Session对象的特性 Session 状态对象 Session 对象常用的方法有: Session 对象常用的属性有:
Google協作平台+檔案分享(FileZilla+網路芳鄰)
第4章 ASP.NET服务器控件.
GUI Title and GUI Status
Controls.
第6章 資料驗證、HTTP物件與錯誤處理 6-1 資料驗證的基礎 6-2 基本驗證控制項 6-3 進階驗證控制項
VS.NET 2003 IDE.
向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。
表格(HTML – FORM)
國立台灣大學 關懷弱勢族群電腦課程 By 資訊工程 黃振修
String類別 在C語言中提供兩種支援字串的方式 可以使用傳統以null結尾的字元陣列 使用string類別
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
InputStreamReader Console Scanner
Presentation transcript:

動態網頁程式 設計實習 1042 數位教材 單元 9:ASP.NET物件及表單 主講老師:徐培倫

ASP.NET 物件說明 Server物件 Response物件 Request物件 Web表單欄位 伺服端的驗證控制項 作業15 單元 9 ASP.NET 物件說明 Server物件 Response物件 Request物件 Web表單欄位 伺服端的驗證控制項 作業15

ASP.NET 物件說明 Response物件:即HttpResponse類別,可以輸出網頁內容的標籤或處理Cookies,然後送到瀏覽程式顯示,或是控制網頁轉址,從一頁網頁轉址至其他網頁。 Request物件:即HttpRequest類別,可以讀取表單欄位送出的資料或URL參數、Cookies和取得伺服器的變數。 Server物件:即HttpServerUtility類別,可以建立COM物件、執行其他ASP.NET程式和HTML和處理URL編碼。

ASP.NET 物件說明 Application物件:即HttpApplicationState類別,瀏覽網站的所有使用者都可以透過此物件取得一些共享資料。例如:網站的訪客計數。 Session物件:即System.Web.SessionState名稱空間的HttpSessionState類別,對於瀏覽網站的每位使用者,可以使用此物件保留使用者的專屬資料。例如:使用者登入網站的使用者名稱(Username)和密碼(Password)。

Server物件的屬性 Server物件的屬性可以取得Web伺服器名稱,和設定或取得逾時時間,其相關屬性如下表所示:

Server物件的方法 Server.MapPath()方法可以將伺服器的虛擬路徑,轉換為實際硬碟的檔案路徑。 Server.CreateObject()方法可以在伺服端建立COM元件。 Server.Transfer()方法的轉址操作完全在Web伺服器完成,並不會浪費頻寬,其使用方式和Response.Redirct()幾乎相同 Server.Execute()方法有些像在主程式呼叫副程式,當轉址ASP.NET程式執行完成後,還會回到呼叫轉址的ASP.NET程式。

Server物件的方法 Server.HtmlEncode()方法可以將指定字串使用HTML編碼方式進行編碼,然後配合Server.HtmlDecode()方法進行解碼 Server.UrlEncode()方法可以將指定字串使用URL編碼方式來進行編碼,如果URL參數需要傳遞特殊符號。

Response物件 Response.Write()方法可以將任何資料型態的資料,輸出到瀏覽程式顯示,換句話說,就是輸出成HTML標籤 Response.Redirect()方法可以將網頁轉址到其他的URL網址或網頁 我們可以指定資料型態,即ContentType屬性:Response.ContentType = "image/gif" 程式碼指定網頁內容是GIF圖檔。

Request物件 HTML網頁表單如果是使用post方法傳遞資料,其作法是將傳遞資料在編碼後,透過HTTP通訊協定標頭傳送到Web伺服器,在伺服端是使用Form集合物件來取出資料,其語法如下所示: Request(("FieldName") Request.Form("FieldName") Request物件可以使用Form屬性取得Form集合物件,或不指定屬性,在括號內的參數是欄位名稱字串,可以取得指定表單欄位值的字串。

Web表單程式設計模型 ASP.NET的Web表單可以建立跨平台和跨瀏覽程式Web應用程式的輸入介面,其使用的技術如同在VB、JBuilder等視覺化開發工具建立Windows應用程式的「GUI」(Graphics UserInterface)介面。 Web表單程式設計模型是一種事件驅動程式設計模型(Event-driven Programming Model),使用伺服端控制項建立Web表單的使用介面。當產生事件時,ASP.NET程式可以建立對應的事件處理程序來處理事件。

Web表單程式設計模型 <%@ Page Language="VB" %> <!-- 事件處理程序 --> <script Runat="server"> Sub button1_Click(Sender As Object, E As Eventargs) label1.Text = "按下Button控制項<br>" End Sub </script> <!-- Web表單 --> <html> <head Runat="server"><title>web.aspx</title></head> <body> <form Id="form1" Runat="server"> <asp:Button Id="button1" Text="按下按鈕" OnClick="button1_Click" Runat="Server"/><br> <asp:Label Id="label1" Runat="server"/> </form> </body> </html>

Web表單程式設計模型 Web Form範本程式架構,架構主要分成兩個部分,如下所示: 第一部分:<script>標籤的事件處理程序或函數。 第二部分:<form Runat="server">標籤建立Web表單,內含Form表單標籤和伺服端控制項(Server Controls)。

Web表單程式設計模型 在ASP.NET 2.0版的<head>標籤,可以改為<head Runat="server">的HtmlHead控制項物件,如下所示: <head Runat="server"> …… </head> Head標頭標籤可以建立HtmlHead物件,我們可以使用ASP.NET程式來指定HtmlTitle物件的標題文字(即<title>標籤)和CSS樣式,如下所示: Page.Header.Title = “web.aspx" 程式碼使用Title屬性指定頁面的標題文字。

Web表單程式設計模型 Web表單的伺服端控制項是置於<form Runat="server">的HTML控制項之間,它就是HtmlForm控制項物件,如下所示: <form Runat="server"> ……… </form> Web表單和HTML表單差異只在Runat屬性,此屬性將HTML表單轉換成ASP.NET的Web表單。

ASP.NET的Web表單處理 ASP.NET的Web表單是結合HTML、程式碼和伺服端控制項,一種完全在Web伺服器執行的表單,如下圖所示:

Web表單欄位的輸入控制項 ASP.NET的輸入控制項 TextBox文字控制項 CheckBox核取方塊控制項 RadioButton選擇鈕控制項 DropDownList下拉式選單控制項 ListBox清單方塊控制項 CheckBoxList核取方塊清單控制項 RadioButtonList選擇鈕清單控制項

ASP.NET的輸入控制項 HTML控制項是對應System.Web.UI.HtmlControls名稱空間的物件,這些控制項都直接對應到HTML標籤,如下所示: <input Type="text" Id="Name" Size ="20" Runat="server"> 上述標籤和HTML標籤並沒有什麼不同,其差異只在新增Runat和Id兩個屬性,如下表所示:

Web控制項的輸入控制項 Web控制項中關於表單資料輸入欄位部分的控制項,如下表所示:

TextBox文字控制項-標籤 TextBox文字控制項相當於是HTML表單標籤的文字方塊、密碼欄和文字區域,使用TextMode屬性值來區分不同的功能,如下所示: <asp:TextBox Id="name" Width="200px" Runat="server"/> <asp:TextBox Id="pass" Width="200px" TextMode="Password" Runat="server"/> <asp:TextBox Id="address" Width="200px" TextMode="Multiline" Rows="3" Runat="server"/> 標籤建立3個TextBox控制項,使用TextMode屬性指定欄位種類是密碼欄位(Password)或文字區域(Multiline),沒有指定就是文字方塊。

TextBox文字控制項-屬性

TextBox文字控制項-取得欄位值 Sub button_Click(Sender As Object, _ E As Eventargs) ' 顯示欄位值 Lname.Text = "姓名: " & name.Text Lpass.Text = "密碼: " & pass.Text Ladds.Text = "地址: " & address.Text End Sub

Textbox.aspx 範例結果

CheckBox核取方塊控制項 CheckBox核取方塊控制項對應HTML表單標籤的核取方塊,這是一個複選題,可以建立一組切換開關,如下所示: <asp:CheckBox Id="Tel" Text="使用電話" Runat="server"/> 標籤建立一個名為Tel的CheckBox控制項。

CheckBox核取方塊控制項-屬性

CheckBox核取方塊控制項 CheckBox控制項的處理是使用If條件來檢查Checked屬性,就可以知道是否勾選核取方塊,如下所示: If Tel.Checked Then str &= "使用電話來確認<br>" End If

CheckBox.aspx 範例結果

RadioButton選擇鈕控制項 RadioButton選擇鈕控制項對應HTML表單標籤的選擇鈕,這是一個單選題,提供一組選項,但是只能選擇其中之一,如下所示: <asp:RadioButton Id="Tele" Text="劃撥" GroupName="Payment" Runat="server"/> 標籤建立一個名為Tele的RadioButton控制項,GroupName屬性表示它是屬於名為Payment的一組選項之一。

RadioButton選擇鈕控制項 RadioButton控制項只需使用If/Then/ElseIf多條件來檢查Checked屬性,就可以知道使用者選取的選擇鈕,如下所示: If Card.Checked Then show.Text = Card.Text & "<br>" Else If Tele.Checked Then show.Text = Tele.Text & "<br>" Else If Cash.Checked Then show.Text = Cash.Text & "<br>" End If

RadioButton.aspx 範例結果

DropDownList下拉式選單控制項 在Web控制項的ListControl類別有四種選擇功能的控制項物件: DropDownList控制項。 ListBox控制項。 CheckBoxList控制項。 RadioButtonList控制項。

DropDownList下拉式選單控制項 選擇功能的控制項是繼承自ListControl類別,所以可以使用ListControl類別的屬性,如下表所示:

DropDownList下拉式選單控制項 DropDownList下拉式選單控制項是一個單選題,相當於HTML表單標籤的下拉式清單方塊,如下所示: <asp:DropDownList Id="Ship" Width="100px" Runat="server"> <asp:ListItem Text="郵寄" Value="Mail"/> <asp:ListItem Text="快遞" Value="UPS"/> <asp:ListItem Text="自取" Value="Self"/> </asp:DropDownList>

DropDownList下拉式選單控制項 DropDownList控制項建立選單顯示的選項和其他選擇功能控制項相同,都是使用ListItem控制項。每一個ListItem控制項是一個選項,其相關屬性,如下表所示:

DropDownList下拉式選單控制項 DropDownList控制項是使用繼承自ListControl類別的SelectedItem屬性取得ListItem物件,然後使用Text和Value屬性取得選項名稱和值,如下所示: Ship.SelectedItem.Text Ship.SelectedItem.Value

DropDownList.aspx 範例結果

ListBox清單方塊控制項 ListBox清單方塊控制項也是一種選擇題,相當於HTML表單標籤的清單方塊,可以設定單選或複選,如下所示 <asp:ListBox Id="Gift" SelectionMode="Multiple" Runat="server"> <asp:ListItem Text="滑鼠" Value="1" Selected="True"/> <asp:ListItem Text="鍵盤" Value="2"/> <asp:ListItem Text="喇叭" Value="3"/> <asp:ListItem Text="麥克風" Value="4"/> </asp:ListBox>

ListBox清單方塊控制項-屬性

ListBox清單方塊控制項 對於單選的ListBox控制項,取得選取選項的方式和DropDownList控制項相同。 以此例為複選,所以需要使用For/Next迴路來取得使用者選取的所有選項,如下所示: For i = 0 to Gift.Items.Count-1 If Gift.Items(i).Selected Then str = str & Gift.Items(i).Text & "<br>" End If Next

ListBox.aspx 範例結果

CheckBoxList核取方塊清單控制項 CheckBoxList核取方塊清單控制項相當於是一組CheckBox控制項,這是複選的控制項,簡單的說,它可以讓我們輕鬆編排多個CheckBox控制項,如下所示: <asp:CheckBoxList Id="Gift“ RepeatDirection="Horizontal“ Runat="server"> <asp:ListItem Text="滑鼠" Value="1" Selected="True"/> <asp:ListItem Text="鍵盤" Value="2"/> <asp:ListItem Text="喇叭" Value="3"/> <asp:ListItem Text="麥克風" Value="4"/> </asp:CheckBoxList>

CheckBoxList核取方塊清單控制項

CheckBoxList.aspx 範例結果 CheckBoxList控制項取得選項方式和複選的ListBox控制項相同。

RadioButtonList選擇鈕清單控制項 RadioButtonList選擇鈕清單控制項是一組RadioButton控制項,這是一個單選的控制項,簡單的說,它可以讓我們輕鬆編排多個RadioButton控制項,如下所示: <asp:RadioButtonList Id="Payment" RepeatDirection="Horizontal" Runat="server"> <asp:ListItem Text="信用卡" Value="1"/> <asp:ListItem Text="劃撥" Value="2" Selected="True"/> <asp:ListItem Text="到貨付款" Value="3"/> </asp:RadioButtonList>

RadioButtonList.aspx 範例結果 RadioButtonList控制項取得選項方式和DropDownList控制項相同。

伺服端的驗證控制項 RequiredFieldValidator驗證控制項 CompareValidator驗證控制項 RangeValidator驗證控制項

RequiredFieldValidator驗證控制項 <asp:RequiredFieldValidator Id="validName" ControlToValidate="name" ErrorMessage="請輸入名稱!" Runat="server"/> 標籤建立名為validName的RequiredFieldValidator控制項,ControlToValidate屬性指出需要驗證的控制項名稱,ErrorMessage屬性是驗證錯誤時顯示的訊息。

RequiredFieldValidator驗證控制項 InitialValue屬性是用來指定驗證欄位不能輸入的值,如下所示: <asp:RequiredFieldValidator Id="validPass" ControlToValidate="pass" InitialValue="1234" ErrorMessage="請輸入密碼!" Runat="server"/> 驗證控制項要求控制項pass輸入資料不可以是【1234】,此時,如果沒有輸入密碼反而可以通過驗證。

CompareValidator驗證控制項 <asp:CompareValidator Id="validComp" ControlToValidate="pass" ControlToCompare="pass1" Type="String" Display="Dynamic" ErrorMessage="輸入密碼不相同!" Runat="server"/> 標籤建立名為validComp的CompareValidator控制項,此驗證控制項是比較控制項pass和pass1的值是否相等(預設是Equal比較),比較值的資料型態是String字串。

CompareValidator驗證控制項-屬性

CompareValidator-比較運算子

RangeValidator驗證控制項-標籤 <asp:RangeValidator Id="validRange" ControlToValidate="age" Display="Dynamic" Type="Integer" MinimumValue="21" MaximumValue="80" ErrorMessage="年齡範圍21~80!" Runat="server"/> 驗證控制項檢查控制項age值是否大於等於MinimumValue屬性的21且小於等於MaximumValue屬性的80,比較值的資料型態是Integer整數。

RangeValidator驗證控制項-屬性

作業 15:題目 修改 ex15.aspx(左) 完成 ex15a.aspx(右)

ex15.aspx 範例

ex15.aspx 範例

ex15.aspx 範例

作業 15: ex15a.aspx

作業 15: ex15a.aspx

作業 15: ex15a.aspx

作業15 完成檔 ex15a.aspx 為作業15的完成檔, 畫面如下: