Click here to Skip to main content
Click here to Skip to main content

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

, 7 Jan 2010
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

Comments and Discussions

 
GeneralMy vote of 4 PinmemberAamir Shahzad Web Developer4-Jun-13 20:16 
GeneralMy vote of 4 PinmemberRusselSSC27-Jan-11 12:16 
GeneralExcellent PinmemberPranay Rana20-Dec-10 0:35 
QuestionCool stuff Pinmemberslimtugo16-Dec-10 6:42 
QuestionSerialize object PinmemberMember 55749599-Feb-10 0:37 
AnswerRe: Serialize object PinmemberArlen Navasartian9-Feb-10 10:25 
GeneralGood Job PinmemberViresh Shah11-Jan-10 19:26 
GeneralRe: Good Job PinmemberArlen Navasartian11-Jan-10 21:09 
GeneralTry using templates PinmemberSteven Berkovitz10-Jan-10 7:21 
GeneralRe: Try using templates PinmemberArlen Navasartian10-Jan-10 9:10 
GeneralMy vote of 1 PinmemberLeleHalfon8-Jan-10 0:52 
GeneralRe: My vote of 1 PinmemberSimon Capewell8-Jan-10 1:59 
GeneralRe: My vote of 1 PinmemberBassam Saoud25-Jan-10 6:42 
GeneralRe: My vote of 1 PinmemberArlen Navasartian8-Jan-10 8:00 
GeneralRe: My vote of 1 Pinmemberasdasdasd2asd13-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 | Mobile
Web04 | 2.8.140821.2 | Last Updated 8 Jan 2010
Article Copyright 2010 by Arlen Navasartian
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid