分享兩個實用的ASP.NET開發技巧——使用WebMethod實現ajax和控件的ClientIDMode屬性

一、首先來介紹的是ClientIDMode屬性，該屬性是.net 4.0才推出，可謂是千呼萬喚始出來，關於它的官網介紹http://msdn.microsoft.com/zh-cn/library/system.web.ui.control.clientidmode.aspx。當然了msdn啰啰嗦嗦，我感覺對我最有用的就是在服務控件設置ClientIDMode="Static"，注意任何WebForm的服務控件都具有該屬性，包括設置為runat="server"的Html控件。首先來回歸以前使用腳本控制服務端控件的場景，假設我有一個TextBox

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

　　那么我要在js里獲取其值，只能使用嵌套服務端代碼ClientID來得到它的ID，如下

var dom = document.getElementById('<%= TextBox1.ClientID %>');

　　這種取ID方式相當麻煩，但是現在有ClientIDMode，一切就好辦了，看以下的控件設置，

<asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox>

　　然后就可以輕松的想一般HTML標簽一樣去獲取它了

var dom = document.getElementById("TextBox1");

　　

二、使用WebMethod實現ajax異步請求。

首先在后台代碼文件aspx.cs的頁面類里添加如下方法，很簡單，該方法聲明的WebMethod特性我想用過Web Service的一點都不陌生。

        [System.Web.Services.WebMethod]
        public static string GetString(string name)
        {
            return "Hello " + name;
        }

接着在頁面編寫相關的jquery，可惜的是這里只能用jq的ajax函數，而且格式要json，也不能是get請求方式。

$.ajax({
            type: "POST",
            url: "WebMethodDemo.aspx/GetString",
            async: false,
            data: "{'name':'kevin'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert(msg.d);
            },
            error: function (msg) {

　　　　　　　　　alert(msg.responseText);

            }

        });

細心的你可能發現data參數是一個json格式的字符串，是的沒看錯，只能這么寫，當然了，如果說參數很多豈不寫得麻煩，並且不能直接與json交互，也不方便，於是可以編寫相應格式轉化函數來幫我們完成這個操作，聲明如下函數

//將json轉化為可傳值到WebMethod的string
        function jsonToString(json) {
            var arr = [];
            var fmt = function (s) {
                if (typeof s == 'object' && s != null) return jsonToString(s);
                return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
            }
            for (var i in json) arr.push("'" + i + "':" + fmt(json[i]));
            return '{' + arr.join(',') + '}';
        }

最后上面的ajax函數里面的data參數就可以寫成

data: jsonToString({name:'kevin'}),

這里有多個參數的話就跟一般的json寫法一樣，比如 jsonToString({name:'kevin',age:18}).值得注意的是后台聲明的方法中，包含的參數必須在前端調用是傳入，否則將報錯而導致不能使用。這里的后台代碼中聲明為WebMethod的方法並不局限於當前頁的后台代碼文件，也就是說可以調用其他地方中聲明的，只要當前項目包含有相應的程序集即可。

最后提醒一下，因為該方式還是基於Web Service，雖然其可以返回json或xml格式，但是大量使用可能對性能會有影響，建議如果是數據量比較大還是使用UpdatePanel或者異步請求一個獨立的頁面。