C#進階之路——7.ASP.NET常用控件

C#進階之路——7.ASP.NET常用控件

基礎：

ASP.Net控件在“工具箱”中可分為:

}  標准控件

}  數據控件

}  驗證控件

}  導航控件

}  登錄控件

}  WebParts控件

}  AJAX Extensions控件

}  報表控件

}  HTML控件(客戶端控件)

 

ASP.Net 控件應用類型
HTML控件	ASP.Net把HTML控件當成普通字符串渲染到瀏覽器端，不去檢查正確性、無法在服務器端進行處理。
	<input111 type="text" name="name" value=" " /> //自己寫的錯誤的HTML控件不會在瀏覽器顯示，也不會報錯。   //客戶端： <input type="text" name="name" value=" " id="text1"/> //服務器端： protected void Page_Load(object sender, EventArgs e) {         text1.Text = "abc";  //報錯，名稱"text1"不存在 }
ASP.Net封裝的服務端控件	經過ASP.Net高度封裝的控件，使用簡單，運行在服務器端，可以在服務端使用C#代碼進行操作，會渲染到客戶端為HTML控件。
	<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 在瀏覽器端渲染為下面這句： <input name="TextBox1" type="text" id="TextBox1" />
runat="server"的HTML控件	在HTML控件的基礎上添加 runat="server"，運行在服務器端，可以服務器端使用C#代碼進行操作，會渲染到客戶端。 不像ASP.Net服務端控件那樣高度封裝，暴露的屬性大部分是普通HTML屬性。 和ASP.Net服務端控件相比的好處是： 當需要服務器端要對控件進行操作的時候， 如果控件沒有被ASP.Net服務端控件封裝的時候，用runat="server"的HTML控件很方便， runat="server"的HTML控件也會對虛擬路徑、id -> ClientID 進行處理，所以在使用虛擬路徑、UserControl中也可能會用到。
	protected void Page_Load(object sender, EventArgs e) {      //ASP.Net服務器端控件高度封裝，設置樣式      TextBox1.BackColor = Color.Red;   //設置背景顏色      TextBox1.BorderStyle = BorderStyle.Dotted; //設置邊框      //runat="server"的HTML控件沒有封裝，設置樣式方式不統一      //Text1為文本框id，td1為表格的單元格id      Text1.Value = "aaa";  //設置文本框內的值      td1.Align = "center";      td1.BgColor = "red";      td1.Width = "50%";    } ---------------------------------- //Text1能按原始的方式設置樣式 <input type="text" style="border:dotted;" runat="server" id="Text1"/>
	<a> -> HtmlAnchor；<form> -> HtmlForm；head -> HtmlHead； input -> HtmlInputButton、HtmlInputCheckBox、HtmlInputText等； meta -> HtmlMeta；table -> HtmlTable；tr -> HtmlTableRow； td -> HtmlTableCell；title -> HtmlTitle。 //未單獨封裝的標簽（比如div）對應類型為HtmlGenericControl。 //使用Attributes屬性操作未封裝的屬性。
注意：在JS腳本中取第一種和第三種服務器端控件的ID方法： document.getElementById("<%=Button1.ClientID %>"); document.getElementById("<%=TextBox1.ClientID %>");

 

封裝的服務器控件
由System.Web.UI.WebControls派生 必須在<form > 與</form>之間
服務器控件兩個重要的屬性：	runat=“server” ID控件唯一的名字
Web服務器控件有兩種類型：	l      內部控件：內部控件從功能上可分為：文本輸入控件、控制權轉移控件、選擇控件和容器控件。 l      其他控件：用於某些特定用途的專用控件。
添加服務器控件	1、在“設計”視圖中用可視化方式添加； 2、在aspx頁面用HTML語句添加： <asp:控件類型名稱 ID="控件標識名" runat="server" 其他屬性 /> 或 <asp:控件類型名稱 ID="控件標識名" runat="server" 其他屬性><asp:/控件類型名稱>
添加服務器控件的事件	//ASP.NET使用事件驅動的模型，某對象的程序代碼只在特定事件發生時執行 //常用事件如：頁面加載Page_Load、按鈕點擊Button_Click //創建方式：點擊按鈕 //Aspx文件中 protected void Button1_Click(object sender, EventArgs e) { } //Aspx.cs文件中 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
服務器控件的基本屬性	//添加到頁面上的服務器控件都顯示為默認的樣式 //要改變頁面上控件的外觀,一種方法是更改該控件的屬性,另一種方法是使用層疊樣式表改變控件的樣式。

 

常見HTML控件：
布局：	div，table，ul，li
表單：	form，label，textbox，input，
文件上傳：	fileupload
命令：	Button，LinkButton

 

asp.net常用標准控件：
.Label：		被編譯成span
常用屬性： 　　Text--顯示的文本 　　ForeColor--文本顏色 　　Visible--隱藏 　　CssClass--css中的class，類
.TextBox:		Mode屬性變換樣式
常用屬性： 　　TextMode--SingleLine屬性--單行 　　Password屬性--只能輸入密碼框 　　MultiLine屬性--顯示下拉列表;多行 　　Color--拾色器文本框 　　Number--右側上下箭頭加減數字，比如淘寶買東西選擇件數。 　　Search--右側帶關閉，點擊可清空文本內容顯示記錄過的下拉內容 　　Time-- “--：--”，限制時間格式 　　Week--“----年第--周”，限制年周 　　Date-- 年月日格式 　　Datetime --暫時沒研究出來 　　DateTimeLocal--日期加時間 　　Month--“----年--月”格式 　　Range--可以當亮度條用 　　MaxLenght--文本框中最多允許的字符數 　　ReadOnly--是否能改變文本框字體 　　Rows--多行文本框中的行數 　　Warp--指示文本框中的內容是否換行
HyperLink：		超鏈接文本，被編譯成<a href>
常用屬性： 　　ImageUrl--顯示此鏈接圖像的URL 　　NavigateUrl--指向的URL 　　Target URL--URL的目標框架，_blank表示新窗口 　　Text：鏈接顯示的文本
Button		按鈕，被編譯成<input type="button"/>或其他類型
LinkButton：		帶超鏈接的按鈕，實現具有超鏈接樣式的按鈕，
重要屬性： 　　Clink--單擊時發生的服務器事件 　　OnClientClick--單擊時的客戶端事件 　　postbackUrl--單擊時從當前頁發送到網頁的URL，默認空即本頁 　　Text--按鈕上的文本
ImageButton：		圖片按鈕，被編譯成<input type="image" src="" />
重要屬性： 　　AlternateText--圖像不可用時空間中顯示的替代文本 　　ImageUrl--獲取圖像位置
RadioButton：		點選按鈕，被編譯成<input type="radio" />
重要屬性： 　　Checked--布爾值，規定是否選定單選按鈕 　　AutoPostBack--布爾值，在Checked屬性被改變后是否立即傳回表單，默認false 　　GroupName--該單選按鈕所屬控件組的名稱（一組即互斥）
CheckBox：		復選框控件，被編譯成<input type="checkbox" /> 沒有GroupName，只能用來被復選的。
重要屬性： 　　Text--出現在控件旁邊的文本 　　Checked--布爾值，規定是否選定單選按鈕 　　AutoPostBack--布爾值，在Checked屬性被改變后是否立即傳回表單，默認false 　　GroupName--該單選按鈕所屬控件組的名稱（一組即互斥）
RadioButtonList：	以列表方式呈現的選項
CheckBoxList：	復選框列表
重要屬性： 　　DataSourse--填充該列表列表項的數據源 　　Items--獲得列表中控件的項目集合 　　RepeatColumns--控件中顯示的列數 　　RepeatDirection--指示該控件是垂直顯示還是水平顯示
ListBox：	列表框，在一個滾動窗口中垂直顯示一系列項目列表，與DropDownList的區別是用戶無需操作就可以看到所有選項。
CheckedListBox	從列表中選擇，示一個可滾動的項列表，每項旁邊都有一個復選框。
DropDownList：	下拉框
重要屬性： 　　DataMember--要綁定的表的名稱 　　DataSourse--填充該列表列表項的數據源 　　DataSourseID--提供數據源組件的ID 　　DataTextField--提供列表的文本的數據源字段名稱 　　DataValueField--提供一個列表項的數據源字段的名稱 　　Items--列表控件中的項目集合 　　SelectedIndex--獲得或設置列表中被選項的索引 　　SelectedItem--獲得列表中的被選項 　　SelectedValue--獲得列表中被選項的值 　　SelectedIndexChanged--當列表控件選擇項發生變化時觸發
.Imagle：		圖像
重要屬性： 　　AlternateText--為圖像提供替代文本 　　DescriptionUrl--提供指向包含該圖像詳細描述的頁面的連接 　　ImageUrl--指定圖片URL
Table：		表格
form		表單，12個常見表單元素
文本類： <input type="text" /> - 文本框 <input type="password" /> - 密碼框 <textarea></textarea> - 文本域 <input type="hidden" /> - 隱藏域 按鈕類： <input type="button" value="按鈕" /> -按鈕 <input type="submit" value="提交" /> -提交按鈕，刷新 <input type="reset" value="重置" /> -重置按鈕 <input type="image" src="" /> -圖片按鈕 選擇類： <input type="radio" /> -單選 <input type="checkbox" /> -多選 <select> -下拉列表 <option></option> -列表內容 </select> <input type="file" /> -提示警告

參考：

https://www.cnblogs.com/huangf714/p/5876228.html

https://www.cnblogs.com/rxhuiu/p/9177480.html

https://www.cnblogs.com/Aaxuan/p/6081157.html