天天看點

C# ashx與html的聯合使用

本文将介紹ashx和html的聯合使用方法,盡管目前流行mvc,但handler一般處理程式還是ASP.NET的基礎知識,結合html頁面,做出來的網頁絕對比WebForm的簡潔和效率高。

首先,概要說明一下:

html是過去非常老的一種網頁格式,屬于靜态網頁,要想在html上呈現SQL Server上的資料,隻能依靠ashx了。

大概的方法是,利用html作為模闆,使用ashx讀取資料庫,替換html中的部分内容,最終顯示已替換的html内容。

先給個效果圖:

C# ashx與html的聯合使用

下面開始上代碼:

首先做用visual studio,建立一個項目,項目下再建立有footer.htm,header.htm,Index.ashx,Index.htm

另外我已做了一個簡單的選取表格資訊,顯示在input标簽中的功能,是以我也用到了jquery.min.js

C# ashx與html的聯合使用

(屏蔽部分請忽略,是我做的另一個靜态頁面,與本例無關)

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 &copy; 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:

C# ashx與html的聯合使用

打開後,隻有模闆的内容:

C# ashx與html的聯合使用

此時,修改位址欄的字尾名,改為Index.ashx,就會顯示本文開篇時的效果圖了。

C# ashx與html的聯合使用

(圖中點選了a8、b8行末端的“選擇”按鈕,在下方的input标簽中顯示"a8"和"b8")

結語:

這種制作網頁的方法是最原生态的,是程式設計人員必須掌握的。

本文隻是介紹一個簡單的案例,實際上,在ashx中,可以編寫平常我們寫的C#代碼(包括SQL的操作),在html中也能編寫javascript,也能使用css樣式,結合form送出和頁面的跳轉,可以完成大部分的網頁功能,本人還沒有學會mvc,是以隻能介紹這種方法了,歡迎各位交流。