Friday, 18 November 2011

How To Connect To fb From asp.net and get user's info from fb..

Hi frnds.....Today i'm going to tell u abou fb connect from your asp.net
Firstly you’ve to setup a facebook application to get the application id. You can setup application from here. Or if you have already setup a facebook application then just copy the application id and replace with xxxxxxxxxxx.

<div id="fb-root"></div>
        <script type="text/javascript">
            window.fbAsyncInit = function() {
     FB.init({appId: 'xxxxxxxxxxxxxx', status: true, cookie: true, xfbml: true});
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());
</script>
Just put this code in your html file after the body tag.
And your html tag should be 
<!DOCTYPE html>
Now we will use another method FB.Event.subscribe so that we can subscribe some events like login, logout, sessionChange.  So modify the window.fbAsynInit and update by below code
<script type="text/javascript">
window.fbAsyncInit = function() {
 FB.init({appId: 'xxxxxxxxxxx', status: true, cookie: true, xfbml: true});

     /* All the events registered */
     FB.Event.subscribe('auth.login', function(response) {
         // do something with response
         login();
     });
     FB.Event.subscribe('auth.logout', function(response) {
         // do something with response
         logout();
     });

     FB.getLoginStatus(function(response) {
         if (response.session) {
             // logged in and connected user, someone you know
             login();
         }
     });
 };
</script>

So when user will login first time (not automatically)  login() method will call. When user will click logout , logout() method will call. So define these functions for your application purpose. We also use another method FB.getLoginStatus() within window.fbAsyncInit() function so that when we found user is logged in or connected we will show some info to user.
Now we have to render fb connect button so that user can login or logout..
<fb:login-button autologoutlink="true" perms="email,user_birthday"></fb:login-button>
perms=”email,user_birthday,status_update,publish_stream” this line is just for asking user permission for His/Her email,birthday..
2. How to use graph api
To fully understand graph api visit the link . Now i’ll show how you can use graph api using javascript sdk. There is a method FB.api . This method directly hooks graph api and returns result. Sample code
1
2
3
FB.api('/me', function(response) {
  alert(response.name);
});
 Here is full source code:..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head runat="server">
    <title>FbLogin</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="fb-root">
        </div>

        <script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({appId: 'xxxxxxxxxx', status: true, cookie: true, xfbml: true});

                /* All the events registered */
                FB.Event.subscribe('auth.login', function(response) {
                    // do something with response
                    login();
                });
                FB.Event.subscribe('auth.logout', function(response) {
                    // do something with response
                    logout();
                });

                FB.getLoginStatus(function(response) {
                    if (response.session) {
                        // logged in and connected user, someone you know
                        login();
                    }
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());

            function login(){
                FB.api('/me', function(response) {
                    document.getElementById('login').style.display = "block";
                    document.getElementById('login').innerHTML = response.name + " succsessfully logged in!"+"With Email ID"+response.email+"and UserID is"+response.id;
                });
            }
            function logout(){
                document.getElementById('login').style.display = "none";
            }
    
        </script>
 <p><fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button></p>
 <div id="login" style ="display:none"></div>
        <div id="name"></div>
    </div>
    </form>
</body>
</html>


Hope you Enjoyed...Have a grt day:)
 

Tuesday, 30 August 2011

Paging using PagedDataSource class

As we all know DataList and Repeater both doesn't have auto paging feature like Gridview ...So to overcome this problem we have a .Net Class PagedDataSource used to do Paging in DataList and Repeater...
I'm going to implement this on Datalist ...So first Let's create a Datalist ...

  <asp:DataList ID="dtlContents" runat="server" RepeatDirection="Vertical" Width="300px"         DataKeyField="Id">
            <ItemTemplate>
                <asp:Label ID="lblContents" runat="server" Text='<%#Eval("Contents")%>'></asp:Label>
            </ItemTemplate>
        </asp:DataList>

For the paging create two linkbuttons and label to show the current Page Number, 


<table border="0" align="right"  style="width: 163px">
<tr>
<td
align="left">
    <asp:LinkButton
ID="lbtnPrev" Runat="server" onclick="lbtnPrev_Click">Prev</asp:LinkButton>
</td>
<td align="center">
<asp:Label ID="lblCurrentPage" runat="server" Text=""></asp:Label>
</td>  
<td align="right">
    <asp:LinkButton ID="lbtnNext"
Runat="server" onclick="lbtnNext_Click">Next</asp:LinkButton>
</td>
</tr>
</table>

Now Bind the Data to Datalist...
public int CurrentPage///Int Variable For Holding the current page...
    {
        get
        {
            //get current page number
            object obj = this.ViewState["_CurrentPage"];
            if (obj == null)
            {
                return 0;
            }
            else
            {
                return (int)obj;
            }
        }
        set
        {
            //set in viewstate the current page number
            this.ViewState["_CurrentPage"] = value;
        }
    } 

public void BindList()
{
//Creating an object for the 'PagedDataSource' for holding the data.  
PagedDataSource objPage = new PagedDataSource();
try
{
 
 DataSet ds = ....\\DataSource.
    
 objPage.AllowPaging = true;
     
 //Assigning the datasource to the 'objPage' object.
 objPage.DataSource = ds.Tables["tblData"].DefaultView;
//Setting the Pagesize
        objPage.PageSize = 4;
        int count= objPage.PageCount;
        objPage.CurrentPageIndex = CurrentPage;
 //to Enable Or Disable The First and Last Button
lbtnNext.Enabled = !objPage.IsLastPage;
        lbtnPrev.Enabled = !objPage.IsFirstPage;
 //Show Current Page Number
lblCurrentPage.Text = "Page " +
         Convert.ToString(CurrentPage + 1) + " of " +
         Convert.ToString(objPage.PageCount);

//Assigning Datasource to the DataList.
dtlContents.DataSource = objPage; dtlContents.DataBind(); } catch(Exception ex) { throw ex; } }
For Next Button....
protected void lbtnNext_Click(object sender, EventArgs e)
    {
        CurrentPage += 1;
        BindList();
    }
For Previous Button....
 protected void lbtnPrev_Click(object sender, EventArgs e)
   {
            CurrentPage -= 1;
            BindList();
        }

I hope you enjoy this tutorial....