第二章用Web伺服器控制元件建立表單

主要內容

l 建立智慧表單

l 控制頁面導航

l 在控制元件上進行格式化

1 建立智慧表單

1.1 Label控制元件

重要屬性是Text。

給Text屬性賦值，你可以：第一、宣告時賦值；第二、程式碼中賦值。

Label控制元件的內容被顯示在<span>標記內（可以用瀏覽器檢視原始碼）。

1.2 TextBox控制元件

可以用來顯示三種HTML標記。分別是：文字輸入域、口令輸入域和文字區域。

重要的屬性有：

l AutoPostBack 若為True，改變文字框的內容之後，將自動傳送含有此文字框的表單

l Columns

l MaxLength

l ReadOnly

l Rows

l Text

l TextMode 有效值有三個：

u MultiLine

u Password

u SingleLine

l Wrap

重要的事件

l OnTextChanged

關於“TextMode屬性”的三個值？？？

l SingleLine 這是預設值，一般單行輸入文字域。

l Password 顯示口令輸入域

l MultiLine 文字區域TextArea

1.3 Button控制元件

可以在表單中新增的Button控制元件有三種（不論哪種按鈕，點選時都是【將包含按鈕的表單提交給Web伺服器】）：

l Button 標準HTML表單按鈕

預設情況下，它顯示的是提交按鈕。（即為<input type=”submit”>標記）

重要屬性有：

u Text

u CommandName

u CommandArgument

u CausesValidation 設定表單是否被檢驗。預設為true。

重要事件：

u Click

u Command

l ImageButton 影像表單按鈕

重要屬性（只列出與Button不同的）：

l AlternativeText 當不能顯示影像時，需要顯示的文字

l ImageAlign 對齊方式，取值為：AbsBottom、AbsMiddle、BaseLine、Bottom、Left、Middle、NotSet、Right、TextTop和Top

l ImageURL 影像的URL

重要事件（同Button控制元件）

注意：ImageButton控制元件的Click事件，其事件引數物件的型別為ImageClickEventArgs，它能夠傳遞滑鼠點選位置的x和y座標

l LinkButton 超文字連結

顯示為超文字連結，點選時，將含有此按鈕的表單中的所有域都提交給伺服器。

LinkButton控制元件在不支援JavaScript的瀏覽器中不起作用（禁用也算）。

1.4 RadioButton和RadioButtonList控制元件

RadioButton可以很方便的改變佈局；

而RadioButtonList便於顯示來自資料庫或集合的按鈕列表。

1.4.1 RadioButton控制元件

新增控制元件時，設定GroupName屬性，可以對按鈕進行分組。（同GroupName的按鈕屬於同組）

而CheckedChanged事件則可以用來判斷哪個按鈕被選中了。（此事件發生時機為【新的控制元件被選中時】，相對的若預設按鈕被選中時直接提交表單，不會觸發此事件）

RadioButton控制元件也支援AutoPostBack屬性。

1.4.2 RadioButtonList

跟佈局有關屬性：

CellPadding	邊框寬度（單位畫素數）
CellSpacing	各按鈕間距
RepeatColumns	顯示時列數
RepeatDirection	方向。取值Horizontal和Vertical（預設）
RepeatLayout	佈局。取值Table（預設）和Flow

資料庫有關屬性

DataSource
DataTextField	指定欄位
DataTextFormatString
DataValueField	作為【單選按鈕的值】的資料庫欄位
DataMember	資料來源表

一般屬性

Items

SelectedIndex

SelectedItem

方法

DataBind

事件

SelectedIndexChanged

產生RadioButtonList控制元件的三種方法：

第一，宣告時列出單選按鈕

<asp:RadioButtonList ID=”radlFavoriteColor” Runat=”Server”>

<asp:ListItem Text=”紅色”/>

<asp:ListItem Text=”藍色” Selected=”True”/>

<asp:ListItem Text=”黃色” />

</asp:RadioButtonList>

第二，將條目新增到RadioButtonList類的ListItemCollection集合

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Protected Sub page_load(ByVal s As Object, ByVal e As EventArgs)

