ASP.NET伺服器端控制項（class0617)

標籤：style   java   color   使用   檔案   資料   

ASP.Net服務端基本控制項介紹

ASP.Net服務端控制項是ASP.Net對HTML的封裝，在C#代碼中就可以用txt1.Text=‘abc’這種方式來修改input的值，ASP.Net會將服務端控制項轉成HTML代碼輸出給瀏覽器。服務端控制項是ASP.Net非常吸引初學者、非常容易上手的東西，也是最被人詬病的東西。物盡其用，服務端控制項在內網系統、互連網系統的後台部分等訪問頻率不高的地方用的還是很適合的。

（互連網公司，產品型公司(OA)） 在服務端控制項的標籤中寫的屬性如果不是控制項內建的屬性就會被原樣的輸出到用戶端

所有的ASP.Net大部分都是從Control、WebControl類繼承的，幾乎都有的成員有：

（1）ClientID，控制項在用戶端的Id，控制項在服務端的Id不一定等於用戶端HTML中的Id，比如說在ListView等控制項的模板中。因此如果要在用戶端通過JavaScript Dom、JQuery的getElementById、$(“#id”)來操作控制項的話最好不要直接寫服務端Id，而是$(‘#<%=txt1.ClientID%>’)。用JQuery事件設定滑鼠移到控制項上和從控制項移開的不同樣式。在使用者控制項中就可以看到ClientID和id的不同。UserControl、母片、ListView。推薦永遠用ClientID

（2）Visible 屬性， 控制項是否可見，如果Visible=False是不會轉到HTML中的，這和在HTML中給元素style.display=‘none‘效果是不一樣的。

（3）CssClass 屬性，控制項的樣式名，就是HTML中控制項的class屬性。也可以單獨修改BackColor、BorderStyle等屬性，但是不建議這麼做，因為會產生很多的內聯樣式，產生html尺寸大，不便於統一的修改。 （

4）Attributes，用來設定擷取控制項的額外屬性。和Dom中的setAttribute()、getAttribute()是一樣的。Button1.Attributes[“a1”] = “2.jpg”; HTML 事件在服務端看來也是屬性 Button1.Attributes[“onmouseover”] = “alert(‘hello’)”;

服務端控制項的額外屬性

說明：所有的服務端控制項不僅可以使用控制項定義的屬性，還可以使用額外的屬性，這些屬性包括控制項沒有封裝的HTML 屬性（比如onmouseover等瀏覽器端事件頁當作屬性），ASP.Net會將它不識別的屬性原封不動的渲染到用戶端。在代碼中也可以通過Attributes屬性設定額外屬性：

CheckBox1.Attributes["onmouseover"] = "alert(‘hello‘)";

ASP.Net服務端基本控制項1

1、Label控制項。Text屬性為顯示文本。AssociatedControlID屬性用來關聯一個控制項，如果為空白的話會展示為一個Span，如果指定為一個控制項的id，則會展示為一個HTML中的<Label>並且將for屬性設定為被關聯控制項的ClientId。

2、Literal控制項也是展示一段文本，但是Literal控制項不會渲染任何額外的標籤，就是將Text屬性的值展示出來而已。

3、TextBox控制項，文字框控制項。TextMode屬性取值SingleLine、MultiLine、Password，分別渲染為input(type=text)、textarea和input(type=password)。當AutoPostBack屬性為true的時候，使用者焦點離開TextBox就會造成頁面Post，實現原理就是講ASP.Net原理時的AutoPostBack。TextChanged事件(需要AutoPostBack=true才會修改後觸發，否則是頁面提交才觸發)，文本發生變化的時候事件觸發。ASP.Net中要提交表單的時候最好調用__doPostBack方法。

4、RadioButton控制項，對應為input(type=radio)，通過GroupName屬性進行分組

ASP.Net服務端基本控制項 Button

5、Button控制項。OnClientClick屬性，當使用者點擊按鈕的時候在瀏覽器端執行的代碼，注意OnClientClick是字串屬性，寫的代碼是JavaScript代碼，運行在瀏覽器端。<asp:Button ID="btnDel" runat="server" onclientclick="return confirm(‘真的要刪除嗎？‘)" Text="刪除" />

6、LinkButton，用法和Button差不多，區別就是Button控制項渲染為按鈕，而LinkButton渲染為超連結。不要用LinkButton來實現普通的超連結，因為LinkButton的href為一段javascript代碼，進行的是表單的Post，無法“在新視窗中開啟串連”。和講“行刪除”那個例子中href為javascript的超連結原理一樣。一般用Button就行，只有使用者要求“長成超連結好”採用LinkButton，就是一個在瀏覽器中渲染成超連結，服務端當成按鈕用的東西。 HyperLink：IsPostBack=False，沒有提交表單內容，沒有OnClick事件。

7、ImageButton控制項也和Button差不多，只不過是顯示為圖片，渲染為input(type=image)

8、Button、LinkButton、ImageButton等控制項都有CommandName、CommandArgument兩個屬性和Command事件，可以讓多個按鈕控制項共用一個Command事件處理函數，通過讀取事件對象e的CommandName、CommandArgument兩個屬性讀取被點擊按鈕上設定的這兩個參數來執行不同的操作。例子：編輯、刪除多行資料。這種用法在ListView等控制項中用的最多。

ASP.Net服務端基本控制項3

9、Panel控制項用來盛放一些控制項。如果設定GroupingText屬性那麼就渲染為含有<fieldset>的div標籤，也就是GroupBox效果，否則渲染為<div>

10、HyperLink控制項，超連結。和LinkButton不一樣(常考)，不會向伺服器端Post，就是一個超連結。NavigateURL：連結地址；Text：顯示文本。如果設定ImageUrl屬性則會顯示圖片超連結。

11、FileUpload控制項，檔案上傳控制項。渲染成input(type=file)。屬性：FileContent以流形式獲得上傳的檔案；FileName 上傳檔案名稱；HasFile Bool值，表示使用者是否選擇檔案，SaveAs方法用於將檔案儲存到磁碟的指定位置。漏洞：檔案上傳漏洞（上傳一個下載原始碼的aspx、Process.Start啟動格式化，建立管理員、開啟遠端桌面）。解決方案：只允許上傳指定類型檔案，上傳檔案夾不給執行許可權。

三種控制項

HTML控制項，ASP.Net把HTML控制項當成一般字元串渲染到瀏覽器端，不去檢查正確性、無法在伺服器端進行處理。

ASP.Net服務端控制項，經過ASP.Net高度封裝的控制項，使用簡單，運行在伺服器端，可以在服務端使用C#代碼進行操作，會渲染到用戶端為HTML控制項。

runat=server的HTML控制項。在HTML控制項的基礎上添加runat="server"，也是運行在伺服器端的，也可以服務端使用C#代碼進行操作，也會渲染到用戶端，不像ASP.Net服務端控制項那樣高度封裝，暴露的屬性大部分是普通HTML 屬性。和ASP.Net服務端控制項相比的好處是：當需要在伺服器端要對控制項進行操作的時候，如果控制項沒有被ASP.Net服務端控制項封裝的時候，用runat=server的HTML控制項很方便，runat=server的HTML控制項也會對虛擬路徑(~/)、id→ClientID進行處理，所以在使用虛擬路徑、UserControl中也可能會用到onmouseover="document.getElementById(‘<%=TextBox1.ClientID%>‘).value=‘哈哈‘;" 直接在屬性中有問題，會把<%直接輸出到瀏覽器端，因此不要在控制項的屬性值中寫<%%>。

伺服器控制項使用路徑的時候，中間有個 ~ 符號，它代表返回到當前網站應用程式程式的根目錄。

 

run=server控制項的好處，中庸！

1、不像ASP.Net服務端控制項那麼重量級、封裝的那麼多，程式員可以比較好的控制產生內容的品質。更容易讓美工來使用，因為美工不認得<asp:TextBox

2、相對於html控制項： 1）能夠在服務端代碼中操作控制項 2）能夠自動處理虛擬路徑～ 3）可以處理ClientID。 選擇的順序：HTML→run=server的HTML→ASP.Net服務端控制項

HTML控制項(runat=server)對應伺服器類型

a→HtmlAnchor；form→HtmlForm；head→HtmlHead；input→HtmlInputButton、HtmlInputCheckBox 、HtmlInputText 等；meta→HtmlMeta；table→HtmlTable；tr→HtmlTableRow；td→HtmlTableCell；title→HtmlTitle。未單獨封裝的標籤（比如div）或者自訂的標籤（比如mmm）對應類型為HtmlGenericControl。使用Attributes屬性操作未封裝的屬性。

不用單獨記憶，忘了的話，在aspx中弄一個標籤實驗一下就行。

服務端HTML控制項不像ASP.Net控制項那樣封裝的進階，比如ASP.Net控制項的BgColor屬性為Color類型，而HTML控制項的BgColor屬性則為字串類型，需要開發人員設定合法的值

資料繫結控制項簡介

資料繫結分為資料來源和資料繫結控制項兩部分，資料繫結控制項通過資料來源來獲得資料，通過資料來源來隔離資料提供者和資料使用者，資料繫結控制項通過資料來源來對資料進行修改，資料來源有SqlDataSource、AccessDataSource、ObjectDataSource、LinqDataSource、EntityDataSource、XmlDataSource等（SiteMapDataSource是SiteMap專用資料來源），由於大部分項目都不會頁面直連資料庫（因為違反最基本的分層原則），所以SqlDataSource、AccessDataSource不會使用，LinqDataSource、EntityDataSource也是只有在很極端的採用Linq、EF的項目中才會用，XmlDataSource是處理XML資料是才可能會用。ObjectDataSource是Web開發中應用最廣的資料來源，也能很容易的進行資料庫切換。

資料繫結控制項有列表資料繫結控制項（DropDownList、RadioButtonList、ListBox、CheckBoxList、BulletedList等）和

複雜控制項（DataGrid、GridView、DetailsView、FormView、ListView、Repeater、DataList等，GridView等都是ListView子集）。

複雜控制項中DataGrid已經不推薦使用，Repeater是最輕量級的組件，在互連網的前台用的最多，ListView是GridView、DetailsView、FormView、Repeater、DataList等這些控制項的大一統者，那些控制項的優點ListView全都有，會了ListView那些控制項也就會用了，因此資料繫結控制項主要講列表資料繫結控制項、Repeater和ListView，項目中會用到FormView 、GridView。

ObjectDataSource

ObjectDataSource用來將一個類做為資料來源，TypeName屬性為資料來源類的全名，有DeleteMethod(刪除方法)、InsertMethod(新增方法)、SelectMethod(查詢方法)、UpdateMethod(修改方法)等幾個屬性，分別為類中刪除、插入、查詢、更新資料的方法名，這些方法可能有參數，參數的值是通過DeleteParameters、UpdateParameters、InsertParameters等嵌套節點設定的。

ObjectDataSource訪問自己寫的普通類，在類上標註[DataObject] DataObjectMethod

手工編寫ObjectDataSource太麻煩，使用可視化介面來完成。將ObjectDataSource拖放到介面上，在右上方的智能標誌上選擇“配置資料來源”即可進行配置。資料來源類一般TypeNameAdapter類，選中類，選擇【下一步】，分別選擇對應的獲得、刪除、更新、插入資料的方法。

列表繫結控制項

DropDownList顯示來自於ObjectDataSource的資料，選擇資料來源（DataSourceID屬性）為剛才的ObjectDataSource，並且設定顯示欄位（DataTextField）和值欄位（DataValueField）即可。RadioButtonList、ListBox、CheckBoxList、BulletedList等也都是這麼用。

手工設定綁定，除了可以給控制項的DataSourceID屬性設定一個資料來源的方式進行資料繫結（推薦），還可以在代碼中通過代碼設定綁定（舊版本的ASP.Net只能這樣綁定，新版本中不推薦）。

用代碼綁定可以將任何實現了IEnumerable介面的對象綁定到資料繫結控制項。

ListBox2.DataSource = new object[]{3,5,6};

ListBox2.DataBind();

由於資料繫結控制項預設會將資料儲存在ViewState中，因此不會每次重新整理頁面都會重新載入資料，只有第一次需要載入（!IsPostBack）

由於代碼綁定在禁用ViewState的情況下有很多麻煩事，因此推薦用DataSourceID的方式，控制項會自己來判斷是否應該重新取得資料。

DropDownList原有“請選擇性別”和資料繫結項的共存：AppendDataBoundItems=“true”，把資料繫結的項加到後面。

由於資料繫結控制項預設會將資料儲存在ViewState中，因此不會每次重新整理頁面都會重新載入資料，只有第一次需要載入（!IsPostBack）

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ListBox2.DataSource = new object[] { 3, 5, 6 };

ListBox2.DataBind();

}

}

