| 我們知道，在ASP.NET中，使用了兩類控件，一類是HTML控件，還有一類是WEB控件。WEB控件我們已經很熟悉，因爲它是ASP.NET提供，一般關於ASP.NET的教程文章都會仔細介紹這些控件的詳細應用技巧；而HTML控件，很多關於ASP.NET的文章僅僅一句話略過，甚至說只要在原來的HTML基礎上加上“RunAt=”Server””就可以了，以致很多用戶在使用ASP.NET的過程中幾乎沒有使用HTML控件，更加不知道這些控件的具體使用方法和詳細功能。其實，HTML控件雖然在使用方法上和HTML有一點相似，但是，在功能上，HTML控件可以具有自己的“事件”，所以，一些HTML完全不可能實現的功能，使用HTML控件可以簡單實現。 |
| HTML控件在ASP.NET編程中具有主要位置，由於其簡單和HTML的相似性，很多時候，我們可以使用HTML控件來代替WEB控件。在ASP.NET中，HTML控件一共有20種，它們之間的相互關係如下： | |
| HTML控件的使用簡單，重要在於靈活使用。HTML和ASP的使用，讓我們養成了一些不是太好的習慣，包括代碼的編寫，甚至已經完全脫離了面向對象編程，現在，我們使用HTML控件，慢慢的必須回到面向對象編程的編碼習慣和思路。HTML控件比較多，我們現在挑選比較常用和實用的幾個控件舉例介紹。 |
| 在ASP中，我們建立一個鏈接是這樣的<a href=”鏈接URL”>鏈接文字</a>。這樣建立的一個鏈接，如果不和JavaScript結合的話，唯一的功能就是一個鏈接，而且，這個鏈接不能有任何特殊一點的功能。現在，我們來看使用HTMLAnchor實現一個JavaScript中常見的程序，就是用戶點擊鏈接以後，鏈接文字變成別的文字。以下程序點擊“點擊我”以後，鏈接文字變爲“歡迎你”。程序代碼如下： |
| <%@ Import Namespace="System.Data" %> |
| <script runat="server" language="VB"> |
| Sub btnclk(Sender as Object,E as EventArgs) |
| <A id="a1" RunAt="Server" onServerClick="btnclk">點擊我</A> |
| 在以上的代碼中，鏈接有了事件處理！這樣，在鏈接點擊以後，我們可以做一些必要的處理。需要注意的一點是：這裏，不是onClick而是onServerClick。現在，我們來看一個比較複雜的舉例，在這個舉例裏面，點擊鏈接可以顯示一張圖片，再一次點擊，可以隱藏該圖片，代碼如下： |
| <script language="C#" runat="server"> |
| void Page_Load (Object sender, EventArgs e) { |
| showhideLink.InnerText = image.Visible ? "隱藏圖片" : "顯示圖片"; |
| void ShowHideAd(Object sender, EventArgs E) { |
| image.Visible = image.Visible ? false : true; |
| showhideLink.InnerText = image.Visible ? "隱藏圖片" : "顯示圖片"; |
| <p><a id="showhideLink" runat="server" onServerClick="ShowHideAd"/></p> |
| <table id="image" cellpadding=3 visible=false runat="server"> |
| HTMLButton沒有太多的變化，但是，按鈕的外觀處理比較任意一點，來看一個舉例： |
| <p>With embedded <b><img></b> tag: </p> |
| <p><button id="Button1" runat="server" |
| style="width:157; height=200" |
| onServerClick="saySomething"> |
| <img src="/aspxtreme/shared/images/billg_tongue.gif" |
| width="157" height="200" border=0 alt=""> |
| <p>With rollover effect: </p> |
| <p><button id="Button2" runat="server" |
| onServerClick="saySomething" |
| style="font: 8pt verdana; background-color:lightgreen; |
| border-color:black; height=30; width:100" |
| οnmοuseοver="this.style.backgroundColor='yellow'" |
| οnmοuseοut="this.style.backgroundColor='lightgreen'"> |
| <p><span id="Message" runat="server" /> |
| 在以上代碼中，當用戶鼠標移到按鈕上和離開按鈕時，按鈕的表面顏色是不一樣的，效果比較特別，如圖： |
| 從控件名字上，可能我們很難猜測這個控件的功能。仔細觀察所有的HTML控件，我們發現有一些HTML標記沒有對應的HTML控件，比如：<body>、<div>、<span>等，而這些HTML標記又比較重要，如果需要用到這些標記怎麼辦呢？HTMLGenericControl就是這些標記的控件。現在，我們看一個比較有趣的舉例，在這個例子中，用戶可以選擇頁面的背景顏色！這個功能在一些文學、讀書網站、資源網站可能比較實用，因爲這些網站可能提供大量資料給瀏覽者，如果用戶閱讀時間較長而所有資料格式都差不多的話，用戶有可能感覺網站比較單調而且任意疲勞，這時候，如果可以讓用戶選擇網頁的背景顏色，用戶就會感覺比較舒適。來看程序源代碼： |
| <title>試驗HtmlGenericControl</title> |
| <script language="C#" runat="server"> |
| void Page_Load (object Source, EventArgs e) { |
| Body.Attributes["bgcolor"]=ColorSelect.Value; |
| <body id="Body" runat="server"> |
| <select id="ColorSelect" runat="server"> |
| <option>Chartreuse</option> |
| <option>DodgerBlue</option> |
| <option>ForestGreen</option> |
| <option>Gainsboro</option> |
| <option>Lavender</option> |
| <option>NavajoWhite</option> |
| <option>PaleGoldenRod</option> |
| <option>SandyBrown</option> |
| <option>YellowGreen</option> |
| <input type=submit runat="server" Value="確定"> |
| 這個程序很有趣，而且非常簡單，從這裏，我們可以感受到這個控件的方便和實用。其實，這個控件實現的一些功能，我們以前可能很少使用，甚至都沒有仔細考慮，這就是新的Asp.NET需要我們挖掘的一些地方，也是我們需要改變編程、設計思維的原因。 |
| 在一些新聞網站和圖片網站中，我們有時候需要查找、顯示很多圖片，這些圖片一般我們是直接顯示出來，當圖片比較多的情況下，直接顯示出來就會增加網頁文件大小，消耗用戶時間。所以，這時候，我們可以直接給用戶一個圖片下拉選擇框來選擇真正需要顯示的圖片。下面的舉例就是這樣，由用戶選擇來顯示圖片： |
| <title>HtmlImage試驗</title> |
| <script language="C#" runat="server"> |
| void chgImage (Object Sender, EventArgs e) { |
| Image.Src= ImgSelector.Value; |
| <img id="Image" runat="server" |
| <select id="ImgSelector" runat="server"> |
| <option value="Cereal1.gif">Healthy Grains</option> |
| <option value="warning.gif">warning</option> |
| <option value="Cereal3.gif">U.F.O.S</option> |
| <option value="Cereal4.gif">Oatey O's</option> |
| <option value="x.gif">Strike</option> |
| <option value="Cereal7.gif">Fruity Pops</option> |
| <input type=submit runat="server" value="顯示" onServerClick="chgImage"> |
| 以上程序演示了使用HTMLImage控件實現選擇顯示圖片的功能，我們注意到，在使用HTMLImage控件的時候，圖片的路徑可以作爲控件的一個屬性來設置，這樣，我們就可以很簡單的實現類似以上程序的許多功能。 |
| 我們知道，在HTML中使用Table的時候，Table是已經指定而且不能動態改變的；在ASP中，要實現Table的動態載入也比較困難。在使用HTMLTable的時候，我們就可以很簡單的實現表、表格行和表格單元格的動態生成，因爲表格行和表格單元格都已經作爲控件，我們可以通過對這些控件的靈活使用來生成動態表格。在以下的舉例中，用戶選擇表格的行數和列數來實現動態生成表格： |
| <title>HTMLTable試驗</title> |
| <script language="C#" runat="server"> |
| void Page_Load(Object sender, EventArgs e) { |
| int numrows=int.Parse(setRows.Value); |
| int numcells=int.Parse(setCols.Value); |
| for (int j=0; j<numrows; j++) { |
| HtmlTableRow r=new HtmlTableRow(); |
| if (row%2 == 1) r.BgColor="Gainsboro"; |
| for (int i=0; i<numcells; i++) { |
| HtmlTableCell c=new HtmlTableCell(); |
| c.Controls.Add(new LiteralControl("row " + j.ToString() + ", cell " + i.ToString())); |
| <p><table id="Table1" cellpadding=5 cellspacing=0 |
| border=1 bordercolor="black" runat="server" /></p> |
| <select id="setRows" runat="server"> |
| <select id="setCols" runat="server"> |
| <p><input type=submit value="生成表格" runat="server"> |
| 在以上圖片中，程序動態生成一個兩行三列的表格。在學習使用HTMLTable的時候，需要真正瞭解表格是怎樣生成的，這一點，我們可以參考上面程序的實現方式。HTMLTable的應用非常廣泛，特別是網頁結合數據庫的時候，這種動態生成Table的設計方法更加必不可少。 |
| HTML控件是ASP.NET的主要部分之一，利用這些控件，我們在設計中可以實現很多我們以前完全不敢想或者很難實現的功能。 |
|