If Not IsPostBack Then

radl1.Items.Add("紅色的")

radl1.Items.Add("綠色")

radl1.Items.Add("藍色")

radl1.SelectedIndex = 2

End If

End Sub

</script>

</head>

<body>

<div>

<asp:RadioButtonList ID="radl1" runat="server"></asp:RadioButtonList>

</div>

</form>

</body>

</html>

第三，繫結到一個資料來源

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sub page_load()

'定義一個資料來源，可以用ArrayList代替

Dim colss As New ArrayList

If Not IsPostBack Then '

colss.Add("一種顏色")

colss.Add("兩種顏色")

colss.Add("三種顏色")

colss.Add("第五種")

'下面開始繫結資料來源

radl2.DataSource = colss

radl2.DataBind()

End If

End Sub

</script>

</head>

<body>

<div>

<asp:RadioButtonList ID="radl2" runat="server" />

</div>

</form>

</body>

</html>

注意：ArrayList是一個集合，可以把它看做沒有固定尺寸的陣列。

另外，在將RadioButtonList繫結到資料來源時，還可以使用其DataTextFormatString屬性對每個選項的文字進行格式化。
<asp:RadioButtonList ID="radl2" DataTextFormatString="這種顏色叫:{0}" runat="server" />

如何判斷【當前選中的按鈕】？

使用SelectedIndex屬性，返回當前選中按鈕的索引號。（注意第一項的索引號為0）

或者，利用SelectedItem屬性，返回條目。（返回值型別ListItem）

如何【控制佈局】？

使用RepeatDirection屬性，若為Vertical，表示按鈕先縱向，再到下一列顯示；若為Horizontal，則先橫向，再到下一行。

如果，啟動了RadioButtonList控制元件的AutoPostBack屬性，當【選擇新的單選按鈕時】會引發SelectedIndexChanged事件。

1.5 CheckBox和CheckBoxList核取方塊

l CheckBox控制元件

特殊屬性：Checked。（為True表示被選中）

事件：CheckedChanged

l CheckBoxList控制元件

1.6 DropDown控制元件

包含一個ListItemCollection集合型別的屬性Items。

1.7 ListBox控制元件

特殊屬性：

Rows 表示顯示的行的個數。預設為4

SelectionMode 決定是否能多選。可能值為Multipe和Single。

2 控制頁面導航

內容：

l 如何將HTML表單提交到另一個頁面，並且獲取表單資訊。

l 如何使用Redirect方法自動將使用者送到新頁面

l 如何用HyperLink控制元件將頁面連結起來。

2.1 將表單提交到另一個頁面

使用<form>標記的伺服器端版本，不能將表單傳送到另一個頁面。

若要“將表單提交到另一個頁面”，可以使用標準HTML表單標記。

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>

</head>

<body>

<div>

username:<br />

<p>

</p>

Comments:<br />

<p></p>

</div>

</form>

</body>

</html>

注意：<form method="post" action="Results.aspx">。標記的Action屬性被設定為新頁面Results.aspx，這是表單資訊會被髮送的地方。

注意：因為表單被髮送到另一個頁面，你不能使用ASP.NET控制元件獲取此資訊。

『你可以使用HTTPRequest類的Params集合來操作』

注意：你還可以使用HTTPRequest類的Form集合獲取表單資料。

Params和Form集合的差異？？？

Rarams集合還代表了QueryStrings、ServerVaribles和Cookies。

'在page_Load中獲取內容

Sub page_load()

lblUserName.Text = Request.Params("Username")

lblComments.Text = Request.Params("Comments")

End Sub

2.2 使用Redirect（）方法

在大多數情況下，應該利用檢視狀態，並且將表單傳送回其本身。

問題是：在使用者成功地填寫表單之後，如何將他傳送到新的頁面？

傳送使用者的最好辦法是使用Response.Redirect()方法。（可以傳送到任何頁面或別的網站頁面上）

通常，在呼叫Redirect（）方法之前，會將表單資料儲存到檔案或資料庫表中。

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)

'在這裡,先儲存表單資訊，這裡掠過

