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 相同，只是沒有布局