Click here to Skip to main content
11,648,094 members (60,673 online)
Click here to Skip to main content

Facebook Inbox style grid using jQuery, CSS, JSON, and ASP.NET

, 7 Jan 2010 Ms-PL 44.7K 1.8K 53
Rate this:
Please Sign up or sign in to vote.
An article on how to show records in a Facebook Inbox style grid.

Introduction

This is a grid like Facebook Inbox style. This grid gives us the possibility of binding data and adding Facebook style events like removing the current row, expanding a row, and linking to another page.

The control uses the following methods:

  • Send a jQuery AJAX request to a web server to get news in JSON format
  • Create rows and columns and bind data to table rows
  • Set the control style after data binding
  • Interact with user
  • Change and set styles
  • Do jQuery effects

The grid control uses ASP.NET to gather data from a data storage (for example: database, XML file, RSS, ...), and send it to the client and bind it to a grid.

This component uses the Open Source Json.NET library to make working with JSON formatted data in .NET easier. The key features include a flexible JSON serializer for quickly converting .NET classes to JSON and back again. Read more about the Json.NET library (code, sample, and documentation) here. Read more about the jQuery Cycle plug-in here.

Using the Code

All you need to use this control is:

  • Reference the needed resources in your HTML page (.aspx page) and embed the UserControl in your .aspx page.
  • <%@ 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>
  • Start the control by calling the JavaScript Grid2() function at the end of the control DOM. This function sends an AJAX request to the server, gets data in JSON format, and binds data to the grid control.
  • <script type="text/javascript">
        new Grid2('#Container');
    </script>

Facebook Inbox Grid Functions

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;
},

In the client, we use jQuery to call a server method, sending it an AJAX request.

//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
    });
}

It also needs a server side mechanism to gather data, convert it to JSON format, and send it to the client. And at the server side, we have this:

// 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();
}

The source code contains comments to illustrate more details about how this control works.

History

  • 8th January, 2010: Initial version.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

Arlen Navasartian
Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 4 Pin
Aamir Shahzad Web Developer4-Jun-13 20:16
memberAamir Shahzad Web Developer4-Jun-13 20:16 
GeneralMy vote of 4 Pin
RusselSSC27-Jan-11 12:16
memberRusselSSC27-Jan-11 12:16 
GeneralExcellent Pin
Pranay Rana20-Dec-10 0:35
memberPranay Rana20-Dec-10 0:35 
QuestionCool stuff Pin
slimtugo16-Dec-10 6:42
memberslimtugo16-Dec-10 6:42 
QuestionSerialize object Pin
Member 55749599-Feb-10 0:37
memberMember 55749599-Feb-10 0:37 
AnswerRe: Serialize object Pin
Arlen Navasartian9-Feb-10 10:25
memberArlen Navasartian9-Feb-10 10:25 
GeneralGood Job Pin
Viresh Shah11-Jan-10 19:26
memberViresh Shah11-Jan-10 19:26 
GeneralRe: Good Job Pin
Arlen Navasartian11-Jan-10 21:09
memberArlen Navasartian11-Jan-10 21:09 
GeneralTry using templates Pin
Steven Berkovitz10-Jan-10 7:21
memberSteven Berkovitz10-Jan-10 7:21 
GeneralRe: Try using templates Pin
Arlen Navasartian10-Jan-10 9:10
memberArlen Navasartian10-Jan-10 9:10 
GeneralMy vote of 1 Pin
LeleHalfon8-Jan-10 0:52
memberLeleHalfon8-Jan-10 0:52 
very poor
GeneralRe: My vote of 1 Pin
Simon Capewell8-Jan-10 1:59
memberSimon Capewell8-Jan-10 1:59 
GeneralRe: My vote of 1 Pin
Bassam Saoud25-Jan-10 6:42
memberBassam Saoud25-Jan-10 6:42 
GeneralRe: My vote of 1 Pin
Arlen Navasartian8-Jan-10 8:00
memberArlen Navasartian8-Jan-10 8:00 
GeneralRe: My vote of 1 Pin
asdasdasd2asd13-Jan-10 23:10
memberasdasdasd2asd13-Jan-10 23:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150804.4 | Last Updated 8 Jan 2010
Article Copyright 2010 by Arlen Navasartian
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid