使用 jQuery CSS JSON和 ASP.NET的脸谱网收件箱样式网格

分享于 

9分钟阅读

Web开发

  繁體

介绍

这是一个类似Facebook收件箱风格的网格。 这个网格提供了绑定数据和添加像删除当前行。扩展行和链接到另一个页面的Facebook样式事件的可能性。

控件使用以下方法:

  • 向web服务器发送一个 jQuery AJAX请求以获取JSON格式的新闻
  • 创建行和列并将数据绑定到 table 行
  • 在数据绑定之后设置控件样式
  • 用户交互
  • 更改和设置样式
  • jQuery效果

grid控件使用 ASP.NET 从数据存储中收集数据( 例如: 数据库,XML文件,RSS,。"。"。) 并将它的发送到客户端并将它的绑定到网格。

这个组件使用开源 Json.NET 库,使. NET 格式的数据更容易在中使用。 关键特性包括灵活的JSON序列化程序,用于快速将. NET 类转换为JSON并再次返回。 在这里阅读更多关于 Json.NET 库( 代码,示例和文档) 的信息。 了解更多关于循环插件在这里的内容。

使用代码

你所需要使用的控件是:

  • 在HTML页( .aspx 页) 中引用所需资源,并将UserControl嵌入到 页中。
  • <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="homePage.aspx.cs"Inherits="_homePage"%><%@RegisterSrc="~/FBInbox.ascx"TagName="FBInbox"TagPrefix="ctrl"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><linkhref="facebook.css"rel="stylesheet"type="text/css"/><scriptsrc="jquery.js"type="text/javascript"></script><scriptsrc="jquery.cycle.all.min.js"type="text/javascript"></script><scriptsrc="Facebook.js"type="text/javascript"></script><scriptsrc="jquery.floatobject-1.0.js"type="text/javascript"></script><title>Facebook Inbox</title></head><body><formid="form1"runat="server"><div><imgsrc="Images/facebook.png"/><ctrl:FBInboxrunat="server"id="FBInbox1"/></div></form></body></html>
  • 通过调用控件DOM末尾的JavaScript Grid2() 函数来启动控件。 这个函数向服务器发送一个AJAX请求,以JSON格式获取数据,并将数据绑定到网格控件。
  • <script type="text/javascript">
     new Grid2('#Container');
    </script>

Facebook收件箱功能

BindInboxRows: function() {//public varvar myInbox;
myInbox=this.Inbox;//create Grid rows and columns for (var index = 0; index <this.Inbox.length; index++) { 
 this.getElement('.facebookTable').append($('<tr><td width=200>' + 
 '</td><td width=480></td><td class="closeTD" ' + 
 'width=20><div class="closeDiv">X</div></td></tr>'));
 this.getElement('.facebookTable tr:eq(' + index + ') td:first').append($(
 '<img width=50 height=50 align=middle/>').attr(
 'src',this.Inbox[index].imgSrc));
 this.getElement('.facebookTable tr:eq(' + index + 
 ') td:eq(0)').append($('<span></span>').text(' '));
 this.getElement('.facebookTable tr:eq(' + index + ') td:eq(0)').append($(
 '<a id=titleLink target=_blank></a>').text(this.Inbox[index].Title));
 this.getElement('.facebookTable tr:eq(' + index + ') #titleLink').attr(
 'href', this.Inbox[index].LinkSrc);this.getElement(
 '.facebookTable tr:eq(' + index + ') td:eq(1)').append($(
 '<div class="desc"></div>').text(
 this.Inbox[index].Summary.substring(0,70) + '.. .' ));
}// add click event to desc columnthis.getElement('.desc').click(function(event){
 $(this).animate({height: '100px'}, 500); 
 var RowIndex =$(this).parent().parent().attr('sectionRowIndex'); 
 $(this).text(myInbox[RowIndex].Summary); 
}); //add click event to close button$('.closeDiv').click(function(){
 var RowIndex = $(this).parent().parent().attr('sectionRowIndex'); 
 myInbox.splice(RowIndex,1);
 $(this).fadeOut('slow', function() {$(this).parent().parent('tr').remove();}); 
});//add RollOver event to close buttonthis.getElement('.closeDiv').hover(function(event){
 $(this).addClass('closeDivhover');
}, function() {
 $(this).removeClass('closeDivhover');
});
},
BindInbox: function() {
 this.BindInboxRows();
 var that = this;
},

在客户端,我们使用jQuery调用服务器方法,并向它发送AJAX请求。

//call ASP.NET page method asynchronous (send and recives data in JSON format) PageMethod:function(fn, paramArray, successFn, errorFn) {
 var pagePath = window.location.pathname;
 var that = this;
 //Call the page method $.ajax({
 type: "POST",
 url: pagePath + "?Callback=" + fn,
 contentType: "application/json; charset=utf-8",
 data: paramArray,
 dataType: "json",
 //that is a reference to the object calling this callback method success: function(res) { successFn(res, that) },
 error: errorFn
 });
}

它还需要服务器端机制收集数据。将数据转换为JSON格式并将它的发送到客户端。 在服务器端,我们有:

// Callback routingpublicvoid HandleCallbacks()
{
 // *** We have an action try and match it to a handlerswitch (Request.Params["Callback"])
 {
 case"fillGrid":
 this.FillGrid();
 break;
 }
 Response.StatusCode = 500;
 Response.Write("Invalid Callback Method");
 Response.End();
}publicvoid FillGrid(){
 List<GridItem> lsttst = new List<GridItem>();
 lsttst.Add(new GridItem(this.ResolveUrl("~/images/img1.jpg"), 
 "Arlen Navasartian", 
 "http://sites.google.com/site/arlen4mysite/", 
 "My name is Arlen Navasartian, I put some useful" + 
 "codes in this site. I believe to share my knowledge with" + 
 "others because I learn from others. I want to thank" + 
 "CodeProject for this opportunity that everyone can share" + 
 "the knowledge with others."));
 lsttst.Add(new GridItem(this.ResolveUrl("~/images/img2.jpg"), 
 "Name Family2", "http://www.msn.com", 
 "This is a description about image 2 you can read more details" + 
 "about image 2 and read more news about image 2 by clicking the link"));
 lsttst.Add(new GridItem(this.ResolveUrl("~/images/img3.jpg"), 
 "Name Family3", "http://www.msn.com", 
 "This is a description about image 3 you can read more" + 
 "details about image 3 and read more news about" + 
 "image 3 by clicking the link"));
 lsttst.Add(new GridItem(this.ResolveUrl("~/images/img4.jpg"), 
 "Name Family4", "http://www.microsoft.com", 
 "This is a description about image 4 you can read more details" + 
 "about image 4 and read more news about image 4 by clicking the link"));
 lsttst.Add(new GridItem(this.ResolveUrl("~/images/img5.jpg"), 
 "Name Family5", "http://www.test.com", 
 "This is a description about image 5 you can read more details about" + 
 "image 5 and read more news about image 5 by clicking the link"));
 Response.ContentType = "application/json; charset=utf-8";
 Response.Write(Newtonsoft.Json.JavaScriptConvert.SerializeObject(lsttst));
 Response.End();
}

源代码包含注释以说明有关这里控件如何工作的更多详细信息。

历史记录

  • 第八个 2010年01月: 初始版本。

asp  asp-net  style  GRID  Facebook  收件箱  
相关文章