本文將介紹ashx和html的聯合使用方法，盡管目前流行mvc，但handler一般處理程序還是ASP.NET的基礎知識，結合html頁面，做出來的網頁絕對比WebForm的簡潔和效率高。
首先，概要說明一下：
html是過去非常老的一種網頁格式，屬於靜態網頁，要想在html上呈現SQL Server上的數據，只能依靠ashx了。
大概的方法是，利用html作為模板，使用ashx讀取數據庫，替換html中的部分內容，最終顯示已替換的html內容。
先給個效果圖：
下面開始上代碼：
首先做用visual studio，新建一個項目，項目下再新建有footer.htm，header.htm，Index.ashx，Index.htm
另外我已做了一個簡單的選取表格信息，顯示在input標簽中的功能，所以我也用到了jquery.min.js
（屏蔽部分請忽略，是我做的另一個靜態頁面，與本例無關）
1、首先看的是Index.htm的靜態網頁代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>首頁</title>
5 <style type="text/css">
6 body 7 {
8 width: 1000px;
9 }
10 table 11 {
12 width: 300px;
13 text-align: center;
14 }
15 table th 16 {
17 text-align: center;
18 }
19 button 20 {
21 background-color: Transparent;
22 }
23 </style>
24
25 <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
26
27 <script>
28 function select(obj){ 29 var $btn=$(obj); 30 $("#col1").val($btn.parent().prev().prev().html()); 31 $("#col2").val($btn.parent().prev().html()); 32 } 33 </script>
34
35 </head>
36 <body>
37 $header 38 <table class="table table-hover" border="1" cellpadding="0px" cellspacing="0px">
39 <tr>
40 <th>
41 col1 42 </th>
43 <th>
44 col2 45 </th>
46 <th>
47 col3 48 </th>
49 </tr>
50 $content 51 </table>
52 <br />
53 <input id="col1" type="text" />
54 <input id="col2" type="text" />
55 $footer 56 </body>
57 </html>
上圖中，第5行至23行<style>是簡單樣式，
第27行至33行<script>是javascript代碼，用於把table中選中的內容填入到input中，
第37行$header和第55行$footer是頁頭和頁尾的標記，后續會使用另外2個html網頁替換之，
中間的table創建了3個列頭，分別是col1,col2,col3，$content是table的主體部分，后續會在Index.ashx中替換之。
2、接着是header.htm：
1 <h2>
2 Title 3 </h2>
footer.htm：
1 <hr />
2 CopyRight © XXX
非常的簡單，就是標題和版權信息。
3、最后是Index.ashx：
1 using System; 2 using System.Collections; 3 using System.Data; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Services; 7 using System.Web.Services.Protocols; 8 using System.Xml.Linq; 9 using System.IO; 10
11 namespace AshxTest 12 { 13 /// <summary>
14 /// $codebehindclassname$ 的摘要說明 15 /// </summary>
16 [WebService(Namespace = "http://tempuri.org/")] 17 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 18 public class Index : IHttpHandler 19 { 20
21 public void ProcessRequest(HttpContext context) 22 { 23 //定義最終響應的文本內容的顯示方式，這里使用html，所以是"text/html" 24 context.Response.ContentType = "text/html"; 25
26 //分別把Index.htm,header.htm,footer.htm中的文本內容賦值給3個string變量，是完整的文本內容 27 //AppDomain.CurrentDomain.BaseDirectory則是指項目的根目錄，由於本例的網頁都放在根目錄下，沒有文件夾 28 string html = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "Index.htm"); 29 string header = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "header.htm"); 30 string footer = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "footer.htm"); 31
32 //定義table主體內容的string變量為content 33 string content = ""; 34 //簡單的for循環10次，把i與abc組合，填入到table的tr td標簽中 35 for (int i = 1; i < 10; i++) 36 { 37 content += string.Format("<tr><td>{0}</td><td>{1}</td><td><button value='select' onclick='select(this);'>選擇</button></td></tr>", "a" + i, "b" + i); 38 } 39
40 //以Index.htm的文本內容為基礎，根據標記$header,$content,$footer分別替換上面的3個變量 41 html = html.Replace("$header", header).Replace("$content", content).Replace("$footer", footer); 42
43 //最終得到的html是完整的html前端代碼，通過context.Response.Write輸出到瀏覽器中 44 context.Response.Write(html); 45 } 46
47 public bool IsReusable 48 { 49 get 50 { 51 return false; 52 } 53 } 54 } 55 }
注釋都已經加上了，下面看一下運行的效果。
調試Index.htm：
打開后，只有模板的內容：
此時，修改地址欄的后綴名，改為Index.ashx，就會顯示本文開篇時的效果圖了。
（圖中點擊了a8、b8行末端的“選擇”按鈕，在下方的input標簽中顯示"a8"和"b8"）
結語：
這種制作網頁的方法是最原生態的，是編程人員必須掌握的。
本文只是介紹一個簡單的案例，實際上，在ashx中，可以編寫平常我們寫的C#代碼（包括SQL的操作），在html中也能編寫javascript，也能使用css樣式，結合form提交和頁面的跳轉，可以完成大部分的網頁功能，本人還沒有學會mvc，所以只能介紹這種方法了，歡迎各位交流。