Search results matching tags 'ASP.NET' and 'Facebook C# SDK'

Data Visualization in Facebook Applications Using Infragistics jQuery Chart

mmateev — Wed, 14 Dec 2011 16:47:00 GMT

The development of Facebook applications is almost always associated the attractive visualization of data.

In this article you will learn how to create attractive charts based on data from social network with NetAdvantage for jQuery Vol.2 2011 and in particular with jQuery Chart (CTP for 11.2 Release). Infragistics jQuery components could be used in different Web applications as jQuery widgets or via .NET helpers in ASP.Net Web Forms and MVC applications.

An interesting case is the development of Facebook applications with ASP.Net MVC3 and Razor. If you are not familiar with ASP.Net MVC3 and/or Facebook C# SDK you could learn how to start from the blog Creating Facebook applications with NetAdvantage for jQuery, ASP.Net MVC3 and Facebook C # SDK – using jQuery Grid (Part 1) .

This article will demonstrate a simple prototype that shows in Infragistics jQuery Grid number of photo albums for each of the friends of current user.

Before you start:

To begin development, you must satisfy the following requirements

Steps of implementation:

Create Facebook application and set application properties
Create ASP.Net MVC3 Razor application
Add references to NetAdvantage for jQuery and Facebook C# SDK
Create required controllers and views and implement code to maintain user friends info

Sample application

Sample application is based on the sample from article Creating Facebook applications with NetAdvantage for jQuery, ASP.Net MVC3 and Facebook C # SDK – using jQuery Grid (Part 1) . You could download this sample here.

Facebook application settings.

Demo application is designed to run within an iframe on a Facebook Canvas page. You could create a canvas application in http://developers.facebook.com/. In the current sample Facebook application is named jQueryGridDemo

Update references to NetAdvantage for jQuery and Facebook C# SDK

You should update references to NetAdvantage for jQuery. To be possible to use jQuery Chart you need to add style for chart:

and jQuery Chart JavaScript code:

in default view (Shared/_Layout.cshtml in this case).

All references are shown below:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

  

 <link href="@Url.Content("~/Content/IGStyles/ig/jquery.ui.custom.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/ig/ig.ui.min.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.grid.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.shared.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.editors.css")" rel="stylesheet" type="text/css" />

 <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.chart.css")" rel="stylesheet" type="text/css" />

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

  

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>  

 @*<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>*@

 <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

 <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

 <script src="@Url.Content("~/Scripts/IG/ig.ui.min.js")" type="text/javascript"></script>

 <script src="@Url.Content("~/Scripts/IG/ig.ui.chart.js")" type="text/javascript"></script>

You need also to update the Infragistics.Web.Mvc assembly reference from NetAdvantage for jQuery 2011 Vol.2.

Controllers:

In the sample is used the FacebookController class from the origin article.

To be possible to get information about friend photos you need to add a “friends_photo”s permission.

private const string ExtendedPermissions = 

"user_about_me,publish_stream,friends_location,user_location,friends_online_presence,read_friendlists,friends_photos";

You need to modify the action “OnlineIndex” used to return view with online users. To improve the performance of the applications you could use multi-query with Facebook Query Language (FQL).

var fb = new FacebookWebClient();

dynamic me = fb.Get("me");

  

string query0 =

    "SELECT uid, name, pic_square, sex, locale, online_presence, current_location FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND online_presence IN ('active', 'idle')";

  

string query1 = "SELECT aid,owner,name FROM album WHERE owner IN (SELECT uid FROM #query0)";

  

dynamic selectedFriends = fb.Query(query0, query1);

  

ViewBag.OnlineFriends = selectedFriends;

Here you could see the FacebookController code

using System.Collections.Generic;

using System.Dynamic;

using System.Linq;

using System.Web.Mvc;

using Facebook.Web;

using Facebook.Web.Mvc;

  

  

namespace CS_Canvas_AspNetMvc3_WithoutJsSdk.Controllers

{

    public class FacebookController : Controller

    {

        private const string SimpleExtendedPermissions = "user_about_me,publish_stream";

 

        private const string ExtendedPermissions = "user_about_me,publish_stream,friends_location,user_location,friends_online_presence,read_friendlists,friends_photos";

  

        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

        [CanvasAuthorize(Permissions = SimpleExtendedPermissions)]

        public ActionResult Index()

        {

            var fb = new FacebookWebClient();

            dynamic me = fb.Get("me");

  

            dynamic friendsData = fb.Get("/me/friends");

  

  

            ViewBag.FriendsData = friendsData;

  

  

            ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);

