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

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#代碼進行操做,會渲染到客戶端。
不像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      其餘控件:用於某些特定用途的專用控件。

添加服務器控件

一、在「設計」視圖中用可視化方式添加;

二、在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控件:

佈局:

divtableulli

表單:

formlabeltextboxinput

文件上傳:

fileupload

命令:

ButtonLinkButton

 

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

http://www.javashuo.com/article/p-aaodxatg-cs.html

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

相關文章
相關標籤/搜索