分享两个实用的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或者异步请求一个独立的页面。