            ViewBag.Name = me.name;           

            ViewBag.FirstName = me.first_name;

            ViewBag.LastName = me.last_name;

  

  

            ViewBag.MessagePostSuccess = Request.QueryString.AllKeys.Contains("success") &&

                                         Request.QueryString["success"] == "True";

  

            return View();

  

            

        }

  

        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

        [CanvasAuthorize(Permissions = ExtendedPermissions)]

        public ActionResult OnlineIndex()

        {

            var fb = new FacebookWebClient();

            dynamic me = fb.Get("me");

  

            string query0 =

                "SELECT uid, name, pic_square, sex, locale, online_presence, current_location FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND online_presence IN ('active', 'idle')";

  

            string query1 = "SELECT aid,owner,name FROM album WHERE owner IN (SELECT uid FROM #query0)";

  

            dynamic selectedFriends = fb.Query(query0, query1);

  

            ViewBag.OnlineFriends = selectedFriends;

  

  

            ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);

            ViewBag.Name = me.name;

            ViewBag.FirstName = me.first_name;

            ViewBag.LastName = me.last_name;

  

            return View();

  

  

        }

  

    }

}

View Models

In the sample application is added a view model for photo album (AlbumInfo).

public class AlbumInfo

{

    public string Aid { get; set; }

    public long Owner { get; set; }

    public string Name { get; set; }

}

FacebookFriendInfo class is also modified to have a property AlbumsCount

public class FacebookFriendInfo

{

    public long Id { get; set; }

    public string Name { get; set; }

    public string Gender { get; set; }

    public string PictureUrl { get; set; }

    public string CurrentLocation { get; set; }

    public string OnlinePresence { get; set; }

    public int AlbumsCount { get; set; }

}

OnlineIndex View

You will have two collections with friends and friend albums

dynamic friendsData =     ViewBag.OnlineFriends;

  

var result0 = friendsData[0].fql_result_set;

  

var result1 = friendsData[1].fql_result_set;

To be possible to use data in Infragistics jQuery Grid and jQuery Chart you a collection, that implements IQueryable.

List<FacebookFriendInfo> myFriends = new List<FacebookFriendInfo>();

  

List<AlbumInfo> albums = new List<AlbumInfo>();

  

  

foreach (dynamic friend in result0)

{

    FacebookFriendInfo rowList = new FacebookFriendInfo();

  

    rowList.Id = friend.uid;

    rowList.Name = friend.name;

    rowList.Gender = friend.sex;

    if (friend.current_location != null)

    {

        rowList.CurrentLocation = friend.current_location.name;

    }        

    rowList.OnlinePresence = friend.online_presence;

    rowList.PictureUrl = friend.pic_square;

  

    myFriends.Add(rowList);

  

  

}

  

foreach (dynamic album in result1)

{

    AlbumInfo rowList = new AlbumInfo();

    rowList.Aid = album.aid;

    rowList.Name = album.name;

    rowList.Owner = album.owner;

    albums.Add(rowList);

  

}

  

foreach (FacebookFriendInfo friendInfo in myFriends)

{

    friendInfo.AlbumsCount = albums.Where(a => a.Owner == friendInfo.Id).Count();     

}

  

  

var queryable = myFriends.AsQueryable();

Infragistics jQuery Chart

Chart uses the collection “queryable”. For X-axis is used the Facebook friend name. For Y-axis is used the number of photo albums.

@(Html.Infragistics().DataChart(queryable)

   .ID("chart1")

   .Width("500px")

   .Height("500px")

   .VerticalZoomable(true)

   .HorizontalZoomable(true)

   .Legend(legend => legend.ID("legend1"))

   .Axes((axes) =>

       {

           axes.CategoryX("xAxis").Label((d) => d.Name);

           axes.NumericY("yAxis");

       })

   .Series((series) =>

       {

           series

           .Column("series1")

           .Title("Friend Albums")

           .XAxis("xAxis").YAxis("yAxis")

           .ValueMemberPath((item) => item.AlbumsCount)

           .ShowTooltip(true)

           .TooltipTemplate("tooltipTemplate");

       }).DataBind().Render()

      )

Tooltip templates

To display friendly data in the tooltips you could use tooltip templates.

<script type="text/javascript">

  

    $(document).ready(function () {

        $("#tooltipTemplate").template("tooltipTemplate");

        $('#homeButton').click(function () {

            location.href = '/Home/Index';

        });

        $('#friendsButton').click(function () {

            location.href = '/Facebook/Index';

        });

    });

  

</script>

Run the application

Enjoy! You have a nice Facebook ASP.Net MVC3 application with Infragistics jQuery Chart inside it.

Source code you could download (Please visit the site to view this media):

Creating Facebook applications with NetAdvantage for jQuery, ASP.Net MVC3 and Facebook C # SDK – using jQuery Grid (Part 1)

mmateev — Tue, 11 Oct 2011 20:53:00 GMT

Creating applications for Facebook is associated with the use of the API for the platform. With the release of Facebook C # SDK developers accepted this framework for developing Facebook applications under .Net based environments.

An interesting case is the development of Facebook applications with ASP.Net MVC3 and Razor. In a series of articles will show you how to develop Facebook applications with MVC3 Razor and NetAdvantage for jQuery. This article will show you how to develop applications for this social network using NetAdvantage jQuery Grid.

Sample application will display in the Infragistics igGrid current Facebook user friends. Application will have different views for all friends and for online friends.

To begin development, you must satisfy the following requirements

You should follow several steps when you create this application:

Create Facebook application and set application properties
Create ASP.Net MVC3 Razor application
Add references to NetAdvantage for jQuery and Facebook C# SDK
Create required controllers and views and implement code to maintain user friends info

Create Facebook application.

You should add some settings in Basic and Advanced tabs.

Basic settings:

App Namespace : it is used to create the full application URL – in this case it will be jquerygriddemo and the whole URL will be : http://apps.facebook.com/jquerygriddemo
Canvas URL: it is an URL of the Facebook application outside of the Facebook. We will use http://localhost:10009/

Advanced settings:

Canvas Settings: Ensure that Canvas Width is “Fixed (760px)” and Canvas Height is “Fluid”.

Create ASP.Net MVC3 Razor application

Confirm that you want to create an Internet Application and select Razor as view engine.

Setting up the project

Add reference to Infragistics.Web.Mvc assembly:

When you create a new ASP.NET MVC 3 project it comes with Scripts and a Content folders where all the default JavaScript files and CSS contents are located respectively.

You should use the same folder and insert the Infragistics Scripts & CSS from NetAdvantage for jQuery install folder.

More information how to set project to use NetAdvantage for jQuery components you could find in the article:
Using CRUD Operations with jQuery igGrid, Entity Framework and ASP.Net MVC3.

Add references to the Facebook C# SDK:

Facebook application implementation:

Controllers:

Add a new controller, named FacebookController. Create in this controller two actions: Index (to get all Facebook friends of the current user) and OnlineIndex (to get all online Facebook friends of the current user).

Get all Facebook friends of the user.

private const string SimpleExtendedPermissions = "user_about_me,publish_stream";

  

        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

        [CanvasAuthorize(Permissions = SimpleExtendedPermissions)]

        public ActionResult Index()

        {

            var fb = new FacebookWebClient();

            dynamic me = fb.Get("me");

  

            dynamic friendsData = fb.Get("/me/friends");

  

  

            ViewBag.FriendsData = friendsData;

  

  

            ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);

            ViewBag.Name = me.name;

            ViewBag.FirstName = me.first_name;

            ViewBag.LastName = me.last_name;

  

  

            ViewBag.MessagePostSuccess = Request.QueryString.AllKeys.Contains("success") &&

                                         Request.QueryString["success"] == "True";

  

            return View();

  

            

        }

FacebookWebClient class is used in Facebook C# SDK to propose client API in C# for communication with Facebook web services.

Add in the Web.config file the code below, where you should change app_id and app_secret with App ID and App Secret of the your Facebook application.

<facebookSettings appId = "{app_id}" appSecret = "{app_secret}"

   canvasPage = "http://apps.facebook.com/jquerygriddemo/"

   canvasUrl = "http://localhost:10009/"

   secureCanvasUrl = "https://localhost:44303/" />

That is all. Facebook C# SDK assemblies expect to have facebookSettings section in the your Web.config file and can read its attributes.

This application could get an information about the current user with method FacebookWebClient.Get(“me”).

var fb = new FacebookWebClient();

dynamic me = fb.Get("me");

  

dynamic friendsData = fb.Get("/me/friends");

Information about current user friends you could receive via method: FacebookWebClient.Get(“/me/friends”). To be possible your application to receive this information from the current user it need additional “extended” permissions. Permissions are string constants, described in the Facebook Graph API.

