Transcript ASP.Net
HTML伺服器控制項
HTML伺服器控制項
ASP為嵌入式語言(分成Server與Client端)
畫面HTML碼 + ASP程式碼 (Code Inline)
ASP.NET
• HTML伺服器控制項：變化HTML碼而來
• WEB伺服器控制項：全新的東西 (建議使用)
• HTML控制項的功能都可以由WEB控制項完成
ASP.NET將HTML與程式碼都變成Server
端的元件
HTML伺服器控制項
HTML碼(attribute)元件化(property)
變成可以在Server上進行設計
HTML轉換成HTML伺服器控制項的方法：
加入屬性runat=“server”
加入ID
<input type=“text” name=“my_name”>
<input type=“text” id=“T1” runat=“server”>
HTML伺服器控制項
HTML伺服器控制項
如果要用這種方式執行，請務必將黃字這
行刪除
傳統HTML碼
HTML伺服器控制項
將HTML碼改成HTML控制項
HTML伺服器控制項
多了id與runat=“server”
HTML伺服器控制項
現在是HTML控制項了
變成是Server端運作的物件
HTML伺服器控制項
這時候檢視程式碼將進入WebForm1.aspx.vb
不再是HTML碼了
HTML伺服器控制項
展開後可以見到TEXT1物件
HTML伺服器控制項
比較一下如果要出現上圖的畫面
HTML碼與HTML伺服器控制項有何不同
經過HTML伺服器控制項後的原始碼
經過HTML伺服器控制項後的原始碼
HTML控制項
當ASP.NET網頁執行時，會先由編譯器檢查標籤有無
runat="server"屬性設定，如果標籤沒有設定這個屬性，那麼該標
籤就會被視為HTML文件內容。若標籤中有設定runat="server"屬
性，則會依照該標籤所對應的類別產生物件，所以ASP.NET物件的產
生是由runat="server"屬性設定所決定的。當程式在執行時解析到
有指定runat="server"屬性的標籤時，會將該類別從.NET
Framework基底類別庫實作到記憶體中並等待程式的執行。等到程
式執行完畢後再將HTML控制項的執行結果轉換成HTML標籤，然後
送到字串流等待傳送至客戶端瀏覽器進行解譯。
HTML控制項與HTML標籤對應
HTML標籤的runat="server"屬性時，
所對應的HTML控制項：
對應的HTML控制項
HTML標籤
<a>
HtmlAnchor
<input>
HtmlInputButton，HtmlInputCheckBox，
HtmlInputRadioButton，HtmlInputFile，
HtmlInputHidden，HtmlInputImage，
HtmlInputText
<form>
HtmlForm
<img>
HtmlImage
<table>
HtmlTable
<tr>
HtmlTableRow
<td>
HtmlTableCell
<select>
HtmlSelect
HTML伺服器控制項-按鈕
HTML伺服器控制項-按鈕
HTML伺服器控制項-按鈕
DIV1.InnerHtml = "按鈕被按下去了"
HTML伺服器控制項-按鈕
innerHTML與innerText
innerHTML：可以執行HTML標籤功能
innerText：文字方式呈現字串
DIV1.innerHTML=“<B>按鈕被按下</B>”
會呈現出黑體字
DIV1.innerText=“<B>按鈕被按下</B>”
原封不動呈現<B>按鈕被按下</B>
HTML控制項常用屬性
Disabled屬性
此屬性稱為取消作用。取消作用就是將一個物
件的功能關閉，讓物件暫時無法執行工作。所
以如果將物件的Disabled屬性設為True時，
該物件會顯示為灰色並且停止工作；然而若將
Disabled屬性設回False，該控制項即可正常
工作。
Visible屬性
Visible屬性可以讓一個物件隱藏起來讓使用
者看不到。
HTML控制項常用屬性
Disabled屬性範例：
<html>
<button id="Button1" runat="server">Disable狀態</button><p>
<button id="Button2" runat="server">Enable狀態</button>
<script language="VB" runat="Server">
Private Sub Page_Load(sender As Object, e As EventArgs)
Button1.Disabled=True
End Sub
</script>
</html>
HTML控制項常用屬性
Visible屬性：
<html>
<a id="Anchor1" runat="server" href="http://127.0.0.1">出現的Anchor控制項</a>
<form runat="server">
<button id="Button1" runat="server" OnServerClick="Button1_Click">Click!!
</button>
</form>
<script language="VB" runat="server">
Private Sub Page_Load(sender As Object, e As EventArgs)
Anchor1.Visible=False
End Sub
Private Sub Button1_Click(sender as Object, e As EventArgs)
Anchor1.Visible=True
End Sub
</script>
</html>
HTML控制項常用屬性
程式執行結果：
按鈕按下後：
HTML控制項常用屬性
Attributes屬性
有兩個方法可以指定物件的屬性，第一種是我
們前面常用的物件.屬性，而另外一種就是物
件.Attributes("屬性名稱")。
<html>
<a id="Anchor1" runat="server">按這裡</a>
<script language="VB" runat="server">
Private Sub Page_Load(sender As Object, e As EventArgs)
Anchor1.Attributes("href")="http://msdn.microsoft.com"
End Sub
</script>
</html>
基礎HTML控制項
HtmlButton控制項
• OnServerClick事件
• <Button>控制項
• OnServerClick="Button1_Click"
• <form runat="server"></form>
<button
id="被程式碼所控制的名稱"
runat="Server"
OnServerClick="事件程序名">
按鈕上的文字、圖形或控制項
</button>
基礎HTML控制項
Button1開始時並沒有顯示任何文字，但是當按下
Button1時因為觸發了Button1_Click事件，使得
Button1內的文字、背景色都發生了變化：
<html>
<form runat="server">
<button id="Button1" runat="server"
OnServerClick="Button1_Click">請按這裡</button>
</form>
<script language="VB" runat="server">
Private Sub Button1_Click(sender As object, e As EventArgs)
Button1.Style("Background-color")="Blue"
Button1.Style("Color")="Yellow"
Button1.InnerText="按鈕一"
End Sub
</script>
</html>
HTML控制項常用屬性
指定Button1的OnClick事件來執行用戶端的
JavaScript範例：
<html>
<button id="Button1" runat="server">按這裡</button>
<button id="Button2" runat="server">關閉IE</button>
<script language="VB" runat="server">
Private Sub Page_Load(sender As Object, e As EventArgs)
Button1.Attributes("OnClick")="JavaScript:window.alert('Client端的Java
敘述');"
Button2.Attributes("OnClick")="JavaScript:window.close();"
End Sub
</script>
</html>
HTML控制項常用屬性
HTML控制項常用屬性
Style屬性
本屬性可以用來設定控制項的樣式。為了讓開發
人員可以方便的設定物件樣式。
樣 式 名 稱
說
設
明
定
值
Background-Color 背景色
RGB值或指定顏色
Color
前景色
RGB值或指定顏色
Font-Family
字型
標楷體
Font-Size
字體大小
20pt
Font-Style
斜體
Italic（斜體）或Normal（一般）
HTML控制項常用屬性
Style屬性表
樣 式 名 稱
Font-Weight
TextDecoration
說
明
設
定
粗體
Bold（粗體）或
Normal（一般）
文字效果
Underline（底線）、
Strikethrough（穿越線）、
Overline（頂線）或是
None（無）
Text-Transform 轉大小寫
Uppercase（全轉大寫）、
Lowercase（全轉小寫）、
Initial Cap（字首大寫）或是
None（無）
值
HTML控制項常用屬性
下列範例改變了Button控制項的樣式：
<html>
<button id="button1" runat="server">button按鈕</button>
<script language="VB" runat="server">
Private Sub Page_Load(sender As Object, e As EventArgs)
Button1.Style("BackGround-Color")="#FFFF00" '以RGB設定顏色
Button1.Style("Color")="Blue"
Button1.Style("Font-Family")="標楷體"
'設定字型
Button1.Style("Font-Size")="20pt"
'設定字體大小
Button1.Style("Font-Style")="Italic"
'設定為斜體字
Button1.Style("Font-Weight")="bold"
'設定為粗體字
Button1.Style("Text-Decoration")="Underline"
'設定為底線字
Button1.Style("Text-Transform")="UpperCase"
'小寫轉大寫
End Sub
</script>
</html>
基礎HTML控制項
HtmlAnchor控制項
HtmlAnchor控制項可以用來指定超連結。
<html>
<a
id="被程式碼所控制的名稱"
runat="server"
href="欲連結的URL位址"
name="書籤名稱"
OnServerClick="事件程序名"
target="要將連結開啟至哪個框架"
title="小提示">
超連結文字
</a>
</html>
基礎HTML控制項
HtmlAnchor控制項有如下的屬性：
屬 性
說
明
設
定
值
href
欲連結的WWW、E-Mail、
Ftp伺服器、Gopher伺服器、
News伺服器、
或是Telnet伺服器的位址。
URL位址
target
如果有設定網頁框架，則可
將欲開啟的連結開啟至指定
的框架
_blank（新視窗）、
_self（自己）、
_parent（父框架）及
_top（上層）
title
本屬性可以決定當滑鼠移到
連結文字上時會出現小提示
字串
name 書籤名稱
書籤名稱
基礎HTML控制項
當使用者將滑鼠移至「這是超連結」時，會應顯
示文字「小提示」；按下「這是超連結」時，會
將 網 頁 重 新 導 向 微 軟 的 網 站 ：
<html>
<a id="Anchor1" runat="server">這是超連結</a>
<script language="VB" runat="server">
Private Sub Page_Load(sender As Object, e As EventArgs)
Anchor1.Href="http://www.microsoft.com"
Anchor1.Target="_blank"
Anchor1.Title="小提示"
End Sub
</script>
</html>
基礎HTML控制項
HtmlImage控制項
HtmlImage控制項對應於HTML元素中的
<Img>元素，是一種用來顯示圖片於網頁上的
控制項。在ASP.NET中變為一個可以被程式控制
並動態改變其屬性的HTML控制項。
<img
id="被程式碼所控制的名稱"
Runat="server"
alt="無法顯示圖形時所顯示的小提示"
align="top | middle | bottom | left | right"
border="邊框寬度"
height="影像高度"
src="影像所在的位址"
width="影像寬度">
基礎HTML控制項
下表為HtmlImage控制項的常用屬性：
屬 性
說
明
設
定
值
src
圖形檔的位址
URL或檔名
width
圖片寬
像素
height
圖片高
像素
border
圖片顯示時的外框大小
數值
align
設定和圖片旁邊文字的排列方式
top、middle、
bottom、left、right
alt
當圖片無法下載時顯示的文字或
當滑鼠游標移至圖片上時顯示小
提示內的文字
字串
基礎HTML控制項
下面的程式利用Page_Load事件來設
定Image1物件的屬性：
<html>
<img id="Image1" runat="server"/>
<script language="VB" runat="server">
Private Sub Page_Load(sender As Object, e As EventArgs)
Image1.Src="Board.jpg"
Image1.Alt="This is a picture"
Image1.Width="512"
Image1.Height="384"
Image1.Border="2"
End Sub
</script>
</html>
使用者資料的輸入
上傳資料的方法：
網址?參數名稱=值
實際不可能讓使用者這樣輸入。要讓使
用者輸入資料，還是要用如按鈕、文字
輸入盒以及選單等比較友善的視覺使用
者介面，所以接下來要介紹這些資料輸
入的控制項。
資料的輸入
HtmlForm控制項
資料的輸入
HtmlForm控制項的使用語法為：
<form
id="被程式碼所控制的名稱"
runat="server"】
method="post | get"
action="要執行程式的位址">
其他控制項
</form>
HtmlForm控制項有兩個主要的屬性：
屬
性
內
容
設
定
值
method
傳遞資料的方法
post（Server抓取資料）或get（上傳）
action
呼叫的網址
URL或檔名
資料的輸入
Form控制項中配置了一個Button物件，並指定按下按鈕
時所要呼叫的事件程序為Button_Click事件：
<html>
<!--其method屬性預設為post, action預設是自己-->
<form runat="server">
<button id="Button1" runat="server" OnServerClick="Button1_Click">請按這裡
</button>
</form>
<script language="VB" runat="server">
Private Sub Page_Init(sender As Object, e As EventArgs)
Response.Write("這是Page_Init事件<br>")
End Sub
Private Sub Page_Load(sender As Object, e As EventArgs)
Response.Write("這是Page_Load事件<br>")
End Sub
Private Sub Button1_Click(sender As Object, e As EventArgs)
Button1.Style("BackGround-Color")="Black"
Button1.Style("Color")="White"
Response.Write("這是Button1_Click事件")
End Sub
</script>
</html>
資料的輸入
上述程式執行的結果，先觸發Page_Load事件，如下所示：
資料的輸入
HtmlInput控制項
要讓使用者輸入資料，則使用HtmlInput控制
項。而要讓程式抓到這些資料，則必須利用
HtmlForm控制項將這個輸入控制項包圍起來
輸 入 種 類 Type屬性設定 常
用
的
屬
性
及
事
件
按鈕
Button
確定按鈕
Submit
事件：OnServerClick
屬性：value（按鈕所顯示的文字）
重置按鈕
Reset
視覺元素：
資料的輸入
輸 入 種 類
Type屬性設定
文字輸入盒 Text
密碼輸入盒 Password
檢核盒
CheckBox
常
用
的
屬
性
及
事
件 視覺元素
屬性：value（輸入盒內所顯示的文字）
maxlength（可接受的文字長度）
size（輸入盒的大小）
屬性：checked（是否有被核取，布
林）
value（檢核盒的相關資料）
收音機按鈕 Radio
屬性：checked（是否有被核取，布林）
value（收音機按鈕的相關資料）
隱藏欄位
屬性：value（隱藏欄位的內容）
Hidden
無
資料的輸入
HtmlInputButton按鈕控制項
• 按鈕最主要的功用為執行一個指令或動作。
• type ：Submit，Button，Reset
• ASP.NET裡大多使用type="Button"
<input
id="被程式碼所控制的名稱"
runat="server"
type="Button | Submit | Reset"
OnServerClick="事件程序名">
資料的輸入
三種型態的HtmlInputButton控制項：
<html>
<form runat="server">
<input type="Text" id="Text1" runat="server" value="這是文字輸入盒">
<input type="Button" id="Button1" runat="server"
OnServerClick="Button1_Click" value="這是按鈕">
<input type="Submit" id="Submit1" runat="server"
OnServerClick="Submit1_Click" value="這是確定">
<input type="Reset" runat="server" value="這是重置">
</form>
<span id="Sp1" runat="server"/>
<script language="VB" runat="server">
Private Sub Button1_Click(sender As Object, e As EventArgs)
Sp1.InnerText="您按了Button"
End Sub
Private Sub Submit1_Click(sender As Object, e As EventArgs)
Sp1.InnerText="您按了Submit"
End Sub
</script>
</html>
資料的輸入
HtmlInputText文字輸入盒
• 文字輸入盒就是讓使用者輸入文字資料的地方。
• Text時是輸入一般資料
• 而Password是用來輸入密碼用的的文字輸入盒
<input
id="被程式碼所控制的名稱"
runat="server"
type="Text | Password"
maxlength="可接受的字串長度"
size="文字輸入盒的寬度"
value="顯示在文字輸入盒的預設值">
資料的輸入
HtmlInputRadio收音機按鈕控制項
• 要限制使用者的選擇為單選，並只能夠在所
提供的項目中選擇一個答案時，可以使用
HtmlInputRadio。
• 同一時間只能有一個按鈕被選擇，故它可以
用在單選的選項上
<input
id="被程式碼所控制的名稱"
runat="server"
type="Radio"
checked="True | False"
name="收音機按鈕所屬群組">
資料的輸入
HtmlInputCheckBox檢核盒控制項
要讓使用者可以複選多個項目，不過只能夠
在所提供的項目中複選答案時，可以使用
H t m l I n p u t C h e c k B o x 。
<input
id="被程式碼所控制的名稱"
runat="server"
type="CheckBox"
checked="True | False">
資料的輸入
HtmlInputHidden隱藏輸入控制項
要在使用者傳送所輸入的資料時，順便傳送
不需要使用者輸入的資料時，可以使用隱藏
輸入控制項。
<input
id="被程式碼所控制的名稱"
runat="Server"
type="Hidden"
value="所要傳送的資料">
資料的輸入
HtmlTextArea文字輸入區控制項
HtmlTextArea控制項的功能和前述的Text
控制項類似，只是HtmlTextArea控制項可
以設定長度和高度，用來輸入一小段文字。
<textarea
id="被程式碼所控制的名稱"
runat="server"
cols="單行的長度"
rows="文字輸入區的列數"
>
文字區內容
</textarea>
資料的輸入
HtmlSelect選項控制項
選單控制項有兩種風格，一種是下拉式選單，
另一種是清單，其中HtmlSelect控制項還有一
個SelectedIndex屬性，用來取得使用者所選
的項目索引。倘若使用者沒有選擇任何項目，
則本屬性的值為-1；若使用則選擇第一個項目，
則SelectedIndex屬性為0，依此類推。
<select
id="被程式碼所控制的名稱"
runat="Server"
items="選項集合"
size="選單長度">
<option>選項一</option>
<option>選項…N</option>
</select>
程式轉移
.aspx.vb被編譯後將成為一個.DLL檔案，存放於
/bin目錄下
轉移時只要將.aspx與/bin目錄移轉就可以