複雜資料繫結控制項

除了顯示Text、Value這樣簡單的列表資料繫結控制項之外，還有更複雜的資料繫結控制項的要求，比如要將人員資訊顯示在介面上，包含姓名、年齡、照片等。這時候就要使用Repeater、ListView等控制項。

Repeater（今日重點）

Repeater(foreach)用於對綁定資料來源中的資料進行遍曆顯示，每條資料以什麼格式顯示是由Repeater的<ItemTemplate>來決定的，模板會多次顯示，就像foreach， ItemTemplate 中相當於{}中的語句。<ItemTemplate>姓名：<%#Eval(“Name”)%><b>年齡：<%#Eval(“Age”)%></b><br /></ItemTemplate>。注意：%和#中間不能有空格。 <%#Eval("Name")%>表示在這個位置顯示當前實體物件的Name屬性，注意調用Eval、Bind這些資料繫結方法的時候要用#。

因為Eval就是將屬性顯示到指定的位置，因此也可以顯示到文字框中<ItemTemplate>姓名：<asp:TextBox runat="server" Text=‘<%#Eval("Name") %>‘ /></ItemTemplate>

注意不要寫成Text="<%#Eval(‘Name‘) %>" 因為<%%>中的是C#代碼，‘‘是字元，而不是字串 還可以用在伺服器控制項中<asp:TextBox Text=‘<%#Eval("Name") %>‘ runat="server"></asp:TextBox>

