Home »

Tạo grid giống Facebook inbox sử dụng jquery, css, json và asp.net

3 thg 9, 2013

Nếu bạn đã từng dùng facebook, thì bạn sẽ để ý là cái này gần giống với phần inbox trên facebook đó. Và chúng ta sẽ làm nó.

Tạo grid giống Facebook inbox sử dụng jquery, css, json và asp.net

Nếu bạn đã từng dùng facebook, thì bạn sẽ để ý là cái này gần giống với phần inbox trên facebook đó. Và chúng ta sẽ làm nó.

Control này sử dụng các method sau:
  • Gửi một yêu cầu bằng Ajax và nhận kết quả trả về có định dạng Json
  • Tạo hàng và cột sau đó bind dữ liệu vào table
  • Set kiểu của control sau khi bind dữ liệu
  • Tương tác với người dùng
  • Thay đổi và thiết lập styles
  • Thực hiện các hiệu ứng bằng Jquery
Grid control này sử dụng Asp.net để lấy dữ liệu từ cơ sở dữ liệu nào đó (database, XML file, RSS, …) sau đó gửi về phía client và thực hiện bind nó vào grid. Thành phần này sử dụng thư viện Json.Net để thao tác với Json dễ dàng hơn trong asp.net, bạn cũng có thể tìm hiểu thêm về Json tại đây
Tất cả những gì bạn cần để sử dụng control này là:
  • Nhúng các thư viện và control vào website
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <%@ Page Language="C#"
    AutoEventWireup="true" CodeFile="homePage.aspx.cs"
    Inherits="_homePage" %>
    <%@ Register Src="~/FBInbox.ascx"
    TagName="FBInbox" TagPrefix="ctrl" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <link href="facebook.css"
    rel="stylesheet" type="text/css" />
    <script src="jquery.js"
    type="text/javascript"></script>
    <script src="jquery.cycle.all.min.js"
    type="text/javascript"></script>
    <script src="Facebook.js"
    type="text/javascript"></script>
    <script src="jquery.floatobject-1.0.js"
    type="text/javascript"></script>
    <title>Facebook Inbox</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <img src="Images/facebook.png" />
    <ctrl:FBInbox runat="server" id="FBInbox1" />
    </div>
    </form>
    </body>
    </html>
  • Khởi động control bằng cách gọi hàm javascript Grid2(). Hàm này sẽ gửi một yêu cầu bằng Ajax tới server và nhận dữ liệu ở dạng Json, sau đó bind dữ liệu ra control
    ?
    1
    2
    3
    <script type="text/javascript">
    new Grid2('#Container');
    </script>

Facebook Inbox Grid Functions

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
BindInboxRows: function() {
//public var
var 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 column
this.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 button
this.getElement('.closeDiv').hover(function(event){
$(this).addClass('closeDivhover');
}, function() {
$(this).removeClass('closeDivhover');
});
},
BindInbox: function() {
this.BindInboxRows();
var that = this;
},
Ở phía client, chúng ta sử dụng jquery để gọi một method trên server
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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
});
}
Và chúng ta cần một cơ chế phía máy chủ để thu thập dữ liệu, chuyển đổi nó sang định dạng Json, và gửi nó cho client,
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Callback routing
public void HandleCallbacks()
{
// *** We have an action try and match it to a handler
switch (Request.Params["Callback"])
{
case "fillGrid":
this.FillGrid();
break;
}
Response.StatusCode = 500;
Response.Write("Invalid Callback Method");
Response.End();
}
public void 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();
}
Tags:

Comments[ 0 ]


Đăng nhận xét