In this case we need "user_about_me" permissions. We will use these permissions via attributes of the controller actions.

private const string SimpleExtendedPermissions = "user_about_me";

[CanvasAuthorize(Permissions = SimpleExtendedPermissions)]

public ActionResult Index()

{

..

}

Method FacebookWebClient.Get(…) returns data like JsonArray. It is easier to handle it using C# dynamic type. Data will be used in the MVC views. You could save it in the ViewBag to be possible to access it from the views.

dynamic friendsData = fb.Get("/me/friends");

  

ViewBag.FriendsData = friendsData;

To be possible to get photos you could use Facebook Graph API.

   1: ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);

For friends photos you could use friend id instead id of the current user.

Get all online Facebook friends of the user.

When you use FacebookWebClient.Get(“/me/friends”) in the result there is only data for id and name of each friend. It is not a good idea to call for each friend in the loop in this way:
FacebookWebClient.Get(“friend_id”). This will lead to a lot of requests for a short time and possible timeout for some requests.

In this case you have a great opportunity to use Facebook Query Language (FQL). FQL enables you to use a SQL-style interface to query the data exposed by the Facebook Graph API.

You could receive data using FacebookWebClient.Query(“{query text}”);

private const string ExtendedPermissions = "user_about_me,friends_location,user_location,friends_online_presence";

 

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

[CanvasAuthorize(Permissions = ExtendedPermissions)]

public ActionResult OnlineIndex()

{

    var fb = new FacebookWebClient();

    dynamic me = fb.Get("me");

 

    dynamic selectedFriends = fb.Query("SELECT uid, name, pic_square, sex, locale, online_presence, current_location FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND online_presence IN ('active', 'idle')");

 

    ViewBag.OnlineFriends = selectedFriends;

 

 

    ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);

    ViewBag.Name = me.name;

    ViewBag.FirstName = me.first_name;

    ViewBag.LastName = me.last_name;

 

    return View();

 

 

}

In the sample application FQL query get all friends with “active” and “idle” status, including data about gender, current location etc.

Views:

Application has two views, associated with FacebookController: Index and OnlineIndex

Index View

The Index view shows all users in the Infragistics jQuery Grid.

To be possible to use filtering and paging without new server calls is used
Paging().Type(OpType.Local) and Filtering().Type(OpType.Local).

To be possible to use custom row templates is used jquery templating.

@( Html.Infragistics().Grid<FacebookFriend>().ID("fbGrid").AutoGenerateColumns(true)

    .Columns(column =>

    {

        column.For(x => x.PictureUrl).DataType("string").HeaderText("Picture").Width("100");

        column.For(x => x.Name).DataType("string").HeaderText("Name").Width("300");

    })

    .Features(features =>

    {

        features.Paging().Type(OpType.Local).VisiblePageCount(5).ShowPageSizeDropDown(false).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next");

  

        features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>

        {

            settings.ColumnSetting().ColumnKey("Name").AllowSorting(true);

  

        });

  

        features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);

        features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Cell);

  

        features.Filtering().Type(OpType.Local).ColumnSettings(settings =>

        {

  

            settings.ColumnSetting().ColumnKey("Name").AllowFiltering(true).FilterCondition("startsWith");

        });

  

    })

    .JQueryTemplating(true)

    .RowTemplate("<tr><td class='tooltip-grid-image'> <img src='${PictureUrl}'></img> </td><td> ${Name} </td></tr>")

    .DataSource(queryable)

    .Width("450px")

    .Height("420px")

    .DataBind()

    .Render()

)

The whole code of the Index view:

@inherits System.Web.Mvc.WebViewPage<IQueryable<CS_Canvas_AspNetMvc3_WithoutJsSdk.Models.FacebookFriend>>

@using Infragistics.Web.Mvc;

@using Facebook;

@using Facebook.Web;

@using Facebook.Web.Mvc;

@using System.Collections.Generic;

@using CS_Canvas_AspNetMvc3_WithoutJsSdk.Models;

  

@{

    ViewBag.Title = "Index";

    dynamic friendsData = ViewBag.FriendsData;

  

    var fb = new FacebookWebClient();

  

    List<FacebookFriend> myFriends = new List<FacebookFriend>();

  

  

    foreach (dynamic friend in friendsData.data)

    {

        FacebookFriend rowList = new FacebookFriend();

  

        rowList.Id = friend.id;

        rowList.Name = friend.name;

        rowList.PictureUrl = string.Format("http://graph.facebok.com/{0}/picture", friend.id);

    

        myFriends.Add(rowList);

  

  

    }

  

    var queryable = myFriends.AsQueryable();

  

}

<!DOCTYPE html>

  

<html>

  

<head>

<script type="text/javascript">   1:  

  

    $(document).ready(function () {

  

        $('#homeButton').click(function () {

            location.href = '/Home/Index';

        });

        $('#onlineButton').click(function () {

            location.href = '/Facebook/OnlineIndex';

        });

    });

  
</script>

</head>

<body>

<h1>

    Facebook C# SDK ASP.NET MVC3 Canvas Application</h1>

<p>

    This sample demonstrates the use of Facebook C# SDK ASP.NET MVC3 along with the

    NetAdvantage jQuery igGrid</p>

<strong>Hi @ViewBag.Name</strong><br />

<img src="@ViewBag.ProfilePictureUrl"/>

<table>

    <tr>

        <td>

            First Name:

        </td>

        <td>@ViewBag.FirstName

        </td>

    </tr>

    <tr>

        <td>

            Last Name:

        </td>

        <td>@ViewBag.LastName

        </td>

    </tr>

</table>

<br/>

  

<div>

    <p><strong>Friends List </strong> </p>

    @( Html.Infragistics().Grid<FacebookFriend>().ID("fbGrid").AutoGenerateColumns(true)

        .Columns(column =>

        {

            column.For(x => x.PictureUrl).DataType("string").HeaderText("Picture").Width("100");

            column.For(x => x.Name).DataType("string").HeaderText("Name").Width("300");

        })

        .Features(features =>

        {

            features.Paging().Type(OpType.Local).VisiblePageCount(5).ShowPageSizeDropDown(false).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next");

  

            features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>

            {

                settings.ColumnSetting().ColumnKey("Name").AllowSorting(true);

  

            });

  

            features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);

            features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Cell);

  

            features.Filtering().Type(OpType.Local).ColumnSettings(settings =>

            {

  

                settings.ColumnSetting().ColumnKey("Name").AllowFiltering(true).FilterCondition("startsWith");

            });

  

        })

        .JQueryTemplating(true)

                        .RowTemplate("<tr><td class='tooltip-grid-image'> <img src='${PictureUrl}'></img> </td><td> ${Name} </td></tr>")

        .DataSource(queryable)

        .Width("450px")

        .Height("420px")

        .DataBind()

        .Render()

    )

       <table>

        <tr>

            <td>

                <input type='button' value='Home' id='homeButton'/>

            </td>

            <td>

                <input type='button' value='Online Friends' id='onlineButton'/>

            </td>

        </tr>

    </table>

</div>

</body>

  

</html>

OnlineIndex View

Infragistics,Grid MVC Helper usage:

@( Html.Infragistics().Grid<FacebookFriendInfo>().ID("fbGrid").AutoGenerateColumns(true)

    .Columns(column =>

    {

        column.For(x => x.PictureUrl).DataType("string").HeaderText("Picture").Width("100");

        column.For(x => x.Name).DataType("string").HeaderText("Name");

        column.For(x => x.Gender).DataType("string").HeaderText("Gender").Width("100");

        column.For(x => x.OnlinePresence).DataType("string").HeaderText("Status").Width("100");

        column.For(x => x.CurrentLocation).DataType("string").HeaderText("Current Location");

    })

    .Features(features =>

    {

        features.Paging().Type(OpType.Local).VisiblePageCount(5).ShowPageSizeDropDown(false).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next");

  

        features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>

        {

            settings.ColumnSetting().ColumnKey("Status").AllowSorting(true);

  

        });

  

        features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);

        features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Cell);

  

        features.Filtering().Type(OpType.Local).ColumnSettings(settings =>

        {

            settings.ColumnSetting().ColumnKey("Name").AllowFiltering(true).FilterCondition("startsWith");

        });

  

    })

    .JQueryTemplating(true)

    .RowTemplate("<tr><td class='tooltip-grid-image'> <img src='${PictureUrl}'></img> </td><td> ${Name} </td><td> ${Gender} </td><td> ${OnlinePresence} </td><td> ${CurrentLocation} </td></tr>")

    .DataSource(queryable)

    .Width("700px")

    .Height("420px")

    .DataBind()

    .Render()

The whole code of the OnlineIndex view:

