Chapter 8
Building Forms with Web Server Controls
Chapter 8 Building Forms with Web Server Controls
使用 Web 控制元件的基礎
<asp: 元件類別名 id=“ 控制元件名稱” runat=“server” 其他屬性… />
<asp: 元件類別名 id=“ 控制元件名稱” runat=“server” 其他屬性… ></asp>
or
•Controls with more built-in features than HTML server controls. Web server controls include not only form-type controls such as buttons and text boxes, but also special-purpose controls such as a calendar. Web server controls are more abstract than HTML server controls, in that their object model does not necessarily reflect HTML syntax.
Chapter 8 Building Forms with Web Server Controls
使用 Web 控制元件的基礎
Web 控制元件僅接受伺服器端程式的控制,無法與用戶端 Script 語言 ( 如 VB Script or Java Script) 產生互動。
使用限制
Modify current ASP Projects
Create New ASP.Net Projects
HTML 控制項
Web 控制元件
Chapter 8 Building Forms with Web Server Controls
使用 Web 控制元件的基礎 Example:
<Script Runat=“Server”>Sub Page_Load If TimeOfDay < #12:00pm# Then lblMessage.Text = “Good Morning!” Else lblMessage.Text = “Good Day!” End IFEnd Sub</Script><html><body><form runat=“server”> <asp:Label ID=“lblMessage” runat=“server”/></form> </body></html>
Chapter 8 Building Forms with Web Server Controls
使用 Web 控制元件的基礎
文字顯示編輯
LabelTextBox
按鈕
ButtonImageButtonLinkButton
選取資料
RadioButtonRadioButtonListCheckBoxCheckBoxListDropDownListListBox
顯示圖形ImageAdRotator
Chapter 8 Building Forms with Web Server Controls
使用 Web 控制元件的基礎
日期設定Calendar
資料顯示
DataGridRepeaterDataList
表格控制TableTableRowTableCell
分段顯示
Panel
超鏈結
HyperLink
輸入驗證RequiredFieldValidatorRangeValidatorCompareValidatorRegularExpressionValidatorCustomValidator
Chapter 8 Building Forms with Web Server Controls
使用 Label 控制元件
The Label Web server control provides you with a way to programmatically set text in a Web Forms page. You typically use the Label control when you want to change text in the page at run time, such as in response to a button click. A Label control is better for simply displaying text than a TextBox control (or another control) because the resulting text is static on the page; users cannot edit it.
You can set the text of the Label control at design time in the designer or at run time in a program. You can also bind the Text property of a Label control to a data source to display database information on a page.
Chapter 8 Building Forms with Web Server Controls
使用 Label 控制元件
<asp:Label id=“control name” runat=“server” Text=“default text”></asp:label>
可簡化為
<asp:Label id=“control name” runat=“server” Text=“default text” />
Chapter 8 Building Forms with Web Server Controls
使用 Label 控制元件Example
<html><body><asp:Label id=“Label1” runat=“server”/></body></html><script language=“VB” runat=“server”>Sub Page_Load Label1.Text=“Hello…”End Sub</script>
Chapter 8 Building Forms with Web Server Controls
使用 TextBox 控制元件
<asp:TextBox id=“control name” runat=“server” AutoPostBack=“True/False” OnTextChanged=“procedure name” Columns=“horizontal size” Rows=“Vertical size” MaxLength=“maximum number of characters” TextMode=“Single/Multiline/Password” Text=“text”></asp:TextBox>
Chapter 8 Building Forms with Web Server Controls
使用 TextBox 控制元件Example:
<html><body><form runat=“server”>Username:<asp:TextBox id=“txtUserName” Columns=“30” runat=“server” /><p>Password:<asp:TextBox id=“txtPassword” TextMode=“Password” Columns=“30” runat=“server” /><p>Comments:<asp:TextBox id=“txtComments” TextMode=“multiline” Columns=“30” rows=“10” runat=“server” /><p><asp:Button Text=“Click Here!” runat=“server” /></form></body></html>
Chapter 8 Building Forms with Web Server Controls
使用 Button/LinkButton/ImageButton 控制元件
Button
<asp:Button id=“control name” runat=“server” Text=“text” OnClick=“procedure name”></asp:Button>
會自動回傳資料至 server
LinkButton
<asp:LinkButton id=“control name” runat=“server” Text=“text” OnClick=“procedure name”></asp:LinkButton>
Chapter 8 Building Forms with Web Server Controls
使用 Button/LinkButton/ImageButton 控制元件
ImageButton
<asp:ImageButton id=“control name” runat=“server” ImageUrl=“URL of the image” AlternativeText=“text” OnClick=“procedure name”></asp:LinkButton>
Chapter 8 Building Forms with Web Server Controls
Command
<asp:Button id=“control name” runat=“server” Text=“text” CommandName=“command name” CommandArgument=“command value” OnCommand=“procedure name”></asp:Button>
使用 Button/LinkButton/ImageButton 控制元件
Chapter 8 Building Forms with Web Server Controls
使用 Button/LinkButton/ImageButton 控制元件
ExampleSub Button_Command(s as Object, e as CommandEventArgs) Dim intAmount as Integer intAmount = e.CommandArgument If e.CommandName=“Add” Then lblCounter.Text += intAmount Else lblCounter.Text -=intAmount End IfEnd Sub…<asp:Button runat=“server” Text=“Add 5” CommandName=“Add” CommandArgument=“5” OnCommand=“Button_Command”></asp:Button>
Chapter 8 Building Forms with Web Server Controls
使用 DropDownList 和 ListBox 控制元件
DropDownList – 僅可單選
<asp:DropDownList id=“control name” runat=“server”AutoPostBack=“True/False” OnSelectIndexChanged=“procedure name”> <asp:ListItem value=“selected value” selected=“True/False”>item name</asp:ListItem><asp:ListItem value=“selected value” selected=“True/False”>item name</asp:ListItem>…</asp:DropDownList>
Chapter 8 Building Forms with Web Server Controls
使用 DropDownList 和 ListBox 控制元件
Example…<asp:DropDownList id=“Test” runat=“server” AutoPostBack=“True”OnSelectedIndexChanged=“Sub1”><asp:ListItem value=“A1” Selected=“True”>Apple</asp:ListItem><asp:ListItem value=“A2”>Orange</asp:ListItem><asp:ListItem value=“A3”>Pineapple</asp:ListItem></asp:DropDownList>…<script language=“VB” runat=“server”>sub Sub1(s as object, e as EventArgs) myLabel1.Text=“Selected Item Name:” & Test.SelectedItem.Text myLabel2.Text=“Selected Item Value:” & Test.SelectedItem.Value myLabel3.Text=“Selected Index:” & Test.SelectedIndex myLabel4.Text=“The First Item Name:” & Test.Items(0).Text myLabel5.Text=“The First Item Value:” & Test.Items(0).Value myLabel6.Text=Test.Items(2).Selectedend sub</script>
Chapter 8 Building Forms with Web Server Controls
使用 DropDownList 和 ListBox 控制元件
ListBox – 可單選 / 複選
<asp:ListBox id=“control name” runat=“server”AutoPostBack=“True/False” SelectionMode=“Single/Multiple”OnSelectIndexChanged=“procedure name”> <asp:ListItem value=“selected value” selected=“True/False”>item name</asp:ListItem><asp:ListItem value=“selected value” selected=“True/False”>item name</asp:ListItem>…</asp:ListBox>
<asp:ListItem value=“selected value” Text=“item name” selected=“True/False”>
the same
Chapter 8 Building Forms with Web Server Controls
使用 DropDownList 和 ListBox 控制元件
ListBox 複選的處理
…Sub ListBox1_SelectedIndexChanged(s As Object, e As EventArgs) Dim i As Integer For i = 0 To ListBox1.Items.Count - 1 If ListBox1.Items(i).Selected Then Response.Write(ListBox1.Items(i).Text & "<BR>") End If NextEnd Sub…
Example
Chapter 8 Building Forms with Web Server Controls
使用 DropDownList 和 ListBox 控制元件
Compared with HTML 控制項<Select id=“Test” runat=“server”><option value=“A1” selected>Apple</option><option value=“A2”>Orange</option><option value=“A3”>Pineapple</option></select>
加入新 Item
Test.Items.Add(“Banana”)
Chapter 8 Building Forms with Web Server Controls
使用 CheckBox 和 RadioButton 控制元件
CheckBox
<asp:CheckBox id=“control name” runat=“server” AutoPostBack=“True/False” Text=“text” TextAlign=“Right/Left” Checked=“True/False” OnCheckedChanged=“procedure name” />
RadioButton
<asp:RadioButton id=“control name” runat=“server” AutoPostBack=“True/False” Text=“text” TextAlign=“Right/Left” Checked=“True/False” OnCheckedChanged=“procedure name” GroupName=“group name” />
Chapter 8 Building Forms with Web Server Controls
使用 CheckBox 和 RadioButton 控制元件
Example<asp:RadioButton id=“B1” runat=“server” AutoPostBack=“True” Text=“A” OnCheckedChanged=“Sub1” GroupName=“G1” /><asp:RadioButton id=“B2” runat=“server” AutoPostBack=“True” Text=“B” OnCheckedChanged=“Sub1” GroupName=“G1” /><asp:RadioButton id=“B3” runat=“server” AutoPostBack=“True” Text=“C” OnCheckedChanged=“Sub1” GroupName=“G1” /> …Sub Sub1(s as Object, e as EventArgs) If B1.Checked = True Then myLabel1.Text=B1.Text Else If B2.Checked = True Then myLabel1.Text=B2.Text Else myLabel1.Text=B3.Text End IfEnd Sub
Chapter 8 Building Forms with Web Server Controls
使用 CheckBox 和 RadioButton 控制元件
Compared with HTML 控制項
<Input Type=“radio” id=“B1” name=“G1” value=“A” runat=“server”>
<Input Type=“radio” id=“B2” name=“G1” value=“B” runat=“server”>
<Input Type=“radio” id=“B3” name=“G1” value=“C” runat=“server”>
<Input Type=“Button” id=“Button1” value=“Click” runat=“server” onServerClick=“Sub1”>
Chapter 8 Building Forms with Web Server Controls
使用 CheckBoxList 和 RadioButtonList 控制元件
CheckBoxList
<asp:CheckBoxList id=“control name” runat=“server” AutoPostBack=“True/False” CellPadding=“ 選項與格線距離” RepeatColumns=“ 每列中的選項數” RepeatDirection=“Vertical/Horizontal” TextAlign=“Right/Left” OnSelecedIndexChanged=“procedure name”><asp:ListItem Text=“item name” value=“selected value” seleced=“True/False” /><asp:ListItem Text=“item name” value=“selected value” seleced=“True/False” />…</asp:CheckBoxList>
Chapter 8 Building Forms with Web Server Controls
<asp:RadioButtonList id=“control name” runat=“server” AutoPostBack=“True/False” CellPadding=“ 選項與格線距離” RepeatColumns=“ 每列中的選項數” RepeatDirection=“Vertical/Horizontal” TextAlign=“Right/Left” OnSelectedIndexChanged=“procedure name”><asp:ListItem Text=“item name” value=“selected value” seleced=“True/False” /><asp:ListItem Text=“item name” value=“selected value” seleced=“True/False” />…</asp:RadioButtonList>
使用 CheckBoxList 和 RadioButtonList 控制元件
RadioButtonList
Chapter 8 Building Forms with Web Server Controls
使用 CheckBoxList 和 RadioButtonList 控制元件
Example…<asp:RadioButtonList id=“G1” runat=“server” AutoPostBack CellPadding=“2” RepeatDirection=“Horizontal” OnSelectedIndexChanged=“Sub1”><asp:ListItem Text=“A” /><asp:ListItem Text=“B” /><asp:ListItem Text=“C” /></asp:RadioButtonList>…<script language=“VB” runat=“server”>Sub Sub1(s as Object, e as EventArgs) myLabel1.Text=G1.SelectedItem.TextEnd Sub </script>
Note: add new items at run time: G1.Items.Add(“D”)
Chapter 8 Building Forms with Web Server Controls
使用 Panel 控制元件
<asp:Panel id=“Panel name” runat=“server” BackImageUrl=“background image”> …</asp:Panel><asp:Panel id=“Panel name” runat=“server” BackImageUrl=“background image”> …</asp:Panel>…
Panel
Chapter 8 Building Forms with Web Server Controls
使用 Panel 控制元件
…<form runat=“server”><asp:Panel id=“Panel1” runat=“server”> User ID:<asp:TextBox id=“UserID” runat=“server”/><p> Password:<asp:TextBox id=“UserPass” TextMode=“Password” runat=“server” /><p> <asp:Button id=“b1” runat=“server” Text=“Sure” OnClick=“B1_Click”/> </asp:Panel><asp:Panel id=“Panel2” runat=“server”> <asp:Label id=“myLabel” runat=“server”/></asp:Panel></form>…
Example
Chapter 8 Building Forms with Web Server Controls
…<script language=“VB” runat=server>Sub Page_Load Panel1.Visible = True Panel2.Visible = FalseEnd Sub
Sub B1_Click(s as Object, e as EventArgs) If UserID.Text=“Tom” and UserPass=“1234” Then Panel1.Visible=False Panel2.Visible=True myLabel.Text=“Welcome : ” & UserID.Text End IfEnd Sub</script>
使用 Panel 控制元件
Example - Continue
Chapter 8 Building Forms with Web Server Controls
使用 HyperLink 控制元件
<asp:Hyperlink id=“control name” runat=“server” NavigateUrl=“The Web Page URL” ImageUrl=“The Image URL” Target=“The Web Display Location”> Text</asp:Hyperlink>
The primary advantage of using a HyperLink control is that you can set link properties in server code. For example, you can dynamically change the link text or target page based on conditions in your page.
_blank (new)_self_parent_top
Chapter 8 Building Forms with Web Server Controls
Response.Redirect(The Web Page URL)
Example:
Response.Redirect(“ThankYou.aspx”)
Redirect MethodRedirect Method
Chapter 8 Building Forms with Web Server Controls
使用 Image 控制元件
<asp:Image id=“control name” runat=“server” ImageUrl=“The Image URL” AlternateText=“Alternative Text” ImageAlign=“NotSet / AbsBottom / AbsMiddle / BaseLine / Bottom / Left / Middle / Right / TextTop / Top” />
considering same line with other text or image
Chapter 8 Building Forms with Web Server Controls
使用 AdRotator 控制元件 (Advertisement Rotator)
<asp:AdRotator id=“control name” runat=“server” AdvertisementFile=“The XML Advertisement File” Target=“The Advertisement Display Location”></asp:AdRotator>
Chapter 8 Building Forms with Web Server Controls
The XML Advertisement File:
<?xml version=“1.0” encoding=“utf-8” ?><Advertisements><Ad> <ImageUrl>The Image URL</ImageUrl> <NavigateUrl>The Navigate URL</NavigateUrl> <AlternateText>The Alternative Text</AlternateText> <Impression>Weight</Impression></Ad><Ad>…</Ad></Advertisements>
使用 AdRotator 控制元件 (Advertisement Rotator)
輸入正整數
XML file 中使用的字集utf-8 : Unidcodebig5 : 繁體中文
Chapter 8 Building Forms with Web Server Controls
使用 Table/TableRow/TableCell 控制元件<asp:Table id=“control name” runat=“server” BackImageUrl=“The Background Image URL” CellSpacing=“space between two cells” CellPadding=“space between gridline and content in a cell” GridLines=“None/Horizontal/Vertical/Both” HorizontalAlign=“Center/Justify/Left/NotSet/Right”> <asp:TableRow> <asp:TableCell> … <asp:TableCell> … </asp:TableRow> <asp:TableRow> … </asp:TableRow> …</asp:Table>
可設定 id 與 runat 屬性
Chapter 8 Building Forms with Web Server Controls
使用 Table/TableRow/TableCell 控制元件Example:
<Html>…<asp:Table id=“Table1” CridLines=“Both” runat=“Server”/>…</Html><Script language=“VB” runat=“Server”> Sub Page_Load Dim i, j as Integer Dim row as TableRow Dim cell as TableCell For j = 1 to 3 row = New TableRow() For i = 1 to 4 cell = New TableCell() cell.Text = j*I row.Cells.Add(cell) Next i Table1.Rows.Add(row) Next j End Sub</Script>
Chapter 8 Building Forms with Web Server Controls
使用 Calendar 控制元件
<asp:Calendar id=“control name” runat=“server” CellSpacing=“space between two cells” CellPadding=“space between gridline and content in a cell” GridLines=“None/Horizontal/Vertical/Both” DayNameFormat=“FirstLetter/FirstTwoLetters/Full/Short” FirstDayOfWeek=“Monday/../Sunday” SowNextPrevMonth=“True/False” NextPrevFormat=“ShortMonth/FullMonth/CustomText” PreMonthText=“The HTML Text For Linking To Previous Month” NextMonthText=“The HTML Text For Linking To Next Month” SelectedDate=“Date” SelectionMode=“None/Day/DayWeek/DayWeekMonth” SelectWeekText=“HTML Text” SelectMonthText= “HTML Text” ShowDayHeader=“True/False” ShowGridLines=“True/False” ShowTitle=“True/False” TitleFormat=“Month/MonthYear” TodaysDate=“Date” VisibleDate=“Date” onSelectionChanged=“Procedure Name” />
“<img src=‘selectweek.gif’>”
Chapter 8 Building Forms with Web Server Controls
使用 Calendar 控制元件
SelectDate 與 SelectedDates 屬性
SelectionMode=“Day”
SelectionMode=“DayWeek/DayWeekMonth”
SelectDate
SelectDates
Chapter 8 Building Forms with Web Server Controls
使用 Calendar 控制元件
Example:
…<asp:Calendar id=“C1” runat=“Server” onSelectionChanged=“S1” />…<Script Language=“VB” runat=“Server”> Sub S1(s as object, e as EventArgs) Label1.Text=C1.SelectedDate.ToString Label2.Text=C1.SelectedDate.ToShortDateString Label2.Text=C1.SelectedDate.ToLongDateStringEnd Sub</Script>
Chapter 8 Building Forms with Web Server Controls
使用 Calendar 控制元件
Example:
…<asp:Calendar id=“C1” runat=“Server” onSelectionChanged=“S2” SelectionMode=“DayWeekMonth”/>…<Script Language=“VB” runat=“Server”> Sub S2(s as object, e as EventArgs) Dim i as Integer Label1.Text= “” For i = 1 to C1.SelectedDates.Count-1 Label1.Text &= C1.SelectedDates(i).ToLongDateString & “<BR>” Next iEnd Sub</Script>
Chapter 8 Building Forms with Web Server Controls
使用 Calendar 控制元件
Calendar 其它 Method
OnDayRenderOnSelectionChangedOnVisibleMonthChanged
DayRender 事件 (p.401)