Response.Redirect("ThankYou.aspx")

End Sub

</script>

<title>Redirect.aspx</title>

</head>

<body>

<div>

<h1>先加控制元件</h1>

<br />

Username:<br />

<asp:TextBox ID="txtUsername" runat ="server" />

<p />

Comments:<br />

<asp:TextBox ID="txtComments" TextMode="multiLine" runat="server" />

<p />

<asp:Button ID="btnSubmit" Text="Submit!" runat="server" OnClick="btnSubmit_Click" />

</div>

</form>

</body>

</html>

2.3 使用HyperLink控制元件

如果使用HyperLink控制元件，可以將一個asp.net頁面連結到另一個頁面。

HyperLink控制元件，可以顯示文字或者影像，作為顯示。

重要屬性：

ImageUrl	顯示用影像的URL
NavigateUrl	目標頁面的URL
Target	連結的目標視窗或框架，可以是：_top、_self、_parent、_search、_blank。
Text	連結的文字標籤

HyperLink控制元件相對於簡單的HTML連結（即<a href />）的優點？？？？

就是可以在程式碼中操作它的屬性。

Sub page_load()

If TimeOfDay > #5:00:00 PM# Then

lnkHelpLink.NavigateUrl = "AfterHoursHelp.aspx"

lnkHelpLink.Text = "After Hours Help"

Else

lnkHelpLink.NavigateUrl = "NormalHelp.aspx"

lnkHelpLink.Text = "Normal help"

End If

End Sub

</script>

3 在控制元件上進行格式化

主要內容：

第一．所有web控制元件共有的格式化屬性

第二．應用“級聯樣式表（CSS）”

第三．應用“類”到Web控制元件

3.1 基本Web控制元件屬性

所有Web控制元件的基類是WebControl。

在WebControl類中定義的【基本Web控制元件格式化屬性簡表】

AccessKey	選擇控制元件用的熱鍵。需要按住ALT再加某字母
TabIndex
BackColor	背景色。可以是名稱或RGB值（#FF0000）
BorderStyle	邊框外觀。有效值：Dashed、Dotted、Double、Groove、Inset、None、NotSet、Outset、Ridge、Solid。
BorderWidth	控制元件邊框寬度（單位畫素）
Font-Bold
Font-Italic
Font-Name
Font-Names
Font-Overline	文字上面劃線
Font-Size	單位畫素
Font-Strikeout	刪除線
Font-UnderLine
ForeColor
Height
ToolTip
Width

注意，一些屬性需要IE瀏覽器支援，還有一些需要依賴於樣式表。

FontUnit 型別（表示字型的大小）

其中：公開方法

Parse

已過載。將指定的字串轉換為其 FontUnit 等效項。

txt1.Font.Size = FontUnit.Parse(ddlFontSize.SelectedItem.Text)

Color結構（在System.Drawing名稱空間）

其公開方法

FromName

基於預定義顏色的指定名稱建立 Color 結構。

Dim strBackColor As Color = Color.FromName(ddlBackColor.SelectedItem.Text)

3.2 在Web控制元件上應用樣式表

舉例：將字串中每個單詞的各字母自動變成大寫，可以通過在Label控制元件的Style屬性中設定Text-Transform=Capitalize.

<asp:Label

ID=”lbl1”

Style=”Text-Transform:Capitalize”

Text=”this is some Text”

Runat=”Server”/>

瀏覽器中觀察原始碼，會產生一個包含Style屬性的<span>標記，如下：

上面的效果，也可以使用CssClass屬性（將一個樣式單類賦值給Web控制元件）來實現。

樣式單可以定義在頁面檔案內部。（通過指定控制元件的CssClass屬性。注意此屬性值的大小寫）

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>

<%--首先，加入css，新增<style>標記--%>

.myClass

{

text-align:justify;

font:50pt Script;

}

</style>

</head>

<body>

<div>

<%--這裡是第二步--%>

<asp:Label ID="lbl1" Width="10" CssClass="myClass" Text="this is some text" runat="server" /><%--注意CssClass="myClass"，大小寫不一樣--%>

</div>

