C#進階之路——7.ASP.NET經常使用控件css
基礎:html
ASP.Net控件在「工具箱」中可分爲:瀏覽器
} 標準控件服務器
} 數據控件框架
} 驗證控件asp.net
} 導航控件工具
} 登陸控件佈局
} WebParts控件post
} 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#代碼進行操做,會渲染到客戶端。 |
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; //未單獨封裝的標籤(好比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 其餘控件:用於某些特定用途的專用控件。 |
添加服務器控件 |
一、在「設計」視圖中用可視化方式添加; 二、在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 |
|
經常使用屬性: |
||
.TextBox: |
Mode屬性變換樣式 |
|
經常使用屬性: 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個常見表單元素 |
|
文本類: |
||
參考:
https://www.cnblogs.com/huangf714/p/5876228.html