asp.net 开发 跬步篇(2) JQuery +ashx 升级之 JSon

      前一阵看到一断java的代码，想到了.net中 .ashx文件的应用。实践了一下jquery＋.ashx 实现分页的代码。贴在了园子里面。很多园子里面的兄弟们都给与了意见，非常感谢！当时我写这个主要也只是验证一种思想，我以前一直作winform的开发，转到web这边也就1年的时间吧。一直在用web控件、虽然它的这种编程的方式很熟悉，很容易理解，但是总感觉不是很爽，感觉交互上不是很好，总刷、刷的。在逐渐学习中。慢慢发现了web的知识面真的很大，并不是说熟练的c#语言运用就足够的。c#只是web实现的一个语言而已，本身有优点，但是也有与其它语言相比的不足，我这里特指的javascript。还有现在流行的一些javascript的框架，真是很强大。我的废话真是多啊～ －0－！
       言归正传，今天我要说的是在 jquery＋.ashx 实现分页的基础上，说一下JSon的应用，当时很多兄弟都说了JSON的好处，以前我也只是在返回简单的单个对象上用。这次，说一下返回JSON数据集和。 
      还是以实际项目功能来说。我的一个项目上，需要一个无刷新得到客户联系人集合的功能，也就是在页面上客户信息动态的前提下，在选中客户的时候无刷新的调取联系人集合信息，并以列表的形式显示出来。
      首先，我想到了用div承载联系人table 控制。用.ashx请求服务器数据集合、然后在服务端生成table字符串。返回该字符串后用javascript脚本控制div的innerHtml的内容。大概思路没什么大的出入，可能在实现方式上每个人有不同的看法。结合一些建议，决定用 JQuery＋.ashx+JSON 来实现。
      代码实现上，有几个部分
      1、.ashx 文件的编写；
      2、js 文件控制JSon绑定客户端Table的。
      3、页面请求。
       .ashx的实现、没什么大的问题，也就是c#服务端代码取到数据。下面贴出主要的代码

 /// <summary>
        /// 根据HTTP的请求信息查询并输出相应的信息
        /// </summary>
        /// <param name="request">请求中附带的各个字段及值</param>
        /// <returns>可输出的信息字符串</returns>
        public StringBuilder Response(System.Collections.Specialized.NameValueCollection request)
        {
            switch (request[KEY_CUST_INFO_TYPE])
            {
                case VAL_INFO_TYPE_CONTACT_LIST:
                    return GetContactList(request[KEY_CUST_ID], request[KEY_RESULT_TYPE]);
                default: return new StringBuilder();
            }
        }
       private StringBuilder GetContactList(string cust_id, string result_type)
        {
            StringBuilder sb = new StringBuilder();
            //TODO 根据不同的result_type，生成不同的列表：JSON数组、表格等
            //定义一个函数
            sb.AppendLine("(function () {");
            //生成联系人信息数组
            sb.AppendLine("var inner_cust_list = new Array();");
            int custid = 0;
            if (int.TryParse(cust_id, out custid) && custid > 0)
            {
                  string sql = "查询SQL语句";
                DataSet ds = 得到数据集;
                if (ds.Tables.Count > 0)
                {
                    DataTable dt = ds.Tables[0];
                    foreach (DataRow dr in dt.Rows)
                    {
                        //向联系人数组添加一个联系人对象
                        sb.AppendLine("inner_cust_list.push({");
                        RowToJSON(sb, dt, dr);
                        sb.AppendLine("});");
                    }
                }
            }

            sb.AppendLine("return inner_cust_list;");
            sb.AppendLine("} ())");
            return sb;
        }

        /// <summary>
        /// 从一个数据行生成一个JSON字符串
        /// </summary>
        /// <param name="sb">JSON字符串输出的位置</param>
        /// <param name="dt">数据表（用于获取列信息）</param>
        /// <param name="dr">数据行</param>
        public static void RowToJSON(StringBuilder sb, DataTable dt, DataRow dr)
        {
            foreach (DataColumn col in dt.Columns)
            {
                if (col.Ordinal > 0)
                {
                    sb.Append(",");
                }
                sb.Append(col.ColumnName);
                sb.Append(":");
                object o = dr[col.Ordinal];
                if (o == null || Convert.IsDBNull(o))
                {
                    sb.AppendLine("null");
                }
                else
                {
                    if (o is string)
                    {
                        string str = (string)o;
                        sb.AppendLine("'" + str.Replace("\'", "\\\'") + "'");
                    }
                    else if (o is DateTime)
                    {
                        DateTime t = (DateTime)o;
                        sb.AppendLine("'" + t.ToString("yyyy-MM-dd HH:mm:ss") + "'");
                    }
                    else
                    {
                        sb.AppendLine(o.ToString());
                    }
                }
            }
        }

