JSON实现桌面可移动的小便签

  大多数的管理系统都会有个主程序的桌面，而且上面放置了一个常用的快捷方式或便捷的信息，比如邮件，通知，即丰富了系统内容又能够使用户在第一时间内浏览的信息。

    跟XML相比，JSON的优势在于格式简洁短小，生成后的数据大小改变不大，且易于处理。特别是在处理大量复杂数据的时候，这个优势便显得非常突出。从各浏览器的支持来看，XML需要DOM来解析，而不同浏览器厂商的支持的XMLDOM又有所不同，这给WEB开发者或多或少带来不少困难，特别是在AJAX被大家普遍使用来后，不少开发者都不是返回XML，而是返回HTML片断或是其他格式的系列化串，除非产品仅限使用IE时在必要的时候才会使用XML来传输。JSON则没有这方面的问题，它不需要另外的解释器，得到了大多数语言和浏览器的支持，应用非常广泛。这些使得JSON在WEB开发中拥有巨大的优势。Digg，Yahoo等等大型网站便是采用JSON来进行数据传输的。<摘自于百科知识>

  首先建立一个....ashx后缀的文件，ashx 文件用于写web handler的，这个文件类似于.aspx文件，可以通过它来调用HttpHandler类，从而免去了普通.aspx页面的控件解析以及页面处理的过程，我们就建立一个GetOAJournal.ashx 的文件，处理工作简报信息。一般处理程序包含了ProcessRequest()方法，

IList<FDA.OA.Model.OAInformation> list = bll.GetOAInformationByWhere(strWhere);

StringBuilder sb = new StringBuilder();
sb.Append("[");
for (int i = 0; i < list.Count; i++)
{
if (i > 0)
sb.Append(",");
string ProcessUrl = string.Format("../OA/OAInformation/OAJournalView.aspx?OAPubId={0}&PvId={1}", list[i].OAPubId, list[i].OAPubTypeId);
sb.AppendFormat("{{\"Title\":\"{1}\",\"CreateDate\":\"{3}\",\"ProcessUrl\":\"{4}\"}}", list[i].OAPubId, StringUtil.PadRight("[" + list[i].OAPubTypeName + "]" + list[i].Title.Replace("'", "“"), 25), list[i].Publisher.Trim(), ParameterFilter.GetDate(list[i].CreateDate, "MM-dd"), ProcessUrl, DateTime.Now.AddDays(-7) > Convert.ToDateTime(list[i].CreateDate) ? "" : "true");

}
sb.Append("]");
context.Response.ContentType = "text/json";
context.Response.Write(sb.ToString());

写好了一般处理程序后，我们开始写JS了，新建立一个desktopBox.js文件，这个文件包含了所有的桌面选项，如果以后加其他的内容，都可以在这里进行拓展，

function LoadOAJournalBox(fdaId,pvId,NoticeInformationContainer, NoticeInformationLoadTooltip){
$.getJSON("../OA/Desktop/GetOAJournal.ashx?f="+fdaId+ "&p=" + pvId ,function(json){
// 获取显示内容
var ul = document.getElementById(NoticeInformationContainer);
var div = document.getElementById(NoticeInformationLoadTooltip);

if(json.length == 0){
desktopBox.setOAJournal(ul,json);
div.style.display = "none";
}
});
}

desktopBox.setOAJournal = function(ulContainer, json){
var li, a, span,img, em;
for (var i = 0; i < json.length; i++) {
li = document.createElement("li");

//增加链接
a = document.createElement("a");
a.className = 'leftpadding';
a.setAttribute("href", json[i].ProcessUrl);
// 添加属性，通知预览重新打开窗口
a.setAttribute("target",'_blank');

a.title = json[i].Title + "\n发布时间：" + json[i].CreateDate;
this.setInnerText(a, json[i].Title);
li.appendChild(a);

//增加span
span = document.createElement("span");
span.className = 'rightpadding';
this.setInnerText(span, "（" + json[i].CreateDate + "）");
li.appendChild(span); 



ulContainer.appendChild(li);
}

};

相关的处理程序都写好以后，开始调用这个方法来展示数据了，由于页面上可能存在许多的可配置信息框，所有在次展现页面使用用户控件，

前台: