黑暗執行緒 : CODE, ASP.NET

MicroHttpServer - 用100行C#寫一個HTTP Server

Jeffrey — Sat, 14 Aug 2010 00:23:00 GMT

有個點子，想在WinForm上跑程式模擬出Web Server功能，讓Browser或程式可以透過HTTP協定與其溝通。既然想到，就動手做看看囉!

HTTP Server絕大部分的核心功能，其實都可用.NET搞定: 用TcpListener接受特定Port連入的TCP連線，取得NetworkStream，以StreamReader、StreamWriter讀取及寫入資料... .NET BCL真是應有盡有!相較之下，以前那種基礎元件跟函式庫都得自己張羅的時代，只能用茹毛飲血來形容。

有了BCL的加持，配合兩個自訂類別封裝Request、Response，只花了不到100行C#，就組出一個可以接受HTTP Request，傳回結果的超迷你HTTP Server!

using System;

using System.Collections.Generic;

using System.IO;

using System.Net;

using System.Net.Sockets;

using System.Threading;

namespace DarkHttpServer

    //Reuquest物件

    public class CompactRequest

        public string Method, Url, Protocol;

        public Dictionary<string, string> Headers;

        //傳入StreamReader，讀取Request傳入的內容

        public CompactRequest(StreamReader sr)

            //第一列格式如: GET /index.html HTTP/1.1

            string firstLine = sr.ReadLine();

            string[] p = firstLine.Split(' ');

            Method = p[0];

            Url = (p.Length > 1) ? p[1] : "NA";

            Protocol = (p.Length > 2) ? p[2] : "NA";

            //讀取其他Header，格式為HeaderName: HeaderValue

            string line = null;

            Headers = new Dictionary<string, string>();

            while (!string.IsNullOrEmpty(line = sr.ReadLine()))

                int pos = line.IndexOf(":");

                if (pos > -1)

                    Headers.Add(line.Substring(0, pos),

                        line.Substring(pos + 1));

    //Response物件

    public class CompactResponse

        //預設200, 404, 500三種回應

        public class HttpStatus

            public static string Http200 = "200 OK";

            public static string Http404 = "404 Not Found";

            public static string Http500 = "500 Error";

        public string StatusText = HttpStatus.Http200;

        public string ContentType = "text/plain";

        //可回傳Response Header

        public Dictionary<string, string> Headers

            = new Dictionary<string, string>();

        //傳回內容，以byte[]表示

        public byte[] Data = new byte[] { };

    //簡陋但堪用的HTTP Server

    public class MicroHttpServer

        private Thread serverThread;

        TcpListener listener;

        //呼叫端要準備一個函數，接收CompactRequest，回傳CompactResponse

        public MicroHttpServer(int port,

            Func<CompactRequest, CompactResponse> reqProc)

            IPAddress ipAddr = IPAddress.Parse("127.0.0.1");

            listener = new TcpListener(ipAddr, port);

            //另建Thread執行

            serverThread = new Thread(() =>

                listener.Start();

                while (true)

                    Socket s = listener.AcceptSocket();

                    NetworkStream ns = new NetworkStream(s);

                    //解讀Request內容

                    StreamReader sr = new StreamReader(ns);

                    CompactRequest req = new CompactRequest(sr);

                    //呼叫自訂的處理邏輯，得到要回傳的Response

                    CompactResponse resp = reqProc(req);

                    //傳回Response

                    StreamWriter sw = new StreamWriter(ns);

                    sw.WriteLine("HTTP/1.1 {0}", resp.StatusText);

                    sw.WriteLine("Content-Type: " + resp.ContentType);

                    foreach (string k in resp.Headers.Keys)

                        sw.WriteLine("{0}: {1}", k, resp.Headers[k]);

                    sw.WriteLine("Content-Length: {0}", resp.Data.Length);

                    sw.WriteLine();

                    sw.Flush();

                    //寫入資料本體

                    s.Send(resp.Data);

                    //結束連線

                    s.Shutdown(SocketShutdown.Both);

                    ns.Close();

});

            serverThread.Start();

        public void Stop()

            listener.Stop();

            serverThread.Abort();

好了，有了MicroHttpServer類別，我們來寫一個小小的Console Application，做一個將特定目錄下JPG圖檔以網頁方式呈現的迷你Web Server當作應用範例:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.IO;

namespace DarkHttpServer

    class Program

        static string path = @"C:\temp\arts";

        static void Main(string[] args)

            MicroHttpServer mhs = new MicroHttpServer(1688,

            (req) =>

                if (req.Url == "/")

                    return ListPhoto(req);

                else if (req.Url.EndsWith(".jpg"))

                    return GetJpeg(

                        Path.Combine(path, req.Url.TrimStart('/')));

                else return new CompactResponse()

                    StatusText = CompactResponse.HttpStatus.Http500

};

});

            Console.Write("Press any key to stop...");

            Console.Read();

            mhs.Stop();

        //列出圖檔，組成網頁傳回

        static CompactResponse ListPhoto(CompactRequest req)

            StringBuilder sb = new StringBuilder();

            sb.Append(@"

<html><head><title>Index</title>

<style type='text/css'>img {

    width: 160px; height: 120px; float: left;

    margin: 10px;

}</style>

</head><body>

");

            sb.Append("");

            foreach (string file in

                Directory.GetFiles(path, "*.jpg"))

                sb.AppendFormat("<img src='{0}' />",

                    Path.GetFileName(file));

            sb.Append("</body></html>");

            return new CompactResponse()

                ContentType = "text/html",

                Data = Encoding.UTF8.GetBytes(sb.ToString())

};

        //取得圖檔

        static CompactResponse GetJpeg(string file)

            if (File.Exists(file))

                return new CompactResponse()

                    ContentType = "image/jpeg",

                    Data = File.ReadAllBytes(file)

};

            else //找不到檔案時傳回HTTP 404

                return new CompactResponse()

                    StatusText = CompactResponse.HttpStatus.Http404

};

用IE連上httq://localhost:1688，薑薑薑薑! 小閃光的手工藝品在他爹的"手工藝品"上被展示出來了。(這證明我的手也很巧呀! XD)

請大家跟我一起高呼: .NET好威呀!

筆記-讓ASP.NET TreeView可以透過Javascript新增節點

Jeffrey — Fri, 16 Jul 2010 08:13:40 GMT

同事在網頁上用了ASP.NET TreeView控件，但專案規格中需要由Javascript端完成新增節點的動作，很不幸地，這不是ASP.NET TreeView內建支援的功能。

如果時間充裕的話，我會建議改用jQuery TreeView Plugin，較符合大量Client端客製的需求，但因時程迫在眉睫，且只差這個小功能，所以大家不要考究"破解"ASP.NET TreeView前端設計的意義，把它想像成打破水缸救人就好。

寫完這段程式，等同於小小地破解ASP.NET TreeView前端HTML與Script設計。發現原來每一個節點都是一個Table(選擇用Table來配置排列而沒用CSS，應是著眼於相容性，至於要相容誰相信大家心裡有數，讓我們一起吶喊"IE6退散"吧!)，其下的子節點則被包在一個DIV中。比較複雜的部分是前方的連接線圖示，圖檔是以Web Resource方式存在，所以URL難以預測，幸好有個TreeView1_ImageArray的字串函數記載了所有圖示的URL，可用Index去找出特定圖示。

不過要考慮節點所在位置不同，有時要用L型，有時要用├，有時要補空白，有時要補直線，麻煩的很，這部分花了不少Code處理。

<%@ Page Language="C#" AutoEventWireup="true" %>

<script type="text/C#" runat="server">

    protected void Page_Load(object sender, EventArgs e)

        if (!IsPostBack)

            TreeNode root = new TreeNode("Root");

            root.ChildNodes.Add(new TreeNode("Catg1"));

            root.ChildNodes.Add(new TreeNode("Catg2"));

            TreeNode node = new TreeNode("Catg3");

            node.ChildNodes.Add(new TreeNode("ItemX"));

            root.ChildNodes.Add(node);

            root.ChildNodes.Add(new TreeNode("Catg4"));

            SetTreeNodeLink(root);

            TreeView1.Nodes.Add(root);

    private void SetTreeNodeLink(TreeNode node)

        node.NavigateUrl = "BLOCKED SCRIPTselNode('" + node.Text + "');void(0);";

        foreach (TreeNode child in node.ChildNodes)

            SetTreeNodeLink(child);

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>TreeView Client Script</title>

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"

            type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //選取節點時觸發

            window.selNode = function (t) { $("#dvSelNode").text(t); };

            $("#btnAdd").click(function () {

                //註: 此處不考慮父節點名重覆及txtName特殊字元問題

                addNode($("#dvSelNode").text(), $("#txtName").val(),

                    "BLOCKED SCRIPTselNode('" + $("#txtName").val() + "');void(0);");

});

            var tvName = "TreeView1";

            var $tv = $("#" + tvName);

            //Icon Url

            var tvIcons = window[tvName + "_ImageArray"];

            //傳回連接線Icon

            function genTreeViewIcon(i) {

                return "<img style='border-width: 0px;' src='" +

                       tvIcons[i] + "' />";

            //查出連接線Icon的索引值，有時要用相對順序算出展開收合狀態的Icon

            function getTreeViewIconIndex(imgUrl) {

                for (var i = 0; i < tvIcons.length; i++)

                    if (tvIcons[i].length > 0 &&

                        imgUrl.indexOf(tvIcons[i]) > -1) return i;

                return -1;

            //加入新節點

            function addNode(parentNodeText, nodeText, nodeLink) {

                //先找到Table

                var $pt = null;

                $tv.find("a").each(function () {

                    if (this.innerHTML == parentNodeText) {

                        $pt = $(this).closest("table");

                        return false;

});

                if ($pt) {

                    //找出目前節點的名稱

                    var nodeId = $pt.find("a:last").attr("id");

                    var childBlockId = nodeId.replace("t", "n");

                    //檢查是否已有Child, 若無則加上子節點div

                    if (!$pt.next().is("div")) {

                        //找到前方的圖示

                        var $pfxTd = $pt.find("td").eq(-2);

                        var imgUrl = $pfxTd.find("img").attr("src");

                        //Icon索引+2可換算出可展開的Icon

                        $pfxTd.html(

                            "<a id='" + childBlockId +

                            "' href=\"BLOCKED SCRIPTTreeView_ToggleNode(" + tvName + "_Data," +

                            nodeId.substr(nodeId.lastIndexOf("t") + 1, 3) + ","

                            + childBlockId + ",'t'," + childBlockId + "Nodes)\">" +

                            genTreeViewIcon(getTreeViewIconIndex(imgUrl) + 2) +

                            "</a>");

                        $pt.after("<div id='" + childBlockId + "Nodes' style='display: block' />");

                    var $childBlock = $pt.next();

                    //計算新Node的流水號

                    var maxSn = $tv.find("a").length + 1;

                    var newNodeId = nodeId.substr(0, nodeId.lastIndexOf("t") + 1) + maxSn;

                    //以自己為複製藍本，重點要多加一格後縮

                    var $npt = $pt.clone();

                    //設定節點新值

                    $npt.find("a:last").attr("id", newNodeId).attr("href", nodeLink).text(nodeText);

                    //處理連接線

                    var $cell = $npt.find("td").eq(-2);

                    var imgUrl = $cell.find("img").attr("src");

                    var idx = getTreeViewIconIndex(imgUrl);

                    if (idx >= 11 && idx <= 13) idx = 6; else idx = 3;

                    $cell.html(genTreeViewIcon(idx)) //改連接線

                    .after("<td>" + genTreeViewIcon(13) + "</td>");

                    if ($childBlock.children().length > 0) {

                        //如果已有其他兄弟節點，要改最後一筆兄弟節點的連接線

                        var $lastItem = $childBlock.children("table").last();

                        $cell = $lastItem.find("td").eq(-2);

                        ($cell.children("a").length ? $cell.children("a") : $cell)

                        .html(genTreeViewIcon(

                            getTreeViewIconIndex($cell.find("img").attr("src")) - 3));

                        //若兄弟節點已有子節點也要改其連接線(實在有夠麻煩)

                        if ($lastItem.next().is("div")) {

                            var tdIdx = $lastItem.find("td").length - 2;

                            $lastItem.next().children().each(function () {

                                $(this).find("td:eq(" + tdIdx + ")").html(

                                    genTreeViewIcon(6) //直線

);

});

                    $childBlock.append($npt);

            var h = [];

            for (var i = 0; i < TreeView1_ImageArray.length; i++) {

                h.push("<span>" + i + genTreeViewIcon(i) + "</span>");

            $("#dvDisp").html(h.join("\n"));

});

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="dvDisp"></div>

    <div>

        <div id="dvSelNode">Not Selected</div>

        <div>

        <input type="text" id="txtName" value="" />

        <input type="button" id="btnAdd" value="Add" />

        </div>

        <asp:TreeView ID="TreeView1" runat="server" Height="250px" ShowLines="True"

            Width="320px">

        </asp:TreeView>

    </div>

    </form>

</body>

</html>

以上是程式，我當救人兼練功，各位有興趣隨便看看，沒什麼大用。

CODE-自動產生對應Javascript物件的.NET類別

Jeffrey — Sat, 05 Jun 2010 22:01:14 GMT

Abstract: This is a code generator to declare reflected .NET class of Javascript object using JSON.NET JObject features.

這是跟同事在討論系統架構時冒出的議題...

網頁前端將使用者輸入結果組裝成結構單純的Javascript物件，一個欄位對應一個屬性，但有些欄位如電話、地址等可能有多筆，故屬性型別除了字串、數字外，也有會有電話號碼物件陣列，電話號碼物件則包含國碼、區碼、號碼三個屬性。組裝完成的Javascript透過JSON.stringify會以字串形式傳至後端，針對這種前端動態組成的JSON，我們可在後端沒有事先宣告對應.NET Class的狀況下，將其反序列化成JSON.NET的JObject物件，再透過JObject.Properties探索其中的細節，這就是昨天文章試圖展示的重點。

不過，如果我還是想在寫.NET Code時享受美妙Intellisense，讓我輸入屬性名稱可以少打幾個字，並明確知道屬性類別；而當我豬頭打錯屬性名稱時，也很渴望Visual Studio直接在錯字下方餵我吃一條紅蚯蚓...

嗯，要怎麼收獲先怎麼裁，我們唯一的選擇就是乖乖在Server-Side把對應Javascript物件的.NET類別宣告出來，才能享有這一切。那就看著Javascript物件規格，認命地靠手工把一個個屬性打上去吧... 等等! 若只能乖乖打字修行，又何來此文?

是的，我又想偷懶了!!

想要享受Intellisense又不甘願打字，所以我試寫了一個自動依Javascript物件規格建立對應.NET Class的程式碼產生器。以下是個簡單示範，網頁上有兩個TextArea，上方放JSON字串，下方則是分析JSON字串後產生的.NET類別宣告程式碼。

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>JSON 2 Class</title>

    <script type="text/javascript" src="jquery-1.4.2.js"></script>

    <script type="text/javascript">

        $(function () {

            if ($("#txtJson").val() == "") {

                var obj = {

                    Name: "Jeffrey",

                    RegTime: new Date(),

                    Level: 99,

                    Records: [1024, 9999, 32767],

                    Rank: { Code: "DKNT", Name: "DarkNight" },

                    Skills: [

                    { Name: "Sword", Level: 1 },

                    { Name: "Steal", Level: 2 },

                    { Name: "MouthCannon", Level: 99 }

};

                var json = JSON.stringify(obj);

                $("#txtJson").val(json);

});

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <textarea id="txtJson" runat="server" rows="6" cols="60"></textarea>

    <br />

    <asp:Button ID="btnGo" runat="server" Text="Convert" onclick="btnGo_Click" />

    <br />

    <textarea id="txtClass" runat="server" rows="18" cols="60"></textarea>

    </form>

</body>

</html>

執行結果如下。在這個範例中，Javascript的Rank屬性是具有Code, Name屬性的物件，而Skills則是個物件陣列，陣列元素物件具有Name, Level兩個屬性。因此，在產生的.NET Class宣告中，除了主類別CRoot用來承接JSON轉換結果外，還要多宣告CRank跟CSkills兩個子類別。

好，看看程式怎麼寫:

using System;

using System.Collections.Generic;

using System.Linq;

using Newtonsoft.Json;

using Newtonsoft.Json.Linq;

using System.IO;

using System.Text;

public partial class JSON2Class_Default : System.Web.UI.Page

    protected void Page_Load(object sender, EventArgs e)

    protected void btnGo_Click(object sender, EventArgs e)

        JObject jo =

            JsonConvert.DeserializeObject<JObject>(txtJson.Value);

        JsonClassParser.RegisterClass(jo, "Root");

        txtClass.Value = JsonClassParser.GenClassCode();

public class JsonClassParser

    public class RawClass

        public string ClassName;

        public string PropertyHash;

        public Dictionary<string, string> Properties;

    //蒐集所有類別

    public static List<RawClass> Library

        = new List<RawClass>();

    private static string getCLSType(JTokenType t)

        switch (t)

            case JTokenType.Boolean:

                return "bool";

            case JTokenType.Bytes:

                return "byte[]";

            case JTokenType.Date:

                return "DateTime";

            case JTokenType.Float:

                return "decimal";

            case JTokenType.Integer:

                return "int";

            case JTokenType.String:

                return "string";

            default:

                throw new ApplicationException(

                    t.ToString() + " is not supported");

    //註冊類別

    public static string RegisterClass(JObject jo, string className)

        RawClass c = new RawClass();

        c.ClassName = "C" +

            className ??

            Path.GetFileNameWithoutExtension(

            Path.GetTempFileName());

        //將所有類別組成Hash字串，用以比對類別是否相同

        c.PropertyHash =

            string.Join(",",

            jo.Properties().Select(o => o.Name).ToArray());

        c.Properties = new Dictionary<string, string>();

        foreach (JProperty p in jo.Properties())

            string t = "";

            switch (p.Value.Type)

                case JTokenType.Object:

                    t = RegisterClass((JObject)jo[p.Name], p.Name);

                    break;

                case JTokenType.Array:

                    JArray ary = (JArray)jo[p.Name];

                    string typeName = null;

                    foreach (JToken jv in ary)

                        if (jv.Type == JTokenType.Array)

                            throw new ApplicationException(

                                "Array of array is not supported!");

                        string s =

                            jv.Type == JTokenType.Object ?

                            RegisterClass((JObject)jv, p.Name) :

                            getCLSType(jv.Type);

                        if (typeName == null)

                            typeName = s;

                        else if (typeName != s)

                            throw new ApplicationException(

                                "Complex array is not supported!");

                    t = typeName + "[]";

                    break;

                case JTokenType.Boolean:

                case JTokenType.Date:

                case JTokenType.Float:

                case JTokenType.Integer:

                case JTokenType.String:

                    t = getCLSType(p.Value.Type);

                    break;

                default:

                    throw new ApplicationException(

                    p.Type.ToString() + " is not supported!");

            c.Properties.Add(p.Name, t);

        //檢查是否已有重覆類別存在

        var q = (from o in Library

                where o.PropertyHash == c.PropertyHash

                select o).SingleOrDefault();

        //不存在時新增

        if (q == null)

            Library.Add(c);

            return c.ClassName;

        else //存在時傳回既有類別

            return q.ClassName;

    public static string GenClassCode()

        StringBuilder sb = new StringBuilder();

        foreach (RawClass rc in Library)

            sb.AppendFormat("public class {0} {{\r\n", rc.ClassName);

            foreach (string p in rc.Properties.Keys)

                sb.AppendFormat("  public {0} {1} {{ get; set; }}\r\n",

                    rc.Properties[p], p);

            sb.AppendLine("}");

        return sb.ToString();

雖然演算邏輯有點小複雜，但還是能在150列內將程式寫完，C#真是個好語言呀!!

程式先藉用JSON.NET的JObject動態物件模型逐一找出屬性，分析其型別，當型別為物件時，則用遞迴技巧再針對物件分析生出對應的子類別。當型別為陣列時，則分析陣列元素型別，決定宣告成何種陣列? 不過為避免過度複雜，我設了限制--陣列所有元素必須為同一型別! 當然，陣列元素型別也可以是物件，一樣用遞迴方式產生對應.NET子類別，但一樣受陣列元素單一型別的限制。另外，同型別物件可能被分析多次，我透過比對所有屬性名稱判斷類別是否為同一個。

程式未經大量測試，但初步試玩OK。有興趣的人可以拿回去玩玩，發現有Bug請再告知。

CODE-使用JSON.NET處理動態物件屬性

Jeffrey — Fri, 04 Jun 2010 20:48:38 GMT

之前在文章裡提過.NET內建兩種JSON轉換工具: JavaScriptSerializer及DataContractJsonSerializer。不過，它們都基於一個假設--"JSON轉換對象是事先已知的Class"!

在某些狀況下，前端所傳回的JSON字串是開發階段無法完全掌握的。

舉個極端的例子。在Javascript裡可用以下寫法搞出一個你做夢都想不到的物件，轉成JSON傳到後端:

var o = {};
for (var i = 0; i < 10; i++)
o["Prop" + Math.floor(Math.random() * 100000)] = i;
var jsonString = JSON.stringify(o);

遇到這種機車需求，難道Server端就束手無策了嗎?

Thanks God, We have JSON.NET!! 一個極為出色的Open Source JSON解決方案，提供了如同JavaScriptSerializer序列化及反序列化JSON字串的功能，甚至支援LINQ式操作，最重要的是它可透過JObject的物件模型支援"動態物件"，解決類別屬性不固定的問題。

以下是簡單的動態物件應用示範: (JSON.NET有親切易讀的說明文件，對Open Source Project來說十分難得，不可錯過了)

using System;

using System.Linq;

using Newtonsoft.Json;

using Newtonsoft.Json.Linq;

public partial class DynamicJson : System.Web.UI.Page

    public class Member

        public string Name;

        public DateTime Birthday;

        public int Level;

        public int[] Records;

    protected void Page_Load(object sender, EventArgs e)

        //使用傳統的強型別直接轉換

        Member jeffrey = new Member()

            Name = "Jeffrey",

            Birthday = new DateTime(1990, 1, 1),

            Level = 99,

            Records = new int[] { 1024, 9999, 32767 }

};

        //(哇塞! 我被序列化了)

        Response.Write(

            JsonConvert.SerializeObject(jeffrey));

        Response.Write("<hr />");

        //動態產生Json的範例

        JObject jo = new JObject();

        jo.Add(new JProperty("Name", "Jeffrey"));

        jo.Add(new JProperty("Birthday", new DateTime(1990, 1, 1)));

        jo.Add(new JProperty("Level", 99));

        JArray ja = new JArray();

        ja.Add(new JValue(1024));

        ja.Add(new JValue(9999));

        ja.Add(new JValue(32767));

        jo.Add(new JProperty("Records", ja));

        Response.Write(JsonConvert.SerializeObject(jo));

        Response.Write("<hr />");

        //也可以像XDocument一樣一次宣告

        jo = new JObject(

            new JProperty("Name", "Jeffrey"),

            new JProperty("Birthday", new DateTime(1990, 1, 1)),

            new JProperty("Level", 99),

            new JProperty("Records",

                new JArray(

                    new JValue(1024), new JValue(9999),

                    new JValue(32767)

);

        string jsonString = JsonConvert.SerializeObject(jo);

        Response.Write(jsonString);

        Response.Write("<hr />");

/*

 jsonString內容為

{"Name":"Jeffrey","Birthday":"\/Date(631123200000+0800)\/","Level":99,

 "Records":[1024,9999,32767]}

*/

        //JSON字串也可還原回JObject，動態存取

        JObject restoredObject = JsonConvert.DeserializeObject<JObject>(

            jsonString);

        //JObject可使用LINQ方式存取

        var q = from p in restoredObject.Properties()

                where p.Name == "Name"

                select p;

        Response.Write("<li>Name = " + (string)q.First().Value);

        Response.Write("<li>Birthday = " +

            (DateTime)jo.Property("Birthday").Value);

        int[] records =

            ((JArray)jo.Property("Records").Value)

            .Select(o => (int)o).ToArray();

        Response.Write("<li>Records = " + string.Join(",",

            records.Select(o => o.ToString()).ToArray()));

/*

         * == 得到結果 ==

         * Name = Jeffrey

         * Birthday = 1/1/1990 12:00:00 AM

         * Records = 1024,9999,32767

*/

        Response.End();

CODE-ASPX接收jQuery.ajax傳送XML文件範例

Jeffrey — Fri, 02 Oct 2009 03:07:42 GMT

今天應用到以jQuery.ajax送出XML文件，以ASPX接收處理的寫法。在倉庫挖了好久，才找出不久前剛寫過的程式碼參考。為了避免中年記憶衰退成為我活到老，Coding到老路上的絆腳石，整理一下程式貼成KB，也順便與有此需求的鄉親們分享。

HttpRequest要傳遞整份XML文件時，並不是將XML字串放在參數中，而是把整個XML內容當成POST Request的主體，因此在jQuery端與ASPX端跟一般呼叫寫法有些不同。

傳送時，必須直接使用jQuery.ajax()以精確調控參數，沒法用$.post()偷懶。參數中conteType: "text/xml"用來向Web Server表明內容物為XML，processData: false則是要求jQuery將data內容原汁原味上傳，不要做任何解析或修改。

而在ASPX端，不是用Request[".."]接參數，而是要用Request.InputStream接入上傳內容。我在程式串同時列出2.0 XmlDocument及3.5 XDocument的做法比較，3.5明顯簡潔許多。

程式碼如下，有興趣的人就拿回去玩吧!

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Xml" %>

<%@ Import Namespace="System.Xml.Linq" %>

<%@ Import Namespace="System.IO" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    void Page_Load(object sender, EventArgs e)

        if (Request["mode"] == "send")

try

                //LINQ way

                XDocument xd =

                    XDocument.Load(new StreamReader(Request.InputStream));

                xd.Root.Add(new XElement("Mark", "Inserted by ASP.NET 3.5"));

                Response.Write(xd.ToString());

                /* Traditional Way

                XmlDocument xd2 = new XmlDocument();

                xd2.Load(Request.InputStream);

                XmlElement xe = xd2.CreateElement("Mark");

                xe.InnerText = "Inserted by ASP.NET 2.0";

                xd2.DocumentElement.AppendChild(xe);

                Response.Write(xd2.OuterXml);

*/

                Response.ContentType = "text/xml";

            catch (Exception ex)

                //return text, raise $.ajax error event

                Response.ContentType = "text/plain";

                Response.Write(ex.Message);

            Response.End();

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>jQuery Post XML Sample</title>

    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        function postXml(url, xmlSrc, callback) {

            var xmlString =

                jQuery.isXMLDoc(xmlSrc) ?

                xmlSrc.xml || (new XMLSerializer()).serializeToString(xmlSrc) :

                xmlSrc;

            $.ajax({

                url: url,

                contentType: "text/xml",

                data: xmlString,

                dataType: "xml",

                success: function(x) { callback(x); },

                error: function(xhr, textStatus, thrownError) {

                        alert("Error:" + xhr.responseText);  },

                processData: false,

                type: "POST"

});

        $(function() {

            $("#btnSend").click(function() {

                postXml("AjaxPostXmlSample.aspx?mode=send",

                $("#taXml").val(), function(xd) {

                    alert(xd.xml ||

                    (new XMLSerializer()).serializeToString(xd));

});

});

});

    </script>

</head>

<body>

<textarea id="taXml" cols="40" rows="5">&lt;Books&gt;

   &lt;Book Title="The Art of Trouble-Shooting" Author="Darkthread" /&gt;

&lt;/Books&gt;</textarea>

<input type="button" id="btnSend" value="Send" />

</body>

</html>

輕量級的js檔打包解決方案

Jeffrey — Thu, 17 Sep 2009 20:51:23 GMT

最近在嘗試將一個功能強大的jQuery Plugin【jqGrid】整到專案裡，它的功能與彈性讓人印象深刻(不過要上手得花點時間摸索)，大家可以直接看線上展示，應該就能感受其威力。

jqGrid有個貼心的設計--將功能模組化。各模組的程式分散在多個js檔，有用到才需要載入，避免Client端載入肥大js只使用其中一丁點功能，白白浪費載入時間及頻寬。(剛好前些時候James Padolsey也提到這點，甚至覺得殺雞不必用牛刀，小功能或許自己寫會更有效率兼便練功)

jqGrid提供了兩種做法: 線上挑選模組後打包成單一js檔，或透過jquery.jqGrid.js動態載入。在開發階段我選擇了動態載入法，卻發現疑似因載入時間差的關係，Reload多次時，偶爾會出現js來不及載入而出錯，於是決定改回靜態include。結果在HTML檔出現很壯觀的景象:

當然，這是極度誇張的特例，但依過去的經驗裡，網頁用的plugin種類一多，先後include十來個js檔也是很平常的。這表示使用者開啟網頁的同時，還一併丟出十來個Request，每個Request都有傳輸與處理的Overhead，平白增加伺服器負擔。同時，用Copy And Paste的方式在每個網頁裡維護又臭又長的include清單，顯然也有違程式簡潔性並且不易修改。

於是，我想要改善這個問題。發噗提出想法後，不少噗友提供了很好的意見。市場上有些現成的解決方案，例如: YUI可以壓縮合併JS/CSS、Microsoft實驗室則有DOLOTO、另外還有些朋友習慣用MasterPage解決這個問題。

考量了一下，我理想中的合併下載工具應該透過單一ASPX網頁就能解決，在運用上會比引用MasterPage來得靈活一點(提供輔助工具會比改變網頁架構容易些，而且不侷限於ASPX，HTM、JS裡也可以引用)，也有較大的組合彈性；至於DOLOTO，看起來很強大，但引用過程較繁瑣，且不確定jQuery裡的函數/Plugin被分割肢解+動態載入會不會出問題；至於YUI，好像比較傾向靜態合併，而且ASP.NET + jQuery外再多扯進來另一個Framework有點像在找其他同事麻煩，尤其是我只是想喝杯牛奶罷了。

評估程式邏輯並不複雜，決定立刻捲起袖子動手做，最壞只是損失一些工時。沒一會兒，JsLoader.aspx誕生了:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.IO" %>

<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

    private List<string> jsQueue = new List<string>();

    private Dictionary<string, string> jsPool = new Dictionary<string, string>();

    private string JS_SET_PREFIX = "JSS_";

    void Page_Load(object sender, EventArgs e)

        string[] f = (Request["f"] ?? "")

            .Split(new char[] {',',';'}, StringSplitOptions.RemoveEmptyEntries);

        foreach (string jsFile in f)

            queueJs(jsFile);

        Response.ContentType = "text/javascript";

        foreach (string js in jsQueue)

            Response.Write(jsPool[js]);

        Response.End();

    private void queueJs(string jsFile)

        string[] p = jsFile.Split(new char[] {',',';'},

            StringSplitOptions.RemoveEmptyEntries);

        //if multi-part

        if (p.Length > 1)

            foreach (string f in p)

                queueJs(f);

            return;

        //lower case

        jsFile = jsFile.ToLower();

        //js set name without .js

        if (jsFile.EndsWith(".js"))

            //if already queued

            if (jsPool.ContainsKey(jsFile)) return;

            //else put the js into queue

            jsQueue.Add(jsFile);

            jsPool.Add(jsFile, getJsContent(jsFile));

        else //if set, try to find it from web.config

            string jsFiles =

                System.Configuration.ConfigurationManager.AppSettings[

                    JS_SET_PREFIX + jsFile];

            if (string.IsNullOrEmpty(jsFiles))

                jsQueue.Add(jsFile);

                jsPool.Add(jsFile,

                    string.Format("alert('JsLoader Error: [{0}] set not configured!');",

                    EscapeStringForJS(jsFile)));

            else //process the predefined file list

                queueJs(jsFiles);

    //Get js file content

    private string getJsContent(string jsFile)

try

            string file = Server.MapPath("./" + jsFile);

            if (!File.Exists(file))

                return string.Format("alert('JsLoader Error: [{0}] not found!');",

                    EscapeStringForJS(jsFile));

            else //Add cache/packing module here if you want

                return File.ReadAllText(file);

        catch

            throw new ApplicationException("Failed to process " + jsFile);

    /// <summary>

    /// Replace characters for Javscript string literals

    /// </summary>

    /// <param name="text">raw string</param>

    /// <returns>escaped string</returns>

    public static string EscapeStringForJS(string s)

        return s.Replace(@"\", @"\\")

                .Replace("\b", @"\b")

                .Replace("\f", @"\f")

                .Replace("\n", @"\n")

                .Replace("\0", @"\0")

                .Replace("\r", @"\r")

                .Replace("\t", @"\t")

                .Replace("\v", @"\v")

                .Replace("'", @"\'")

                .Replace(@"""", @"\""");

</script>

JsLoader.aspx的工作原理很簡單，程式放在js同層目錄下，網頁裡寫成<script type="text/javascxript" src="/js/JsLoader.aspx?f=js1.js,js2.js"></script>就可以動態將js1.js與js2.js兩個檔案合併成一個傳回。而在getJsContent()裡，還可以加入Cache及壓縮js的機制(例如: 加參數就改成載入壓縮過的.min.js版本)，讓效率更好一些。不過，我加入最重要的簡化是除了直接列出js檔名外，可在/js/web.config裡定義一些預設的"套件"，這樣子就可以用JsLoader.aspx?f=jqgrid取代原本一長串js檔案清單，而多組"套件"也可以再組成一個"套餐"(如JSS_gridpage)，如某幾個網頁有共同的js載入需求，可以只宣告一次，用在多個網頁上。檔案清單、套件、套餐三種方式可以視需要自由組合運用。

<?xml version="1.0"?>

<configuration>

  <appSettings>

    <!-- Use JSS_[JS Set Name], JS Set Name should be lower case -->

    <add key="JSS_jqgrid"

value="jquery-ui-1.7.1.custom.min.js,i18n/grid.locale-tw.js,...略...,jqModal.js,jqDnR.js" />

    <add key="JSS_nummask" value="jquery.afaNumMask.js" />

    <add key="JSS_dyndatetime" value="jquery.dynDateTime.js,../css/calendar/calendar-tw.js"/>

    <add key="JSS_json2" value="json2.js"/>

    <add key="JSS_gridpage" value="jqgrid,json2,nummask,dyndatetime"/>

  </appSettings>

</configuration>

最後還是要講一下JsLoader.aspx的黑暗面，將多個js檔包在一起的做法，固然可減少Request次數，但js檔過於肥大，會讓載入時間變久，而Debug時js檔太大，Debugger處理起來效率不佳。過與不及都不是好事，尺度怎麼拿捏，大家見機行事吧!

PS: 順道推一下小喵介紹的dynDateTime Plugin，我從ASP時代就一直仰賴它的前身解決日期選擇問題，如今有了jQuery Plugin版本，自然要力挺到底了!!

【雛型】Docx套版列印功能試作

Jeffrey — Wed, 29 Jul 2009 11:57:09 GMT

在我的程式開發生涯中，套版輸出指定格式的報表/表單一直是揮之不去的煩人差事，沒什麼營養，偏偏在每個案子裡幾乎都像小強一樣冒出來。

面對這類需求，轉成網頁是下策，因為列印時排版格式常會亂到一塌糊塗，鮮少讓人滿意。在經驗裡，Reporting Service是不錯的選擇(而且免費)。

但有些報表如確認書、通知書，在格式上並非Gird格式，跟Reporting Service最擅長的表格呈現有點差距，數量一多，要將User提供的Word檔一一轉成Reporting Service報表便成了苦差事，尤其某些文件被要求必須模仿到跟原始樣版分毫不差，常為了一兩公釐急死大丈夫。(有時，所謂原有樣版不過是某個User信手捻來的作品，並非官頒公訂，也沒人說過排版必須完全相符，但是你也知道的，各地風俗民情不同，尤其是澳洲...)

當以上情境發生，直接把User提供Word樣版裡文字換一換，照樣生出個Word檔來，在我看來是最簡便直覺省工的解法。

依我所知，動態產生Word要在ASP.NET上實現，有幾種解法，個人評估分析如下:

利用Office Automation(就如同VBA操作Word/Excel Object Model的做法)
在Server端(ASP.NET)使用Office Automation技巧有些額外的風險，我自己有過不好的經驗，依MS KB的說法也不建議。
產出HTML後標註ContentType，讓Word/Excel開啟
先前曾貼文介紹過這種做法，但逼真度與真實doc/xls有段差距，例如: doc沒法精確分頁、xls不支援多Worksheet... 等等。
使用3rd Party元件直接產生Office文件
剛才提到的MS KB裡就有些建議的元件廠商，另外還有一家元件廠商ASPOSE的名字也常被提到。只是，元件的價格通常不便宜。
docx/xlsx OpenXML
Office 2007在檔案格式上做了大改革，揚離了過去的獨有二進位格式，變成公開的標準，而docx/xlsx，其實是ZIP起來的一堆XML及資源檔。這麼一來，修改XML也比以前搞封閉的二進位檔案格式簡單多了，也因為標準公開，可用的技術資源也多。
使用docx/xlsx固然便捷，缺點是產出的docx/xlsx Office 2003/2000無法直接開啟，所幸微軟提供了免費的Word Viewer可以用來檢視，另外也有Microsoft Office Word、Excel 及 PowerPoint 2007 檔案格式相容性套件能將docx/xlsx轉存為doc/xls。在我看來，這點是可被容忍的缺陷。因此，我決定設法試做OpenXML的解決方案。

雖然我們可以自行將docx Rename成.zip，解壓縮後取出XML修改再存回壓縮回去，但MS提供了更好的支援服務: (SDK文件裡的範例寫得簡單明瞭，讓我一下子就上手!! 哦哦~~ Open XML Format SDK，我要輕輕為你唱首歌)

Open XML Format SDK 1.0
Open XML Format SDK 2.0 (雖然在物件模型上更為結構化，呼叫起來更方便，但仍在Community Techinal Preview階段)

因為我想做的套版只是更換特定字串，用1.0的寫法也不算太鳥，加上打算用來Production環境，不想承擔CTP的風險。所以我決定現階段先用1.0 SDK正式版來實作，日後有更複雜運用時再改版。

今天只花了幾個小時，還真的把雛型做出來了:

1.先用Word 2007存一個docx檔案，把其中要動態更換的文字用[$keyName$]的格式標起來。(這種[$...$]的格我還為它取了個名字--Parser Tag，從ASP時代，我就一直用它來玩範本套表的把戲)

2.寫一小段程式，把[$keyName$]要更換的文字轉成Dictionary<string, string>，連同範本的檔案路徑一起傳給套表輔助元件DocxHelper，傳回的byte[]就是套表好的docx檔案內容。

    protected void btnExport_Click(object sender, EventArgs e)

        string template = Server.MapPath("Notice.docx");

        Dictionary<string, string> dct = new Dictionary<string, string>()

            { { "today", DateTime.Today.ToString("yyyy-MM-dd") },

              { "name", txtName.Text },

              { "addr", txtAddr.Text },

              { "amount", txtAmount.Text } };

        Response.Clear();

        Response.ContentType = "application/octet-stream";

        Response.AddHeader("content-disposition", "attachment;filename=Notice.docx");

        Response.BinaryWrite(

            Darkthread.OpenXml.DocxHelper.MakeDocx(

                Server.MapPath("Notice.docx"),

                dct)

);

        Response.End();

3.實際跑起來，按下【匯出DOCX】，TextBox裡的文字就會被填進下載的docx中，很棒吧!!

天哪，我真的中了大樂透了嗎? 不會吧? 莫非有人在耍我? (謎之聲: 不就是你自己嗎? 找時間去看一下精神科好唄?)

我打算在手邊的小案子試行這個新元件，陸續蒐集一些問題跟情境，待元件較為成熟後，到時再推出懶人包跟大家分享。

GridView的標題欄、列凍結效果(跨瀏覽器版)

Jeffrey — Tue, 17 Feb 2009 14:10:00 GMT

稍早發表了GridView的標題列凍結效果，足以滿足工作上的需求，不過存在兩個缺點: 只支援FF及IE6/7、只能凍結列不能凍結欄(行)...

不甘心事情只做一半，又挖了一下，驚喜地發現另一個版本: Super Tables，可以支援Firefox 2+, Internet Explorer 5.5+, Safari 3+, Opera 9+ 以及Chrome，而且也支援直欄的凍結效果，在功能上大勝ScrollableTable，二話不說，通通包起來。

SuperTable的原理與ScrollableTable不同，它需要額外的CSS以及在Table外包一層<div>，可視範圍大小由<div> Style決定，設定時參數也較多(如:fixedCols, headerRows...)，所以我寫了一個jQuery Plugin(jquery.superTable.js)把它包起來。有了Plugin的加持，只要一個toSuperTable(options)就可立即升級成有凍結效果的GridView了。

/////////////////////////////////////////////////////////////////////////////////////////

// Super Tables Plugin for jQuery - MIT Style License

// Copyright (c) 2009 Jeffrey Lee --- blog.darkthread.net

//

// A wrapper for Matt Murphy's Super Tables http://www.matts411.com/post/super_tables/

//

// Contributors:

//

/////////////////////////////////////////////////////////////////////////////////////////

////// TO CALL:

// $("...").toSuperTable(options)

//

////// OPTIONS: (order does not matter )

// cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" )

// headerRows : integer ( default is 1 )

// fixedCols : integer ( default is 0 )

// colWidths : integer array ( use -1 for auto sizing )

// onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )

// onFinish : function ( all this.variableNameHere variables created in this script can be used in this function )

// margin, padding, width, height, overflow...: Styles for "fakeContainer"

//

////// Example:

// $("#GridView1").toSuperTable(

//              { width: "640px", height: "480px", fixedCols: 2,

//                onFinish: function() { alert('Done!'); } })

(function($) {

    $.fn.extend(

                toSuperTable: function(options) {

                    var setting = $.extend(

                        width: "640px", height: "320px",

                        margin: "10px", padding: "0px",

                        overflow: "hidden", colWidths: undefined,

                        fixedCols: 0, headerRows: 1,

                        onStart: function() { },

                        onFinish: function() { },

                        cssSkin: "sSky"

                    }, options);

                    return this.each(function() {

                        var q = $(this);

                        var id = q.attr("id");

                        q.removeAttr("style").wrap("<div id='" + id + "_box'></div>");

                        var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];

                        var container = $("#" + id + "_box");

                        for (var p in setting) {

                            if ($.inArray(p, nonCssProps) == -1) {

                                container.css(p, setting[p]);

                                delete setting[p];

                        var mySt = new superTable(id, setting);

});

});

})(jQuery);

完整的Demo程式如下:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)

        DataTable t = new DataTable();

        t.Columns.Add("序號", typeof(int));

        t.Columns.Add("料號", typeof(string));

        t.Columns.Add("單價", typeof(decimal));

        for (int i = 1; i <= 10; i++)

            t.Columns.Add("庫存" + i, typeof(int));

        Random rnd = new Random();

        for (int i = 0; i < 80; i++)

            DataRow row = t.NewRow();

            row["序號"] = i + 1;

            row["料號"] = Guid.NewGuid().ToString().Substring(0, 13).ToUpper();

            row["單價"] = rnd.NextDouble() * 100;

            for (int j = 1; j <= 10; j++)

                row["庫存" + j] = rnd.Next(10000);

            t.Rows.Add(row);

        GridView1.AutoGenerateColumns = false;

        foreach (DataColumn c in t.Columns)

            BoundField bf = new BoundField();

            bf.DataField = c.ColumnName;

            bf.HeaderText = c.ColumnName;

            if (c.DataType == typeof(decimal))

                bf.DataFormatString = "{0:#,0.00}";

            else if (c.DataType == typeof(int))

                bf.DataFormatString = "{0:#,0}";

            bf.ItemStyle.HorizontalAlign =

                (!string.IsNullOrEmpty(bf.DataFormatString)) ?

                HorizontalAlign.Right : HorizontalAlign.Center;

            GridView1.Columns.Add(bf);

        GridView1.DataSource = t;

        GridView1.DataBind();

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

    .altRow { background-color: #ddddff; }

    </style>

    <link href="superTables.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="jquery-1.3.1.js"></script>

    <script type="text/javascript" src="superTables.js"></script>

    <script type="text/javascript" src="jquery.superTable.js"></script>

    <script type="text/javascript">

        $(function() {

            $("#GridView1").toSuperTable({ width: "640px", height: "480px", fixedCols: 2 })

            .find("tr:even").addClass("altRow");

});

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <asp:GridView ID="GridView1" runat="server" Font-Size="9pt" EnableViewState="false">

    </asp:GridView>

    </form>

</body>

</html>

我放了一個線上Demo在http://www.darkthread.net/MiniAjaxLab/ScrollTable ，或者你也可以下載程式包回去玩。

Keywords: fixed column, fixed header, freeze, scroll, excel, datagrid, gridview, html table, plugin, jQuery

[2010-07-26補充]

to 各位網友，關於Super Table，陸續累積了好多網友的提問，不過坦白跟大家說，當初為要動用這個技術解決的工作需求，受限於Javascript在表格欄位超多時的捲動效能表現無法符合User需求，最後還是決定改用Silverlight實作... 因此這部分並未深入嘗試繼續研究了。

我仍有興趣解決一些"小幅修改JS就能克服"的問題，但前題必須要請大家提供"可以示範問題所在的實際網頁範例"，才好射茶包。Super Table所使用的技巧蠻Hacking的，若能簡單滿足需求很好，若必須大幅改造才能適用，我倒覺值得評估一下。(純個人意見)

GridView的標題列凍結效果

Jeffrey — Tue, 17 Feb 2009 05:37:00 GMT

應該有不少人被這麼要求過吧?

"你們做的網頁表格為什麼不能像Excel一樣凍結標題列，底下捲來捲去也不會跑掉?"

前陣子看到一個不錯的Javascript Library，只用一行Code就可以輕鬆做出HTML表格列凍結的效果，剛好部門裡也常有這種需求，我就弄了一個簡單的範例。

大家可以先看Scrollable HTML Table Plugin的範例，它本來是個純Javascript Library，Plugin只是做了簡單的包裝，把new ScrollableTable()一列指令再包起來，意義不大，所以我的示範裡只使用webtoolkit.scrollabletable.js，省去額外載入webtoolkit.jscrollable.js的功夫。

弄了一個虛構的DataTable，Bind到GridView上，稍作處理再var t = new ScrollableTable($("#GridView1")[0], 400, 640);，就變成以下的樣子:

完整程式碼如下:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)

        DataTable t = new DataTable();

        t.Columns.Add("序號", typeof(int));

        t.Columns.Add("料號", typeof(string));

        t.Columns.Add("單價", typeof(decimal));

        t.Columns.Add("數量", typeof(int));

        t.Columns.Add("金額", typeof(decimal), "單價*數量");

        Random rnd = new Random();

        for (int i = 0; i < 200; i++)

            t.Rows.Add(

                i + 1,

                Guid.NewGuid().ToString().Substring(0, 13).ToUpper(),

                rnd.NextDouble() * 100,

                rnd.Next() * 2000);

        GridView1.AutoGenerateColumns = false;

        foreach (DataColumn c in t.Columns)

            BoundField bf = new BoundField();

            bf.DataField = c.ColumnName;

            bf.HeaderText = c.ColumnName;

            if (c.DataType == typeof(decimal))

                bf.DataFormatString = "{0:#,0.00}";

            else if (c.DataType == typeof(int))

                bf.DataFormatString = "{0:#,0}";

            bf.ItemStyle.HorizontalAlign =

                (!string.IsNullOrEmpty(bf.DataFormatString)) ?

                HorizontalAlign.Right : HorizontalAlign.Center;

            GridView1.Columns.Add(bf);

        GridView1.DataSource = t;

        GridView1.DataBind();

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

    #GridView1 tr { border: solid 1px #f0f0f0; }

    #GridView1 td, th { padding: 3px; border: solid 1px white; }

    td, th { padding: 3px; border: solid 1px white; }

    #GridView1 thead tr { background-color: #dddddd; }

    .altRow { background-color: #ddddff; }

    </style>

    <script type="text/javascript" src="jquery-1.3.1.js"></script>

    <script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>

    <script type="text/javascript">

        $(function() {

            $("#GridView1 tr:first").wrap("<thead></thead>");

            $("#GridView1 thead").insertBefore("#GridView1 tbody");

            $("#GridView1 tbody tr:odd").addClass("altRow");

            $("#GridView1").attr("cellspacing", "1");

            var t = new ScrollableTable($("#GridView1")[0], 400, 640);

});

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <asp:GridView ID="GridView1" runat="server" Font-Size="9pt">

    </asp:GridView>

    </form>

</body>

</html>

由於Scrollable HTML Table需要由<thead>, <tbody>區分凍結區及捲動區，而GridView所產生的HTML Table標題列及內容列都放在<tbody>中且無<thead>，因此要做些事後加工，將標題列提取出來，另外放入新增的<thead>中，程式示範了如何jQuery wrap, insertBefore來解決這個問題，都是酷酷地一步到位，蠻值得參考的。

注意: 此解決方案無法跨瀏覽器，目前測試只有IE6, IE7, FF3可用, 不支援IE8, Safari, Chrome, Opera。

【2009-02-18 更新】找到另一個跨瀏覽器且支援標題欄、列凍結的版本，請見: GridView的標題欄、列凍結效果(跨瀏覽器版)

CODE-用Javascript刪除ASP.NET寫入的Cookie

Jeffrey — Thu, 05 Feb 2009 22:03:06 GMT

今天要挑戰的是用Javascript刪除ASP.NET寫入的Cookie。

Client-Side本來就可以由document.cookie取得Cookie，其為一字串，格式類似cookie1=value1;cookie2=value2;cookie3=value3，要用得自行拆解，但不乏現成的共用函數可以代勞。若網頁有引用jQuery，jQuery Cookie Plugin是不錯的選擇。

要用jQuery Cookie Plugin刪除Cookie可以寫成$.cookie("CookieName", null);，但如果要刪除ASP.NET寫入的Cookie，必須要提供與Server端寫入時完全一致的Path、Domain、Expires才能成功。因此後方的範例程式中，刪除未設有效期限的Cookie，至少要傳入Path="/"，例如: $.cookie("MyCookie", null, { path:"/" });，由於ASP.NET未指定Domain，Client-Side可以傳domain:""或逕行省略。

如果當初寫入Cookie時有設定Expires就比較麻煩些，因為Cookie的細節資訊(如有效期限)只保存在Browser裡，並不會隨Request送回Server，因此Server端連用Request.Cookies["CookieName"].Expires讀不到當初指定的有效期限(讀到的永遠都是0001/01/01 00:00:00)，更甭提Javascript了。除非Javascript端能掌握正確的Expires(透過Hidden傳回前端，或採用事先約定的邏輯，不然就得筊杯了)，否則就無法將Cookie刪除。在以下的範例中，驗證了只要Expires指定正確，有設期限的Cookie還是可以被刪除的(例如: AbsExprCookie)。

<%@ Page Language="C#" %>

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)

        if (!Page.IsPostBack)

            //不設期限

            Response.Cookies.Add(new HttpCookie("MyCookie", "Darkthread"));

            //設相對期限

            HttpCookie c = new HttpCookie("RelExprCookie", "Darkthread");

            c.Expires = DateTime.Now.AddMinutes(10d);

            Response.Cookies.Add(c);

            //設絕對期限

            c = new HttpCookie("AbsExprCookie", "Darkthread");

            c.Expires = DateTime.ParseExact("2009/02/28", "yyyy/MM/dd", null);

            Response.Cookies.Add(c);

    protected void btnCheckCookie_Click(object sender, EventArgs e)

        StringBuilder sb = new StringBuilder(

            "Cookies Count=" + Request.Cookies.Count.ToString() + "<br />");

        foreach (string ck in Request.Cookies.Keys)

            HttpCookie c = Request.Cookies[ck];

            sb.AppendFormat(

                "<li>[{0}]={1}<br />Path={2}, Domain={3}, Expires={4}",

                c.Name, c.Value, c.Path, c.Domain, c.Expires);

        lblDisp.Text = sb.ToString();

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Cookie Test</title>

    <script type="text/javascript" src="../js/jquery-1.3.1.js"></script>

    <script type="text/javascript" src="../js/jquery.cookie.js"></script>

    <script type="text/javascript">

        $(function() {

            if (document.cookie && document.cookie != '') {

                $("#dvDisp").html(

                    "<li>" + document.cookie.replace(/;/g, "<li>")

);

            $("#btnDelCookie").click(function() {

                $.cookie("MyCookie", null, { path:"/" });

                $.cookie("AbsExprCookie", null,

                    { path:"/", expires: new Date(2009, 2, 28) });

                alert("Cookies deleted!");

});

});

    </script>

    <style type="text/css">

    body, html { font-size: 9pt; padding: 5px; }

    fieldset { height:150px; width: 300px;

               text-align: left; padding: 10px;}

    .fldDiv { background-color: #dddddd; margin-top: 20px;

              width:330px; height: 180px; text-align:center;}

    #btnDelCookie { color: Blue; text-decoration: underline;

                    cursor: pointer; }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Button ID="btnCheckCookie" runat="server" Text="Check Cookie"

            onclick="btnCheckCookie_Click" />

        <div class="fldDiv">

        <fieldset>

        <legend>Server View</legend>

        <asp:Label ID="lblDisp" runat="server" Text="N/A"></asp:Label>

        </fieldset>

        </div>

        <div class="fldDiv">

        <fieldset><legend>Client View</legend>

        <div id="dvDisp"></div>

        </fieldset>

        </div>

        <span id="btnDelCookie">Delete Cookie</span>

    </div>

    </form>

</body>

</html>

網頁跑起來如下圖，Delete Cookie按鈕可以刪除MyCookie及AbsExprCookie，RelExprCookie的有效期限對Javascript來說是個謎，無從刪起。刪除後按下Check Cookie，Server端會發現那個兩Cookie不見了，表示刪除成功。

CODE-定時自動更新的UpdatePanel

Jeffrey — Thu, 11 Dec 2008 20:21:00 GMT

雖然上回已明白揭示過UpdatePanel傳輸效率不佳的事實，剛好有同事請我提供網頁部分內容定期自動更新的範例。想了一下，UpdatePanel還是最佳的解決方案，理由是:

開發人員較少Javascript的開發經驗，但ASPX經驗豐富。
該網頁使用者人數不多，更新頻率不高(約一分鐘一次)。
需求很急迫，不是學新東西的好時機，希望使用的技術愈簡單愈易實作愈好。

符合上述條件的技術選項，毋庸置疑，非UpdatePanel莫屬!! (再次證明，"沒有一無是處的技術，只有用錯場合的白目")

我寫了以下的範例，用一個UpdatePanel包住Label1，另外放了一個Timer1，設定一秒Tick一次，至於UpdatePanel，當然就用Timer1的Tick作為觸發事件，更新Label1.Text就寫在Timer1_Tick裡。另外，我設了按鈕可以透過CSS display屬性決定UpdatePanel顯示與否，驗證隱藏時會持續更新。(為求單純化，我連jQuery都沒拉進來)

程式碼如下，給有需要的人參考吧!

<%@ Page Language="C#" %>

<script runat="server">

    protected void Timer1_Tick(object sender, EventArgs e)

        Label1.Text = DateTime.Now.ToString();

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <input type="button" value="Show"

onclick="$get('dvDisp').style.display='block';" />

    <input type="button" value="Hide"

onclick="$get('dvDisp').style.display='none';" />

    <div id="dvDisp">

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

        </ContentTemplate>

        <Triggers>

        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

        </Triggers>

        </asp:UpdatePanel>

        <asp:Timer ID="Timer1" runat="server"

ontick="Timer1_Tick" Interval="1000">

        </asp:Timer>

    </div>

    </form>

</body>

</html>