一、簡單控件
1、Label（作用：顯示文字）
Web中：
<asp:Label ID="Label1" runat="server" Text="Label" BorderColor="Black" BorderStyle="Solid" BorderWidth="5px"></asp:Label>
編譯完成后的元素時span（html）
<span id="Label1" style="display:inline-block;border-color:Black;border-width:5px;border-style:Solid;">Label</span>
屬性：①BackColor：控件背景色 ；
②BorderColor：控件邊框顏色；
③BorderStyle：控件邊框樣式；
④BorderWidth：控件邊框寬度
2、Literal（作用：顯示文字）
Web中：
<asp:Literal ID="Literal1" runat="server" Text ="編譯后不會形成什么元素"></asp:Literal>
編譯后不會形成什么元素（一般用來后台輸出js代碼）
</div>
編譯后不會形成什么元素
3、TextBox（文字輸入框）
屬性：①TextMode：文本礦的行為模式，有以下幾種模式：
★默認SingleLine：單行。
Web中：
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
編譯后：
<input name="TextBox1" type="text" id="TextBox1" />
★Password：密碼框
Web中：
<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>
編譯后：
<input name="TextBox1" type="password" id="TextBox1" />
★Multiline：文本域
Web中：
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
編譯后textarea：
<textarea name="TextBox1" rows="2" cols="20" id="TextBox1">
②warp：換行（true：換行；false：不換行）
③Enabled：控件啟用狀態
④Readonly：是否可以更改控件中的文本
⑤Maxlength：限制最長長度；比如：密碼限制多少位，就可以更改此屬性
4、按鈕類
（1）Button：
Web中：
<asp:Button ID="Button1" runat="server" Text="Button" />
編譯后submit：
<input type="submit" name="Button1" value="Button" id="Button1" />
屬性：Onclintclick：比如：在onclintclick后面加上alert("nihao");
編譯后是：
<input type="submit" name="Button1" value="Button" onclick="alert("nihao");" id="Button1" />
注：
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick='if(confirm("是否要提交？")){return false;}' />
Confirm()：
confirm() 方法用於顯示一個帶有指定消息和OK 及取消按鈕的對話框。
如果用戶點擊確定按鈕，則confirm() 返回true。如果點擊取消按鈕，則confirm() 返回false。
在用戶點擊確定按鈕或取消按鈕把對話框關閉之前，它將阻止用戶對瀏覽器的所有輸入。在調用confirm() 時，將暫停對JavaScript 代碼的執行，在用戶作出響應之前，不會執行下一條語句。
下面我們通過這兩個小例子，來了解一下它的使用方法吧：
<head> <title>confrim 的使用方法</title> <script type="text/javascript"> function clear1() { if(confirm("確定要清空數據嗎？")) { document.main.text1.value=""; } } </script> </head> <boty> <form name="main"> <input type="text" name="text1"/> <input type="button" name="submit" value="數據清空" onclick="return clear1()"/> </form> </body>
（2）ImageButton：圖片按鈕
屬性同Button類似，多以個ImageUrl屬性，此屬性用於存放圖片地址。
（3）LinkButton：被編輯成超鏈接模樣的按鈕，
注：①HyperLink：超鏈接控件（不經常用此方式見超鏈接）
②邊框注意：邊框顏色——邊框樣式——邊框粗細
二、復合控件
首先建兩個類，下面的復合控件將會用到！
實體類：
/// <summary> /// Nation 的摘要說明 /// </summary> public class Nation { public Nation() { // // TODO: 在此處添加構造函數邏輯 // } private string _NationCode; /// <summary> /// 民族編號 /// </summary> public string NationCode { get { return _NationCode; } set { _NationCode = value; } } private string _NationName; /// <summary> /// 民族名稱 /// </summary> public string NationName { get { return _NationName; } set { _NationName = value; } } }
數據訪問類：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; /// <summary> /// NationData 的摘要說明 /// </summary> public class NationDA { SqlConnection conn = null; SqlCommand cmd = null; public NationData() { conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=123"); cmd = conn.CreateCommand(); } /// <summary> /// 返回全部Nation表數據集合 /// </summary> /// <returns></returns> public List<Nation> Select() { List<Nation> list = new List<Nation>(); cmd.CommandText = "select *from Nation"; conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { while (dr.Read()) { Nation n = new Nation(); n.NationCode = dr["NationCode"].ToString(); n.NationName = dr["NationName"].ToString(); list.Add(n); } } conn.Close(); return list; }
（一）DropDownList：下拉列表框
Web顯示：
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
編譯后select：
<select name="DropDownList1" id="DropDownList1"> </select>
1、給DropDownList寫入數據（兩種方法）——放在Page_Load中
法一：與winform中給下拉表框填數據類似（DataSource）
protected void Page_Load(object sender, EventArgs e) { DropDownList1.DataSource = new NationData().Select();//數據源指向 DropDownList1.DataTextField = "NationName";//顯示字段綁定 DropDownList1.DataValueField = "NationCode";//隱藏字段綁定 DropDownList1.DataBind(); }
法二：Foreach遍歷，同時加上默認選中
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { List<Nation> Nlist = new NationData().Select(); foreach (Nation n in Nlist) { ListItem li = new ListItem(n.NationName, n.NationCode); if (li.Value == "N003") { li.Selected = true; } DropDownList1 . Items.Add(li); } } }
編譯后顯示：
<select name="DropDownList1" id="DropDownList1"> <option value="N001">漢族</option> <option value="N002">滿族</option> <option selected="selected" value="N003">藏族</option> <option value="N004">彝族</option> </select>
注：加一個Button和Label，點擊按鈕時，將取到的value或text顯示在label上。下面用到
2、取DropDownList的Value或者text（只能取一條數據的value或text）
void Button1_Click(object sender, EventArgs e) { Label1.Text = DropDownList1.SelectedItem.Value; //Label1.Text = DropDownList1.SelectedItem.Text; }
3、取多條數據（ListBox控件）
ListBox控件（此控件可以取一條或多條數據）——編譯后也是select（下拉列表框）
屬性：SelectionMode（列的選擇模式）——single：單行，只單選；Multiple：多行，可多選。
ListBox綁定數據的方法同DropDownList一樣。
ListBox取數據的方法：
void Button1_Click(object sender, EventArgs e) { string end = ""; foreach (ListItem li in ListBox1.Items) { if (li.Selected) { end += li.Text + " - " + li.Value + ","; } } Label1.Text = end; }
（二）CheckBoxList：多選列表
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatLayout="UnorderedList"></asp:CheckBoxList>
屬性：①RepeatColumns：一行最多顯示多少個數據
②RepeatDirection——Vetical：垂直顯示 ； Horizontal：水平顯示
④RepeatLayout：Table → 用table布局
Flow → 用span布局
UnorderedList → 無序列表
OrderedList → 有序列表
用法同DropDownList和ListBox！
（三）RadioButtonList
<asp:RadioButtonList ID="RadioButtonList1" runat="server"></asp:RadioButtonList>
屬性同CheckBoxList類似，用法同DropDownList和ListBox！
★控件中，name用於服務端 ， id用於客戶端