前言：從這篇部落格我們開始學習asp.net的伺服器控制項，雖然現在的IT界對asp.net的控制項有好多種態度，但是任何一件事物或者事情只要發生都是有其發生的必然性，我們不能否定這種控制項，只是看這種控制項使用在那種情況下，下面我們就詳細的說明一下這些控制項的使用以及它們的原理。
(1) ASP.NET服務端控制項是ASP.NET對HTML的封裝，在C#代碼中就可以用txt.Text=’韓迎龍’這種方式來修改input的值，ASP.NET會將服務端控制項渲染成HTML代碼輸出給瀏覽器，服務端控制項是ASP.NET非常吸引初學者，非常容易上手的東西，也是最被人詬病的東西，物盡其用，服務端控制項在內網系統，互連網系統的後台部分等訪問頻率不高的地方用還是很合適的。
(2) 所有的ASP.NET大部分是從Control，WebControl類繼承的，幾乎所有的成員有：
1) clientID，控制項在用戶端的ID,控制項在服務端的ID不一定等於用戶端HTML中的ID，比如：在ListView等控制項的模版中，因此如果要在用戶端通過JavaScript，Dom，Jquery的getElementById，$(“#Id”)來操作控制項的話最好不要直接寫服務端的ID，而是$(‘#<%=txt.ClinetID%>’)。用Jquery事件設定滑鼠移到控制項上和從控制項移開的不同樣式，在使用者控制項中就可以看到ClientID和ID的不同。
1) 拖放一個TextBox控制項，滑鼠放到控制項變紅，離開恢複原狀
1 <script type="text/javascript"> 2 3 function Myonload() { 4 5 document.getElementById('<%=txtRed.ClientID %>').onmouseover = function () { 6 7 this.style.background = 'Red'; 8 9 }10 11 document.getElementById('<%=txtRed.ClientID %>').onmouseout = function () {12 13 this.style.background = '';14 15 }16 17 }18 19 </script>20 21 <body onload="Myonload()">22 23 <asp:TextBox ID="txtRed" runat="server"></asp:TextBox>
2) 建立一個MyUserCtrl.ascx使用者控制項，拖放一個TextBox和Button控制項，另一個寫監聽事件：
<script type="text/javascript">document.getElementById('<%=btnOK.ClientID %>').OnClick = function (){ document.getElementById('<%=txtShow.ClientID %>').value = "Hello,Kencery"; }</script><asp:TextBox ID="txtShow" runat="server"></asp:TextBox><asp:Button ID="btnOK" runat="server" Text="Button" />
註：將使用者控制項拖放到.aspx項目中進行驗證
2) Visible屬性，控制項的是否可見，如果Visible=False是不會渲染到HTML中的，這和在HTML中給元素style.display=’none’效果是不一樣的。
3) CssClass屬性，控制項的樣式名，就是HTML中控制項的class屬性。
注釋：建立一個WebForm的項目，寫入如下代碼：
<style type="text/css"> .waring { color:Red; } </style><asp:TextBox runat="server" ID="txtColor" CssClass="waring"></asp:TextBox>
註：拖放一個TextBox控制項，設定CssClass屬性為”waring”，也可以單獨修改BackColor,BorderStyle等屬性，但是不建議這麼做，因為會產生很多的內聯樣式，產生Html(尺寸大，不便於統一的修改)。
4) Attributes，用來設定控制項的額外屬性，和Dom中的SetAttribute，getAttribute是一樣的。
註：在Default.aspx的Pege_Load中寫入如下代碼：
btnCancel.Attributes["a1"] = "3.jpg";
btnCancel.Attributes["onmouserover"] = "alert('Kencery')";
(1) Label控制項，Text屬性為顯示文本，AssociatedControlID屬性用來關聯一個控制項，如果為空白的話會展示為一個span，如果指定為一個控制項的ID，則會展示為一個HTML中的<Label>並且將for屬性設定為被關聯控制項的ClientID。
註：拖放一個Label控制項和TextBox控制項，將Label控制項的AssociatedControllID設定為關聯TextBox。
(2) Literal控制項也是展示一段文本，但是Literal控制項不會渲染任何額外的標籤，就是將Text屬性展示出來即可。
(3) TextBox控制項，文字框控制項，TextMode屬性取值Singleline，Multiple，Password嗎，分別渲染為<input type=”Text”>，Textarea和<input type=”Password”>。當AutoPostBack屬性為true的時候，使用者焦點離開TextBox就會造成頁面Post，實現原理就是講ASP.NET原理時的AutoPostBack，TextChanged事件，文字框發生變化的時候事件觸發ASP.NET中要提交表單的時候最好調用_doPostBack方法。
(4) RadioButton控制項，渲染為<input type=”radio”>，通過GroupName屬性進行分組。
(5) Button控制項，OnClientClick屬性，當使用者點擊按鈕的時候在瀏覽器端執行的代碼，注意：OnClientClick是字串屬性，寫的代碼是JavaScript代碼，運行在瀏覽器端。
<asp:Button ID="btnDelete" runat="server" Text="刪除" OnClientClick="return confirm('您真的要刪除嗎？刪除不能恢複')" />
(6) LinkButton，用法和Button差不多，區別就是Button控制項渲染為按鈕，而LinkButton控制項渲染為超連結，不要用LinkButton來實現普通的超連結，因為LinkButton的href為一段JavaScript代碼，進行的是表單的post，無法”在新視窗中開啟超連結”。和前面所說的”行刪除”的那個例子中的Href為JavaScript的超連結原理一樣。
(7) ImageButton控制項也和Button控制項差不多，只不過是顯示為圖片，渲染為<input type=”image”>。
(8) Button，LinkButton和ImageButton等控制項都有CommandName,CommandArgument兩個屬性和Command事件，可以讓多個按鈕控制項共用一個Command事件處理函數，通過讀取事件對象e的CommandName,CommandArgument兩個屬性讀取被點擊按鈕上設定的這兩個參數來執行不同的操作，例子：編輯刪除多行資料，這種用法在ListView控制項中用的最多。
註：建立一個表刪除.aspx頁面
1 <div> 2 3 <table> 4 5 <tr> 6 7 <td>Kencery</td><td>23</td><td><asp:Button ID="btnDelete" runat="server" 8 9 Text="刪除" CommandName="Remove" CommandArgument="Kencery"10 11 oncommand="RemoveCommmand" /><asp:Button ID="btnEdit" runat="server"12 13 Text="編輯" oncommand="RemoveCommmand" CommandArgument="Kencery" CommandName="Edit" /></td>14 15 </tr>16 17 </table>18 19 <asp:Label ID="lblShow" runat="server"></asp:Label>20 21 </div>
在aspx.cs頁面中寫入如下代碼：
1 protected void RemoveCommmand(object sender, CommandEventArgs e) 2 3 { 4 5 if (e.CommandName == "Remove") 6 7 { 8 9 string name = Convert.ToString(e.CommandArgument);10 11 lblShow.Text = name + "被刪除了";12 13 }14 15 else if (e.CommandName == "Edit")16 17 {18 19 string name = Convert.ToString(e.CommandArgument);20 21 lblShow.Text = name + "被編輯了";22 23 }24 25 }
(9) Panel控制項用來盛放一些控制項，如果設定GroupingText屬性，那麼就渲染為<fieldset>標籤，也就是GroupBox效果，否則渲染為Div。
註：拖放Panel控制項設定GroupBox屬性的值為進階設定
(10) HyperLink控制項，超連結。和LinkButton不一樣，不會向伺服器端post，就是一個超連結。NavigateURL：串連地址，Text：顯示文本。如果設定ImageUrl屬性則會顯示圖片超連結。
(11) FileUpload控制項，檔案上傳控制項，渲染成<input type=”file” />。屬性FileContent以流的形式獲得上傳的檔案，FileName上傳檔案名稱，HasFile Bool值，表示使用者是否選擇的檔案，SaveAs方法用於將檔案儲存到磁碟的指定位置，漏洞：檔案上傳漏洞(上傳aspx)。只允許上傳指定類型檔案，上傳檔案夾不給執行許可權。
註：拖放一個FileUpload和Button控制項，將Button控制項改為上傳。雙擊Button
1 protected void btnUpLoading_Click(object sender, EventArgs e) 2 3 { 4 5 if (flUploading.HasFile) //使用者是否選擇了檔案 6 7 { 8 9 //Server.MapPath, VirtualPathUtility.ToAbsolute都可以10 11 string uploadPath = Server.MapPath("~/upload");12 13 //flUploading.FileName上傳檔案的哦檔案名稱14 15 flUploading.SaveAs(uploadPath + flUploading.FileName);16 17 }18 19 }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
