chapter 8 building forms with web server controls

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.



Web 控制元件僅接受伺服器端程式的控制，無法與用戶端 Script 語言 ( 如 VB Script or Java Script) 產生互動。

使用限制

Modify current ASP Projects

Create New ASP.Net Projects

HTML 控制項

Web 控制元件


使用 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>



文字顯示編輯

LabelTextBox

按鈕

ButtonImageButtonLinkButton

選取資料

RadioButtonRadioButtonListCheckBoxCheckBoxListDropDownListListBox

顯示圖形ImageAdRotator



日期設定Calendar

資料顯示

DataGridRepeaterDataList

表格控制TableTableRowTableCell

分段顯示

Panel

超鏈結

HyperLink

輸入驗證RequiredFieldValidatorRangeValidatorCompareValidatorRegularExpressionValidatorCustomValidator


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


使用 Label 控制元件

<asp:Label id=“control name” runat=“server” Text=“default text”></asp:label>

可簡化為

<asp:Label id=“control name” runat=“server” Text=“default text” />


使用 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>


使用 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>


使用 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>


使用 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>



ImageButton

<asp:ImageButton id=“control name” runat=“server” ImageUrl=“URL of the image” AlternativeText=“text” OnClick=“procedure name”></asp:LinkButton>


Command

<asp:Button id=“control name” runat=“server” Text=“text” CommandName=“command name” CommandArgument=“command value” OnCommand=“procedure name”></asp:Button>




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>


使用 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>



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>



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



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



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”)


使用 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” />



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



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


使用 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>


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


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”)


使用 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



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


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


Example - Continue


使用 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


Response.Redirect(The Web Page URL)

Example:

Response.Redirect(“ThankYou.aspx”)

Redirect MethodRedirect Method


使用 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


使用 AdRotator 控制元件 (Advertisement Rotator)

<asp:AdRotator id=“control name” runat=“server” AdvertisementFile=“The XML Advertisement File” Target=“The Advertisement Display Location”></asp:AdRotator>


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 : 繁體中文


使用 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 屬性


使用 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>


使用 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’>”



SelectDate 與 SelectedDates 屬性

SelectionMode=“Day”

SelectionMode=“DayWeek/DayWeekMonth”

SelectDate

SelectDates



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>



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>



Calendar 其它 Method

OnDayRenderOnSelectionChangedOnVisibleMonthChanged

DayRender 事件 (p.401)

chapter 8 building forms with web server controls

Documents

building forms

web forms page

web server controlschapter

label web server control

html server controls

text mylabel2

text boxes

text mylabel5