AjaxPro客户端框架总结

由于微软构建asp.net 2.0时对ajax技术的不重视，在04、05年ajax风起云涌之时，在asp.net出现了AjaxPro这个Ajax框架，虽然随着asp.net ajax的发布，AjaxPro被强大的asp.net ajax的光芒覆盖，但AjaxPro的简单易用性方面还是非常不错的。

AjaxPro在客户端会输出三个Core.ashx、Converter.ashx和Prototype.ashx三个文件，其实就是javasript文件。其中Prototype.js对Object建立了extend，然后在extend上增加了Apply和Bin方法，之后的Ajax调用的核心文件Core.ashx就是基于extend上进行的。Prototype.js里对Array,String进行扩展并增加了2个事件方面的方法addEvent与removeEvent方法。

Array对象扩展:

    push: function(o) {
    this[this.length] = o;
},
addRange: function(items) {
    if(items.length > 0) {
        for(var i=0; i<items.length; i++) {
            this.push(items[i]);
        }
    }
},
clear: function() {
    this.length = 0;
    return this;
},
shift: function() {
    if(this.length == 0) { return null; }
    var o = this[0];
    for(var i=0; i<this.length-1; i++) {
        this[i] = this[i + 1];
    }
    this.length--;
    return o;
}

String对象的扩展:

    trimLeft: function() {
    return this.replace(/^\s*/,"");
},
trimRight: function() {
    return this.replace(/\s*$/,"");
},
trim: function() {
    return this.trimRight().trimLeft();
},
endsWith: function(s) {
    if(this.length == 0 || this.length < s.length) { return false; }
    return (this.substr(this.length - s.length) == s);
},
startsWith: function(s) {
    if(this.length == 0 || this.length < s.length) { return false; }
    return (this.substr(0, s.length) == s);
},
split: function(c) {
    var a = [];
    if(this.length == 0) return a;
    var p = 0;
    for(var i=0; i<this.length; i++) {
        if(this.charAt(i) == c) {
            a.push(this.substring(p, i));
            p = ++i;
        }
    }
    a.push(s.substr(p));
    return a;
}

String对象还增加了2个静态方法:

    format: function(s) {
    for(var i=1; i<arguments.length; i++) {
        s = s.replace("{" + (i -1) + "}", arguments[i]);
    }
    return s;
},
isNullOrEmpty: function(s) {
    if(s == null || s.length == 0) {
        return true;
    }
    return false;
}

可以看到扩展的方法都是C#风格的，使得在javasript中能如C#中一样进行字符串与数组操作。更重要的是Converter.js中增加了DataTable、DataSet、Dictionary和NameValueCollection，使得我们可以在客户端组装以上对象并在需要的时候发往服务端。可以想象在服务端的ajax方法接受一个DataTable类型的参数，那是如何的愉快。

一、DataTable

客户端代码：

function SendDataTable() {
    var dataTable = new Ajax.Web.DataTable();
    dataTable.addColumn("id", "System.Int32");
    dataTable.addColumn("name", "System.String");
    var row = new Object();
    row.id = "001";
    row.name = "xiaopang";
    dataTable.addRow(row);
    var ret = ZyYz_Default.HanderDataTable(dataTable);
    alert(ret.value);
}

服务端代码:

[AjaxPro.AjaxMethod]
public int HanderDataTable(DataTable dataTable)
{
    foreach (DataRow dataRow in dataTable.Rows)
    {
        //do somethig...
    }
    return 1;
}

二、DataSet(基本同DataTable，只是类型为Ajax.Web.DataSet)

三、Dictionary:

客户端代码:

function SendDictionary() {

var dictionary = new Ajax.Web.Dictionary("Dictionary<string string="">", [["004", "xiaopang"], ["005", "xiaopang005"]]); dictionary.add("006", "xiaopang006"); alert("是否存在005元素:" + dictionary.containsKey("005") + "值为:" + dictionary.getValue("005")); var ret = ZyYz_Default.HandDictionary(dictionary).value; alert("Dictionary元素数目:" + ret); }</string>

服务端代码:

[AjaxPro.AjaxMethod]
public int HandDictionary(Dictionary<string, string> dictionary)
{
    return dictionary.Count;
}

四、关于直接传递Class

服务端代码:

public class TestClass
{
    public int Id{ get; set; }
    public string Name { get; set; }
}
 
[AjaxPro.AjaxMethod]
public TestClass GetTestClass()
{
    return new TestClass{ Id =002,Name="oldXiaoPang"};
}
 
[AjaxPro.AjaxMethod]
public TestClass PutTestClass(TestClass testClass)
{
    testClass.Id = 003;
    return testClass;
}

客户端代码:

function GetTestClass() {
    var testClass = ZyYz_Default.GetTestClass().value;
    testClass.Name = "newName";
    var newTestClass = ZyYz_Default.PutTestClass(testClass).value;
    alert("原Id为:" + testClass.Id + " 现Id为:" + newTestClass.Id);
    alert(" 现Name为:" + newTestClass.Name);
}