ok。.ashx文件返回数据集JSON了。剩下的就是页面的绑定，

function btnGetContacts_onclick(btn, custid) {
    $.get("../请求路径", {cust_id: custid, info_type: "contact_list"}, function (jsonstr) {
        var arrContact;
        try {
            arrContact = eval(jsonstr);
        } catch (e) {
            arrContact = new Array();
        };
       
        listContacts(arrContact, btn, custid);
        
    });
}

function contactToRow(tb, contact, cust_id) {
    var tr = tb.insertRow(-1);
    tr.onclick = "revisit('" + cust_id + "', '" + contact.contact_id + "', '" + contact.contact_name + "', '" + contact.phone_no + "')";
    tr.insertCell(-1).innerHTML = contact.contact_name ? contact.contact_name : "&nbsp;";
    tr.insertCell(-1).innerHTML = contact.job_name ? contact.job_name : "&nbsp;";
    tr.insertCell(-1).innerHTML = contact.phone_no ?
        ("<a style='cursor:pointer' onclick=\"revisit('" + cust_id + "', '"
        + contact.contact_id + "', '" + contact.contact_name + "', '"
        + contact.phone_no + "')\">" + contact.phone_no + "</a>")
    : "&nbsp;";
    tr.insertCell(-1).innerHTML = contact.phone_type_name ? contact.phone_type_name : "&nbsp;";
}

function listContacts(arrContact, btn, cust_id) {
    var tb = document.getElementById("tbodyContact");
    if (!tb) return;
    
    while(tb.rows.length > 0) {
        tb.deleteRow(0);
    }
    
      for (var i = 0; i < arrContact.length; i ++) {
        contactToRow(tb, arrContact[i], cust_id);
    }
    try {
    } catch (e) {
    }
    showContacts(btn);
}

function hideContacts() {
    var pnl = document.getElementById("pnlContactList");
    if (pnl) {
        pnl.style.display = "none";
    }
}

function showContacts(btn) {
    if (!btn) return;
    
    var pnl = document.getElementById("pnlContactList");
    if (pnl) {
        e = btn;
        pnl.t = e.offsetTop;
        pnl.l = e.offsetLeft;
        while (e = e.offsetParent) {
            pnl.t += e.offsetTop;
            pnl.l += e.offsetLeft;
        }
        pnl.t += btn.offsetHeight;
        pnl.style.top = pnl.t + "px";
        pnl.style.left = pnl.l + "px";
        pnl.style.display = "";
    }
}
  

代码中的listContacts、contactToRow 方法完成了页面承载联系人的的Table的html代码的生成。

btnGetContacts_onclick 是触发事件，我是用联系人文本框的onfouce事件触发。这样我只要点击某个联系人的文本框，刷！就会在它的下方出现一个div里面是联系人table。点击div意外的区域，就隐藏这个div。在下次取别的数据的时候，将table清空生成新的table替代。
运行，非常完美..在这就不在贴出图片了，偷懒了。

总结：在这个实例中，我收获最大的就是对JSON的灵活性有一个新的认识。以前知道这个概念，但是也就是简单的用用，一到相对复杂的地方，就喜欢用自己熟悉的c#来解决，在实用后发现它也不麻烦，就是一个怎么用过的过程。建议各位学习的兄弟这个东东必须学会啊，因为它真的很实用。哈哈。
其它的 就是.net的 ashx文件的使用、jquery框架的熟练。

最后我觉得编程还真实一件很艺术的事情啊。这个才算是一个真正的web程序吧。

以上都是个人认识，有什么不对的，或者更好、更高效的方法、技术、请兄弟们指正、交流！