@inherits System.Web.Mvc.WebViewPage<IQueryable<CS_Canvas_AspNetMvc3_WithoutJsSdk.Models.FacebookFriendInfo>>

@using Infragistics.Web.Mvc;

@using Facebook;

@using Facebook.Web;

@using Facebook.Web.Mvc;

@using System.Collections.Generic;

@using CS_Canvas_AspNetMvc3_WithoutJsSdk.Models;

  

@{

    ViewBag.Title = "Online Index";   

        

     dynamic friendsData =     ViewBag.OnlineFriends;

  

    var fb = new FacebookWebClient();

  

    List<FacebookFriendInfo> myFriends = new List<FacebookFriendInfo>();

  

  

    foreach (dynamic friend in friendsData)

    {

        FacebookFriendInfo rowList = new FacebookFriendInfo();

  

        rowList.Id = friend.id;

        rowList.Name = friend.name;

        rowList.Gender = friend.sex;

        if (friend.current_location != null)

        {

            rowList.CurrentLocation = friend.current_location.name;

        }

        

        rowList.OnlinePresence = friend.online_presence;

        rowList.PictureUrl = friend.pic_square;

  

        myFriends.Add(rowList);

  

  

    }

  

    var queryable = myFriends.AsQueryable();

  

}

  

<!DOCTYPE html>

  

<html>

  

<head>

<script type="text/javascript">   1:  

  

    $(document).ready(function () {

  

        $('#homeButton').click(function () {

            location.href = '/Home/Index';

        });

        $('#friendsButton').click(function () {

            location.href = '/Facebook/Index';

        });

    });

  
</script>

</head>

  

<body>

<h1>

    Facebook C# SDK ASP.NET MVC3 Canvas Application</h1>

<p>

    This sample demonstrates the use of Facebook C# SDK ASP.NET MVC3 along with the

    NetAdvantage jQuery igGrid displaying online friends</p>

<strong>Hi @ViewBag.Name</strong><br />

<img src="@ViewBag.ProfilePictureUrl"/>

<table>

    <tr>

        <td>

            First Name:

        </td>

        <td>@ViewBag.FirstName

        </td>

    </tr>

    <tr>

        <td>

            Last Name:

        </td>

        <td>@ViewBag.LastName

        </td>

    </tr>

</table>

<br />

  

  

<div>

    <p><strong>Online Friends List</strong></p>

    @( Html.Infragistics().Grid<FacebookFriendInfo>().ID("fbGrid").AutoGenerateColumns(true)

        .Columns(column =>

        {

            column.For(x => x.PictureUrl).DataType("string").HeaderText("Picture").Width("100");

            column.For(x => x.Name).DataType("string").HeaderText("Name");

            column.For(x => x.Gender).DataType("string").HeaderText("Gender").Width("100");

            column.For(x => x.OnlinePresence).DataType("string").HeaderText("Status").Width("100");

            column.For(x => x.CurrentLocation).DataType("string").HeaderText("Current Location");

        })

        .Features(features =>

        {

            features.Paging().Type(OpType.Local).VisiblePageCount(5).ShowPageSizeDropDown(false).PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next");

  

            features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>

            {

                settings.ColumnSetting().ColumnKey("Status").AllowSorting(true);

  

            });

  

            features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);

            features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Cell);

  

            features.Filtering().Type(OpType.Local).ColumnSettings(settings =>

            {

                settings.ColumnSetting().ColumnKey("Name").AllowFiltering(true).FilterCondition("startsWith");

            });

  

        })

        .JQueryTemplating(true)

        .RowTemplate("<tr><td class='tooltip-grid-image'> <img src='${PictureUrl}'></img> </td><td> ${Name} </td><td> ${Gender} </td><td> ${OnlinePresence} </td><td> ${CurrentLocation} </td></tr>")

        .DataSource(queryable)

        .Width("700px")

        .Height("420px")

        .DataBind()

        .Render()

    )

          <table>

        <tr>

            <td>

                <input type='button' value='Home' id='homeButton'/>

            </td>

            <td>

                <input type='button' value='All Friends' id='friendsButton'/>

            </td>

        </tr>

    </table>

</div>

Run the Application

On the main page you could select “Friends” or “Online Friends”

Select “Friends” and see the all Facebook friends in the igGrid.

Select “Online Friends” to see all Facebook friends with status “online” or “idle”.

Enjoy! You have your first Facebook ASP.Net MVC3 application with Infragistics jQuery Grid.

Source code you could find here:(Please visit the site to view this media)