</form>

</body>

</html>

還可以通過程式碼新增樣式（通過使用控制元件style屬性【由WebControl繼承而來】，來指定文字樣式）

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Protected Sub lbtn1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

'第二步，通過IDE，增加LinkButton的Click事件

lbl1.Style("text-transform") = "capitalize"

End Sub

Protected Sub lbtn2_Click(ByVal sender As Object, ByVal e As System.EventArgs)

lbl1.Style("text-transform") = "lowercase"

End Sub

</script>

</head>

<body>

<div>

<%--第一步，新增控制元件LinkButton--%>

<asp:Label ID="lbl1" Text="This is some text!" runat="server" /><p />

<asp:LinkButton ID="lbtn1" Text="首字母大寫" runat="server" OnClick="lbtn1_Click" /><br />

<asp:LinkButton ID="lbtn2" Text="全部小寫" runat="server" OnClick="lbtn2_Click" />

</div>

</form>

</body>

</html>

下面演示“通過控制元件的CssClass屬性，給控制元件分配不同的樣式單類。”

有兩個樣式單類myClass1和myClass2，用按鈕控制分別賦給一個Label

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

'第二步，給LinkButton增加事件'

Label1.CssClass = "myclass1"

End Sub

Protected Sub LinkButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs)

Label1.CssClass = "myclass2"

End Sub

</script>

<%--第一步，定義樣式單類--%><%--注意位置在<head>標記裡--%>

<style>

.myclass1

{

font:72pt 方正粗活意簡體;

color: blue;

}

.myclass2

{

font:36pt 方正粗活意繁體;

color:red;

}

</style>

</head>

<body>

<div>

<asp:Label ID="Label1" runat="server" Text="Here is some text! 這有一些文字！"></asp:Label><br />

<br />

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">指定為 myclass1</asp:LinkButton><br />

<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">指定為 myclass2</asp:LinkButton> </div>

</form>

</body>

</html>

關於Style類

(前面學的是將樣式單應用到控制元件上)

還可以通過Style類來支援伺服器端樣式。（即，顯示建立Style類的例項，並將它應用於多個控制元件）

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ import Namespace="system.Drawing" %>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

'先建立Style類示例'

Dim myStyle As New Style '

myStyle.BackColor = Color.Yellow

myStyle.ForeColor = Color.Green

myStyle.BorderStyle = BorderStyle.Dashed

myStyle.BorderWidth = New Unit(4) 'Unit表示長度度量單位'

TextBox1.ApplyStyle(myStyle)

TextBox2.ApplyStyle(myStyle)

TextBox3.ApplyStyle(myStyle)

myStyle.BackColor = Color.Aqua

myStyle.ForeColor = Color.DarkGoldenrod

Button1.ApplyStyle(myStyle)

Button2.ApplyStyle(myStyle)

myStyle.BorderStyle = BorderStyle.Groove

myStyle.BorderWidth = New Unit(1)

LinkButton1.ApplyStyle(myStyle)

LinkButton2.ApplyStyle(myStyle)

myStyle.Font.Name = "hakuyocaoshu7000"

myStyle.Font.Size = 73

HyperLink1.ApplyStyle(myStyle)

End Sub

</script>

</head>

<body>

<div>

<asp:TextBox ID="TextBox1" runat="server">opaoopampgoaasdg</asp:TextBox><br />

<asp:TextBox ID="TextBox2" runat="server">白日依山盡</asp:TextBox><br />

<asp:TextBox ID="TextBox3" runat="server">黃河如海浪Rive Drive hair</asp:TextBox><br />

<p />

<asp:Button ID="Button1" runat="server" Text="Button" /><br />

<asp:Button ID="Button2" runat="server" Text="Button" /><br />

<p />

<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton><br />

<asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton><br />

<p />

<asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink></div>

</form>

</body>

</html>

注意：ApplyStyle()方法，是將Style類應用於WebControl；還有一個MergeStyle()方法，是將樣式合併到WebControl

第二章 用Web伺服器控制元件建立表單

相關文章

第二章用Web伺服器控制元件建立表單