and I want to display it in my Facebook Application. For example, I want to use a GridView control, like this:

How do you go about developing this?

First (or not so first) things first: Create or add a new application in Facebook Developers. I have mine set up as this:

Now, open your favorite Visual Studio (I am using VS 2005), and start/create a new ASP.NET Web site. 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 a GridView control to it.

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

Notice that I am using Animation() to show the DIV element—see FBJS/Animation for more information. As you can see, to change SPAN innerText, I'm using the setTextValue() method, and, for a button, I'm using setValue().

To provide the user with the ability to select a Friend, you can add a <fb:friend-selector idname="textSelectedFriend" /> FBML element (more at Fb:friend-selector).

[Facebook07.gif]

* Notice the idname attribute of the <fb:friend-selector> element: the name of the hidden form element that contains the user ID of the selected friend when form is being submitted, as you will see later on.

The same section can be built by using the <fb:editor> element (see more at Fb:editor):

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

[Facebook09.gif]

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

* Notice the reference to Page.Request.Form["textSelectedFriend"] form field, from <fb:friend-selector> element. No, you didn't create this element on the page; instead, the Facebook platform added it "dynamically".

You also can use other types of Dialogs; for example, DIALOG_CONTEXTUAL:

[Facebook10.gif]

To display such a CONTEXTUAL dialog, you can use "inline" JavaScript (FBJS):

If you need to "insert" a page within your application, the FBML canvas, you can use the <fb:iframe> element (see more at Fb:iframe).

For example, I use the <fb:iframe> element to reference an APSX page to retrieve the user's IP address, by using Request.ServerVariables["REMOTE_ADDR"] (remember that the FBML application is within a 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:

[Facebook12.gif]

In page the code, to reference the <fb:iframe> element, here's what you do:

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

[Facebook13.gif]

To do this, first of all I needed to add a link to the main GridView (see "Using <asp:GridView> with FBML"):

So, when the user clicks the "show...history" link in the main Grid, the application shows records from the database. To get anything back from 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, you 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, just a "rendered" Grid View. Then, in JavaScript (FBJS), on ajax.ondone, you take that data and "shovel" it down Dialog.showMessage():

So far, so good. You have a Facebook-alike interface, the user can select data, and the selected data is being saved in the database. But, I forgot that Facebook really is a social network. it's about social interactions... You can add a "social interaction" in a form of user notification to your Facebook Application.

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