練習：結合JQuery實現選中行高亮（把Repeater放到table標籤中,ItemTemplate是tr）

 

 

建強型別DataSet

之前別忘了產生成功，放ObjectDataSource，設定綁定

Repeater綁定到ObjectDataSource

設定ItemTemplate

 

Repeater其他模板

1、<AlternatingItemTemplate>，設定隔行的不同顯示風格，如果設定<AlternatingItemTemplate>，則奇數行用<ItemTemplate>模板，偶數行用<AlternatingItemTemplate>模板

<AlternatingItemTemplate><asp:TextBox BackColor="Red" ID="TextBox2" Text=‘<%#Eval("Name") %>‘ runat="server"/></AlternatingItemTemplate> 。設定隔行變色是為了防止資料太多看串列。

2、HeaderTemplate、FooterTemplate：頭部、尾部的模板，分別顯示在所有資料的前面和後面。

3、SeparatorTemplate ：兩項資料之間的分隔字元，比如分行符號

案例

案例：顯示人員資訊，姓名、年齡、照片(網站中都是存的圖片路徑 1、ItemTemplate裡面用服務端控制項： 1）綁定的屬性必須用單引號myname=‘<%#Eval("Name") %>‘ 。而HTML控制項則單引號、雙引號都行。 2）屬性值裡要麼就是普通的值，要麼就是整個綁定運算式，不能混著 ，比如ImageUrl=‘images/<%#Eval("ImgPath") %>‘。HTML控制項就沒有這個問題。 能不用服務端控制項就不用 可以這樣處理<%#"img/"+Eval("APic")%> 練習：顯示文章列表。id、標題、作者、連結地址。如果標題過長則只顯示前10個字並且加省略符號（不用樣式實現）不要在aspx中寫過於複雜的C#代碼，如果代碼比較複雜，想辦法提取到cs中 練習：顯示友情連結清單，欄位：網站名、超連結、友情連結類型（文本、圖片）、Logo圖片地址。 文本友情連結、圖片友情連結分別展示