HTML服務器控件
HTML服務器控件時HTML元素的一種演變，HTML元素包含使其自身服務器上可見並可編程的屬性。默認情況下，服務器無法使用Web窗體頁上的HTML元素，只有在客戶端瀏覽器可以使用，這些元素被視為傳遞給瀏覽器的不透明文本。但是，通過設置HTML的runat=“Server”，可以將HTML元素轉換為HTML服務器控件，這樣就可以在服務器端進行使用。
Web服務器控件
Web服務器控件時微軟在ASP.NET中新提出來的，工作原理大致如下：由客戶端發送命令到服務器端請求打開某個頁面，服務器的IIS根據請求打開頁面的擴展明來判斷時采用哪個組件來進行解析，若擴展名是htm或html的文件則不解析直接返回，若擴展名是.aspx文件則調用aspnet_isapi.dll來解析，解析的文件形成HTML流之后返回客戶端，客戶端的瀏覽器將HTML流顯示出來。Web服務器控件在解析過程中被解析成對應的HTML控件元素。
Asp.NET中既可以也有HTML控件，也可以有Web服務器控件，他們的運行方式是不同的
一、 HiddenField控件
HidenField控件控件主要用於存儲非顯示值的隱藏字段，該控件能夠將需要隱藏的數據保存在Value屬性中，並且向服務器端發送Value屬性值。
界面效果如下：
前台代碼如下：
<asp:Label ID="Label1" runat="server" Text="請輸入一個值，並點擊提交按鈕，將其存入隱藏控件"></asp:Label> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="btnIn" runat="server" Text="存入" OnClick="btnIn_Click" /> <asp:Button ID="btnOut" runat="server" Text="獲取" OnClick="btnOut_Click" /> <br /> <asp:Label ID="lblInfo" runat="server" Text="隱藏控件的值是："></asp:Label> <asp:HiddenField ID="HiddenField1" runat="server" />
后台代碼如下：
protected void btnIn_Click(object sender, EventArgs e) { HiddenField1.Value = TextBox1.Text; } protected void btnOut_Click(object sender, EventArgs e) { lblInfo.Text = "隱藏控件的值是：" + HiddenField1.Value ; }
二、HypeLink控件
HyperLink控件可以使一個ASP.NET頁面鏈接到另一個頁面，該控件還可以將文本或圖像顯示為鏈接。
界面效果如下：
前台代碼如下：
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.xiecan.cc">我的個人主頁</asp:HyperLink> <br /> <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/02.GIF" NavigateUrl="~/Default.aspx">HyperLink</asp:HyperLink>
三、 FileUpload控件
在ASP.NET中，有一個用戶上傳文件的FileUpload控件，使用起來非常方便。該控件可以讓用戶更容易地瀏覽和選擇用於上傳的文件，它包含一個瀏覽按鈕和用於輸入文件名的文本框
前台代碼如下：
<asp:FileUpload ID="FileUpload1" runat="server" /> <br /> <asp:Button ID="Button1" runat="server" Text="提交" onclick="Button1_Click" /> <br /> <asp:Image ID="Image1" runat="server" Height="400" />
后台代碼如下：
protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { string imgPath = FileUpload1.FileName; if (imgPath.EndsWith(".jpg") || imgPath.EndsWith(".bmp")) { string uploadPath = Server.MapPath("~/imgs/" + imgPath); FileUpload1.SaveAs(uploadPath); Image1.ImageUrl = "~/imgs/" + imgPath; //Image1.ImageUrl = uploadPath; } else { this.ClientScript.RegisterStartupScript(this.GetType(), "提示信息", "<script>alert('暫不支持的圖片格式！')<script>"); } } else { Response.Write("<script>alert('請選選擇合適的圖片！')</script>"); } }
四、CheckBoxList控件
CheckBoxList為復選框控件，該控件可以設置多個選項的復選框組。如果控件具有多個子選項，可以通過ListItem來創建。
界面效果如下：
前台代碼如下：
<asp:Label ID="Label1" runat="server" Text="愛好："></asp:Label> <asp:CheckBoxList ID="cblLove" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" AutoPostBack="True" onselectedindexchanged="cblLove_SelectedIndexChanged"> <asp:ListItem Selected="True">足球</asp:ListItem> <asp:ListItem>籃球</asp:ListItem> <asp:ListItem>跑步</asp:ListItem> </asp:CheckBoxList> <br /> <asp:Button ID="Button1" runat="server" Text="提交" onclick="Button1_Click" /> <asp:Literal ID="Literal1" runat="server"></asp:Literal>
后台代碼如下：
protected void Button1_Click(object sender, EventArgs e) { string str = "你選擇的愛好是："; foreach (ListItem item in cblLove.Items) { if (item.Selected) { str += item.Value + "、"; } } this.Literal1.Text = string.Format("<script>alert('{0}');</script>", str); } protected void cblLove_SelectedIndexChanged(object sender, EventArgs e) { //需要啟用AutoPostBack屬性 int index = cblLove.SelectedIndex;//只能獲取最靠前的一個選項 }
五、 RadioButtonList控件
RadioButtonList控件與CheckBoxList控件具有眾多相似之處，只不過CheckBoxList是復選框而RedioButtonList是單選。它們都可以使用Items屬性來設置子選項；每個子選項都具有索引值，索引開始值都是0；使用Selected屬性來判斷子選項是否被選中。
界面效果如下：
前台代碼如下：
<asp:Label ID="Label1" runat="server" Text="性別："></asp:Label> <asp:RadioButtonList ID="rblSEX" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" AutoPostBack="True" onselectedindexchanged="rblSEX_SelectedIndexChanged"> <asp:ListItem Selected="True">男</asp:ListItem> <asp:ListItem >女</asp:ListItem> </asp:RadioButtonList> <br /> <asp:Button ID="Button1" runat="server" Text="提交" onclick="Button1_Click" />
后台代碼如下：
protected void Button1_Click(object sender, EventArgs e) { string str = "你選擇的性別是：" + rblSEX.SelectedValue; Response.Write(string.Format("<script>alert('{0}');</script>", str)); }
六、 DropDownList控件
此控件是允許用戶從下拉列表中選擇一個選項的控件。
我們平時上網時，在一些網站上經常會注冊一些個人信息，通常情況下會讓我們選擇所在的省/市信息，當我們選擇相應的省份時，對應的市信息就會出現在下拉框中，方便用戶的選擇。下面我們久通過示例來模仿一下這種功能的實現。
界面效果如下：
前台代碼如下：
<asp:Label ID="Label1" runat="server" Text="請選擇省份："></asp:Label> <asp:DropDownList ID="ddlPrice" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlPrice_SelectedIndexChanged"> <asp:ListItem Text="--請選擇--"></asp:ListItem> </asp:DropDownList> <br /> <asp:Label ID="Label2" runat="server" Text="請選擇城市："> </asp:Label><asp:DropDownList ID="ddlCity" runat="server"> <asp:ListItem Text="--請選擇--"></asp:ListItem> </asp:DropDownList> <br /> <asp:Button ID="Button1" runat="server" Text="提交" OnClick="Button1_Click" />
后台代碼如下：
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ddlPrice.Items.Add("河南"); ddlPrice.Items.Add("河北"); } } protected void Button1_Click(object sender, EventArgs e) { Response.Write(string.Format("<script>你選擇的地址是{0}省{1}市</script>", ddlPrice.SelectedValue, ddlCity.SelectedValue)); } protected void ddlPrice_SelectedIndexChanged(object sender, EventArgs e) { ddlCity.Items.Clear(); if (ddlPrice.SelectedValue == "河南") { ddlCity.Items.Add("鄭州"); ddlCity.Items.Add("焦作"); ddlCity.Items.Add("許昌"); ddlCity.Items.Add("開封"); } else if (ddlPrice.SelectedValue == "河北") { ddlCity.Items.Add("石家庄"); ddlCity.Items.Add("廊坊"); ddlCity.Items.Add("滄州"); ddlCity.Items.Add("邯鄲"); } }
-----------------------------------------------------------------------------------
在生活中很多事物都是由一個又一個的小部件構成的，比如手機、電腦、家具、汽車等等，就以汽車為例，我們都知道一輛汽車由成千上萬個零部件構成的，如：發送機、變速箱、底盤等等，通過這些零件的組裝我們便看到了最終呈現在我們面前的靚麗的豪車。那么我們通過ASP.NET開開發Web應用程序也是如此，我們一個頁面基本上也是通過各種各樣的服務器控件來有序地排列和組合來實現的。
<asp:Label ID="Label1" runat="server" Text="性別："></asp:Label> <asp:RadioButtonList ID="rblSEX" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" AutoPostBack="True" onselectedindexchanged="rblSEX_SelectedIndexChanged"> <asp:ListItem Selected="True">男</asp:ListItem> <asp:ListItem >女</asp:ListItem> </asp:RadioButtonList> <br /> <asp:Button ID="Button1" runat="server" Text="提交" onclick="Button1_Click" />