Webform（簡單控制項、複合控制項）

標籤：

一、簡單控制項：

1.label控制項

<asp:Label ID="Label1" runat="server" Text="賬  號:"></asp:Label>

被編譯為：

<span id="Label1" >賬  號:</span>

屬性：

Text：文本
ForeColor：字型顏色
Visible：是否可見
CssClass：即HTML的class

2.Literal

類似label，但它不會被編譯，只會在位置上將Text內容完全展示出來，可以往它的Text屬性中添加js代碼

3.Textbox

不一定被編譯成什麼元素，它被編譯成什麼表單元素取決於TextMode，它能夠完成form12個表單元素中的文本類（除隱藏欄位），它還能完成Webform提供的一些元素

（1）文字框

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

它被編譯為：

<input name="TextBox1" type="text" id="TextBox1" />

（2）密碼框

<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>

它被編譯為：

<input name="TextBox2" type="password" id="TextBox2" />

（3）文本域

<asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine"></asp:TextBox>

它被編譯為：

<textarea name="TextBox3" rows="2" cols="20" id="TextBox3"></textarea>

（4）TextMode屬性

color：只能選擇顏色

datetime-local：可選擇時間，輸入時間，有日曆

number：只能輸入數字

4.按鈕類

普通按鈕和重設按鈕在Webform沒有提供按鈕

<input type="button" value="按鈕1" />
<input type="reset" value="重設" />

（1）Button

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

它被編譯為：

 <input type="submit" name="Button1" value="Button" id="Button1" />/*提交按鈕*/

（2）ImageButton

<asp:ImageButton ID="ImageButton1" runat="server" />

它被編譯為：

 <input type="image" name="ImageButton1" id="ImageButton1" src="" />/*圖片按鈕*/

（3）LinkButton 超連結按鈕

（4）按鈕的OnClientClick是執行用戶端指令碼（js），用戶端（js）執行優先順序高於服務端（C#）

5.隱藏欄位

HiddenField控制項

<asp:HiddenField ID="HiddenField1" runat="server" />

它被編譯為：

<input type="hidden" name="HiddenField1" id="HiddenField1" />

 二、複合控制項

1.選項按鈕：
HTML編碼方式：

<input type="radio" name="" checked="checked"/>

Webform：RadioButton 不建議使用
RadionButtonList
使用資料庫取值步驟：
（1）資料繫結

List<Nation> list = new NationData().Select();

方法1：

RadioButtonList1.DataSource = list;//資料來源            RadioButtonList1.DataTextField = "NationName";//顯示值            RadioButtonList1.DataValueField = "NationCode";//實際值            RadioButtonList1.DataBind();

方法2：

foreach (Nation n in list)            {                ListItem li = new ListItem(n.NationName, n.NationCode);                RadioButtonList1.Items.Add(li);            }

（2）設定預設選中項

RadioButtonList1.SelectedIndex = 0;或  RadioButtonList1.SelectedValue = "N001";

（3）取值
添加一個按鈕點擊事件，事件中寫：

 Label1.Text = "";        ListItem li = RadioButtonList1.SelectedItem;        Label1.Text += li.Value + "," + li.Text;

四、布局
RepeatDirection:項的布局方式 Vertical 縱向 Horizontal：橫向
RepeatColumns:規定項的列數
RepeatLayout：項的布局方式 Table Flow （UnorderedList：無序列表 OrderedList：有序列表 前兩種屬性無效）
2.複選按鈕
HTML編碼方式：

<input type="checkbox" name="" checked="checked"/>

Webform：
CheckBox 不建議使用
CheckBoxList
使用資料庫取值步驟：
（1）資料繫結

遍曆資料集合，ListItem

 foreach (Nation n in list)            {                ListItem li = new ListItem(n.NationName, n.NationCode);                CheckBoxList1.Items.Add(li);            }

（2）設定預設選中項
在資料添加的時候進行判斷，設定Selected屬性

foreach (Nation n in list)            {                ListItem li = new ListItem(n.NationName, n.NationCode);                if (li.Value == "N001" || li.Value == "N003")                    li.Selected = true;                CheckBoxList1.Items.Add(li);            }

3）取值
遍曆所有的項，判斷如果是選中狀態那麼就把值取出來儲存

Label1.Text = "";        foreach (ListItem li in CheckBoxList1.Items)        {            if (li.Selected)            {                Label1.Text += li.Value + "," + li.Text + "|";            }        }

四、布局
RepeatDirection:項的布局方式 Vertical 縱向 Horizontal：橫向
RepeatColumns:規定項的列數
RepeatLayout：項的布局方式 Table Flow （UnorderedList：無序列表 OrderedList：有序列表 前兩種屬性無效）
3.下拉式清單
HTML編碼方式：

<select name="" id="" size=""   multiple="multiple">     <option></option>     <option></option> </select>  

（1）當它為一行可選菜單時：
Webform中使用DropDownList
使用資料庫取值步驟與RadionButtonList相同，只是沒有布局
（2）當它為列表時
Webform使用ListBox按鈕，在屬性中可選擇單選還是多選
使用資料庫取值步驟與CheckBoxList 相同，只是沒有布局

Webform（簡單控制項、複合控制項）