...and I want to display it in my Facebook Application, for example, using the GridView control like this:

How do we go about developing this? First (or not so first) thing first: create or add a new application in Facebook Developers. I have mine set up as:

Now open your favorite Visual Studio (I am using Visual Studio 2005) and start/create a new ASP.NET website. I am using C# in this article, but you can adapt the code for VB.NET. Don't forget to add references to the Facebook Developer Toolkit library:

In the first (and only) ASP.NET form (chances are, it's called Default.aspx), open the page and add the GridView control to it.

FacebookDB is a middle layer to interface with the SQL Server database. However, let's also explore the options that FBML adds to your Facebook Application, so we can create a Facebook-like application, something like this:

Notice the calls to select_object() JavaScript (FBJS) for each row. So, when the user clicks on the "select..." link of the grid row, the page will display the selected row and will allow the user to perform some actions on selected items:

Notice that I'm using Animation() to show the DIV element; see FBJS/Animation for more information. As you can see, in order to change SPANinnerText, I'm using the setTextValue() method. For a button, I'm using setValue(). To provide the user with the ability to select a Friend, we can add the <fb:friend-selector idname="textSelectedFriend" /> FBML element (more at Fb:friend-selector).

* Notice the idname attribute of the <fb:friend-selector> element. It is the name of the hidden form element that contains the user ID of the selected friend when the form is being submitted, as we will see later on. The same section can be built using the <fb:editor> element (see more at Fb:editor):

So, at this point we have a nice-looking form that presents a list of items and allows the user to select a Friend... but it would be nice if the application could pass that information back to us, yeah? Do you remember the server-side button buttonSend I had:

When the user clicks on this button, the page supposed to a) check user input, i.e. if a Friend is entered and b) submit the information back. Let's check user input when the form is about to be submitted. On the ASPX page, I added JavaScript (FBJS):

Here, I'm using Dialogs provided by FBJS (see more at Dialogs) and the result is stunning!

If input passes the validation check (in this example, we only check if the user selects/enters a Friend), then the page is submitted and we have a chance to save selected data into the database. Hooray!

* Notice the reference to the Page.Request.Form["textSelectedFriend"] form field from the <fb:friend-selector> element. No, we didn't create this element on the page. Instead, the Facebook platform added it "dynamically." You can also use other types of Dialogs, for example, DIALOG_CONTEXTUAL:

To display such s CONTEXTUAL dialog, we can use "inline" JavaScript (FBJS):

If you need to "insert" a page within your application FBML canvas, you can use the <fb:iframe> element (see more at Fb:iframe). For example, I employ the <fb:iframe> element to reference an ASPX page in order to retrieve a user IP address via Request.ServerVariables["REMOTE_ADDR"]. Remember that the FBML application is within the canvas within Facebook... so you'll get something like 204.15.23.168, which is the IP address of the Facebook server, not of your user. Then, based on the given IP address, I can display various information, for example the weather forecast:

One of the featured of FBML and FBJS is the ability to display standard dialogs (see above: Using FBJS Dialogs). We can use one of standard dialogs to display dynamic content, for example, the list of records from the SQL Server database:

So, when the user clicks on the "show...history" link in the main Grid, the application shows records from the database. In order to get anything back from the database or from the server-side, the application needs to "post-back." Fortunately, FBJS has built-in support for AJAX (see more at Mock AJAX). So, we can post-back to the server and patiently wait for a reply:

Basically, object_action_history.aspx, when it returns from ajax.post() to ajax.ondone(), gives nothing more than just a "rendered" GridView. Then, in JavaScript (FBJS) on ajax.ondone, we take that data and "shovel" it down Dialog.showMessage():

So far, so good. We have a Facebook-like interface; the user selects data; the selected data is being saved in the database. However, I forgot that Facebook really is a social network: it's about social interactions... Let's add "social interaction" in the form of user notifications to our Facebook Application. Thanks to the Facebook Developer Toolkit library, notifications are very easy to do:

To send a notification, we need to call the SendNotification() method and pass the notification text and ID of a Facebook user. In this code, the ID is of a selected Friend. Because I'm too lazy, the notificationTextToFriend notification text is built into the stored procedure, not into the application code. However, you can "compose" notification in the code, as well. The result is something like this:

Hi Aleksisa-
I have a facebook page with a search button on it. I got it working but when the search button is hit - the page redirects to the facebook application and hence looses its tabs. Please help me in getting the results in the same page.

If you remove the line "<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="HotBuzz_Default" %>" you won't get the FBML error but obviously we need to use code behind files.

Does any one have any idea what is wrong and what we can do it fix it?