1. Chapter 8 Building Forms with Web Server Controls

2. Chapter 8 Building Forms with Web Server Controls 使用 Web 控制元件的基礎 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.

3. 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 控制元件

4. Chapter 8 Building Forms with Web Server Controls 使用 Web 控制元件的基礎 Example: Sub Page_Load If TimeOfDay < #12:00pm# Then lblMessage.Text = “Good Morning!” Else lblMessage.Text = “Good Day!” End IF End Sub

5. Chapter 8 Building Forms with Web Server Controls 使用 Web 控制元件的基礎 文字顯示編輯 Label TextBox 按鈕 Button ImageButton LinkButton 選取資料 RadioButton RadioButtonList CheckBox CheckBoxList DropDownList ListBox 顯示圖形 Image AdRotator

6. Chapter 8 Building Forms with Web Server Controls 使用 Web 控制元件的基礎 日期設定 Calendar 資料顯示 DataGrid Repeater DataList 表格控制 Table TableRow TableCell 分段顯示 Panel 超鏈結 HyperLink 輸入驗證 RequiredFieldValidator RangeValidator CompareValidator RegularExpression Validator CustomValidator

7. 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.

8. Chapter 8 Building Forms with Web Server Controls 使用 Label 控制元件 可簡化為

9. Chapter 8 Building Forms with Web Server Controls 使用 Label 控制元件 Example Sub Page_Load Label1.Text=“Hello…” End Sub

10. 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”>

11. Chapter 8 Building Forms with Web Server Controls 使用 TextBox 控制元件 Example: Username: Password: <asp:TextBox id=“txtPassword” TextMode=“Password” Columns=“30” runat=“server” /> Comments: <asp:TextBox id=“txtComments” TextMode=“multiline” Columns=“30” rows=“10” runat=“server” />

12. Chapter 8 Building Forms with Web Server Controls 使用 Button/LinkButton/ImageButton 控制元件 Button <asp:Button id=“control name” runat=“server” Text=“text” OnClick=“procedure name”> 會自動回傳資料至 server LinkButton <asp:LinkButton id=“control name” runat=“server” Text=“text” OnClick=“procedure name”>

13. 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”>

14. 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”> 使用 Button/LinkButton/ImageButton 控制元件

15. Chapter 8 Building Forms with Web Server Controls 使用 Button/LinkButton/ImageButton 控制元件 Example Sub 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 If End Sub … <asp:Button runat=“server” Text=“Add 5” CommandName=“Add” CommandArgument=“5” OnCommand=“Button_Command”>

16. Chapter 8 Building Forms with Web Server Controls 使用 DropDownList 和 ListBox 控制元件 DropDownList – 僅可單選 <asp:DropDownList id=“control name” runat=“server” AutoPostBack=“True/False” OnSelectIndexChanged=“procedure name”> item name item name …

17. Chapter 8 Building Forms with Web Server Controls 使用 DropDownList 和 ListBox 控制元件 Example … <asp:DropDownList id=“Test” runat=“server” AutoPostBack=“True” OnSelectedIndexChanged=“Sub1”> Apple Orange Pineapple … 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).Selected end sub

18. 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”> item name item name … <asp:ListItem value=“selected value” Text=“item name” selected=“True/False”> the same

19. 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 & " ") End If Next End Sub … Example

20. Chapter 8 Building Forms with Web Server Controls 使用 DropDownList 和 ListBox 控制元件 Compared with HTML 控制項 Apple Orange Pineapple 加入新 Item Test.Items.Add(“Banana”)

21. 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” />

22. 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 If End Sub

23. Chapter 8 Building Forms with Web Server Controls 使用 CheckBox 和 RadioButton 控制元件 Compared with HTML 控制項 <Input Type=“Button” id=“Button1” value=“Click” runat=“server” onServerClick=“Sub1”>

24. 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” /> …

25. 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” /> … 使用 CheckBoxList 和 RadioButtonList 控制元件 RadioButtonList

26. Chapter 8 Building Forms with Web Server Controls 使用 CheckBoxList 和 RadioButtonList 控制元件 Example … <asp:RadioButtonList id=“G1” runat=“server” AutoPostBack CellPadding=“2” RepeatDirection=“Horizontal” OnSelectedIndexChanged=“Sub1”> … Sub Sub1(s as Object, e as EventArgs) myLabel1.Text=G1.SelectedItem.Text End Sub Note: add new items at run time: G1.Items.Add(“D”)

27. Chapter 8 Building Forms with Web Server Controls 使用 Panel 控制元件 <asp:Panel id=“Panel name” runat=“server” BackImageUrl=“background image”> … <asp:Panel id=“Panel name” runat=“server” BackImageUrl=“background image”> … … Panel

28. Chapter 8 Building Forms with Web Server Controls 使用 Panel 控制元件 … User ID: Password:<asp:TextBox id=“UserPass” TextMode=“Password” runat=“server” /> … Example

29. Chapter 8 Building Forms with Web Server Controls … Sub Page_Load Panel1.Visible = True Panel2.Visible = False End 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 If End Sub 使用 Panel 控制元件 Example - Continue

30. 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 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

31. Chapter 8 Building Forms with Web Server Controls Response.Redirect( The Web Page URL ) Example: Response.Redirect(“ThankYou.aspx”) Redirect Method Redirect Method

32. 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

33. 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”>

34. Chapter 8 Building Forms with Web Server Controls The XML Advertisement File: The Image URL The Navigate URL The Alternative Text Weight … 使用 AdRotator 控制元件 (Advertisement Rotator) 輸入正整數 XML file 中使用的字集 utf-8 : Unidcode big5 : 繁體中文

35. 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”> … … … … 可設定 id 與 runat 屬性

36. Chapter 8 Building Forms with Web Server Controls 使用 Table/TableRow/TableCell 控制元件 Example: … … 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

37. 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” /> “ ”

38. Chapter 8 Building Forms with Web Server Controls 使用 Calendar 控制元件 SelectDate 與 SelectedDates 屬性 SelectionMode=“Day” SelectionMode=“DayWeek/DayWeekMonth” SelectDate SelectDates

39. Chapter 8 Building Forms with Web Server Controls 使用 Calendar 控制元件 Example: … … Sub S1(s as object, e as EventArgs) Label1.Text=C1.SelectedDate.ToString Label2.Text=C1.SelectedDate.ToShortDateString Label2.Text=C1.SelectedDate.ToLongDateString End Sub

40. Chapter 8 Building Forms with Web Server Controls 使用 Calendar 控制元件 Example: … <asp:Calendar id=“C1” runat=“Server” onSelectionChanged=“S2” SelectionMode=“DayWeekMonth”/> … 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 & “ ” Next i End Sub

41. Chapter 8 Building Forms with Web Server Controls 使用 Calendar 控制元件 Calendar 其它 Method OnDayRender OnSelectionChanged OnVisibleMonthChanged DayRender 事件 (p.401)