ThreadAbortException

October 2011 Entries

Enabling Facebook Timeline view on IE10 Developer Preview

If you are active on Facebook, there is very less chance that you missed on the recent Facebook UI update “Social Graph” or more popularly referred as “Timeline” (a screenshot of how the Timeline profile UI looks, here below)

image

This Timeline UI has been quite popular and is supported in most of the modern browsers including IE9, Chrome 14 & Firefox 6 and above.

I am a power consumer of web and use IE9 as my primary browser.  Timeline UI works excellent in IE9. 

I have also downloaded the IE10 Platform Preview for Windows 7, which provides greater support for some of the HTML5 standards.

Also, with Windows Developer Preview ships the IE10 Developer Preview (a newer version after IE10 PP2).  This has the best possible support for CSS3 transitions and other latest web standards.

Both in IE10 PP2 and IE Developer Preview, Facebook Timeline UI doesn’t show up.  It shows the classic view although I have enabled timeline.  Gut feel is, they are doing browser sniffing and with the user agent not enabling the Timeline for not matching major version 9 in case of IE.  Actually IE10 PP2 and Developer Preview have better support for CSS3 and other new web standards.  So, to enable Timeline UI in IE10 PP2 or the IE Developer Preview shipped in Windows Developer Preview, we need to use the IE Developer Toolbar (press F12)

So, here is the view of Facebook Profile in IE Developer Preview which features by default Browser Mode IE10.

image

Once we change the browser mode to IE9, I get the social graph view as below

image

I tested the same in both IE10 Developer Preview (Windows Developer Preview) and IE10 PP2 (Windows 7) and got the desired results Smile

Goes on to prove my earlier posts on how the Developer Toolbar in IE is very helpful for Developers.

And here is a nice video on how to enable Facebook Timeline for your account.

I think it is these little nifty changes that separates we developers from the regular consumers Smile

Cheers !!!

Installing MVC 3 for Visual Studio 2010 on Windows Developer Preview after installing MVC 4

I am playing more with the Windows Developer Preview and simply love the backward compatibility it has for applications that used to work in Windows 7.  And one of the applications critical to my day-to-day life is Visual Studio.  Visual Studio 2010 with SP1 and ASP.NET MVC 3 Tools is my everyday requirement.

Windows Developer Preview when installed from the MSDN Center has two flavors.  One with the Developer Tools which I would assume, most of us developers would want and the other one, which is simply the Windows Developer Preview (without the Tools).

And the Tools that it ships with has a version of VS11 Developer Preview which is just for building Metro Style applications.  If you plan to use the same for web development (using MVC or Web Forms) you need to install a separate version of VS11.  I had blogged about this earlier

I was setting up Windows Developer Preview as my primary development machine so in addition to VS11, I also required VS 2010 to be installed.  So, I installed VS 2010 and the SP1.  Post that I was trying to install MVC 3 for VS 2010.  It simply took a long time and then rolled back the installation Sad smile

I tried couple of times just to repro and found the same results. 

The interesting thing is, MVC3 for VS11 installed happily on the machine.  (MVC 4 was already installed)

When I checked with Phil Haack and Jacques Eloff they neatly helped me with this.  Essentially MVC 4 has a newer version of NuGet installed and that was preventing MVC 3 for VS 2010 to be installed.  The steps to resolve are quite simple.

Uninstall NuGet from Add/Remove Programs. 

Install MVC 3 for VS 2010 from here

That’s it.  It would automatically reinstall the NuGet.

If this post was confusing like my earlier post read it again Smile

Cheers !!!

Using HTML5 Geolocation API in ASP.NET Application

UPDATE

The below sample just showcases the locality sample.  The complete set of attributes exposed which include PostalCode, CountryRegion, Address etc., are available at http://msdn.microsoft.com/en-us/library/ff701710.aspx

This is the third in the series of posts I am doing on HTML5 for ASP.NET Developers

Geolocation is one of the popular features of HTML5 that’s being touted as a favorite for building location aware applications.  It helps to a great extent not just for Web Applications that run on PCs, but also for Web Applications that run on Devices.  Since browser on the phone is no longer a rare thing, it always helps to identify the location of the user carrying the phone and build applications that cater to the specific geo (example: providing deals available nearby etc.,)

The actual call required for our sample is quite simple.  Geolocation works only on IE9 and above.  So, if you haven’t installed already, you can download and install IE9 from here

For the sake of our sample, lets create an ASP.NET Web Forms Application using Visual Studio 2010 (File – New – Project – ASP.NET Web Application)

By default it creates a Site.Master and Default.aspx page which inherits from the master page.  Also, jQuery is included as a part of the scripts.  So, lets pull the jQuery files on to the Master Page.

So, as of now, I have opened up the Site.Master and also expanded the Scripts folder in the project explorer and dragged the jQuery-1.4.1.min.js file onto the Site.Master

image

 

Then, open up the Default.aspx page and add the following lines of code

<input type="button" id="btnFindMyLocation" value="Find My Location" />
       <input type="text" id="txtLocation" />

The Geolocation API provides the Latitude and Longitude co-ordinates.  Using that, we would like to get the current location by using the Bing Maps SDK.  Hence, we need a Bing Maps SDK token.  It can be obtained from http://www.bing.com/toolbox/bingdeveloper/

Click on “Sign-in Bing Maps” and use existing Live ID credentials.  Once signed-in, it asks you a few details.  Fill out those details and then it presents a dashboard.  On the top left menu, you can find the “Create or View Keys”.

Click on it, and follow the steps to get the token.  Your token would be typically a GUID of considerable length.  This we would need to pass on to the SDK and get the location.

Coming back to our Default Page, add the following snippet somewhere above the input tags which we added earlier.

<script type="text/javascript">
   $(function () {
   $("#btnFindMyLocation").click(function () {
       // find lat/long with geo api
       if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(function (pos) {
               // query city from Bing Maps API
               var url = "
http://dev.virtualearth.net/REST/v1/Locations/" + pos.coords.latitude + "," + pos.coords.longitude + "?&key=REPLACE YOUR BING MAP SDK KEY";
               $.ajax({
                   url: url,
                   dataType: "jsonp",
                   jsonp: "jsonp",
                   success: function (data) {
                       $("#txtLocation").val(data.resourceSets[0].resources[0].address.locality);
                   }
               });

           }, function () {
               alert("Unable to find your location");
           });
       } else {
           alert("Your browser does not support GeoLocation API! ");
       }
   });
   });
   </script>

Make sure you change the RED text in the code above with the actual Bing Maps SDK Key that you obtain from the Developer Portal.  Once this is done, you can run the page.  It presents an UI as below:-

image

Click on “Find My Location” and you would see a warning in the below as follows:-

image

Click on “Allow Once” and then it reloads the page and then fills up the TextBox with your current location.

image

So, with few simple steps, we can find the actual location of the users through the Geolocation API and using Bing Maps SDK.

Cheers!!!

HTML5 Markup Enhancements for ASP.NET

This would be the first in the series of posts I plan to do for HTML5 for ASP.NET Developers The first thing that everyone would have experienced is the HTML5 header tag. 

The regular header tag that Visual Studio creates for ASP.NET Webforms is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This would be the header tag present in the Master Page or the actual ASPX Page when you don’t inherit from a Master Page.  Till HTML5 specifications started momentum, the general DOCTYPE was this lengthy and makes it hard to really remember.  It also indicates a bit of versioning to HTML.

With HTML5, the header changes simply to

<!DOCTYPE html>

You would notice this tag quite prominently in all HTML5 conferences and articles. 

Also, when you create an ASP.NET MVC 3 project using Visual Studio 2010, you would notice that this is the default header tag in your Layout.cshtml page (equivalent of Master Pages for MVC3)

Strictly speaking this tag is not mandatory for using other HTML5 tags.  But having this would mean or decipher to the browser that this page uses HTML5 features. 

Going forward VS11 and other project types would have this default header tag but as of now, we can modify our page header and simply put <!DOCTYPE html>

One interesting thing which was identified by my friend and team mate Rajasekharan Vengalil is that, if we remove the tag completely, the Internet Developer Toolbar defaults to Quirks Mode since its unable to find a DocType.  The IE Developer Toolbar is a wonderful utility for web developers for testing, debugging and doing a variety of tasks.  I had written a bunch of posts earlier on this here, here & here  Plan to write more of these in near future Smile

To demonstrate this behavior, lets fire up Visual Studio 2010 and create a File – New Project – ASP.NET Web Forms Application.  Just leave the defaults and let the site be created.

I would assume you are running the IE9 as your default browser.  If you haven’t installed it yet, you can download it from here

Lets open up the Site.Master.  We will find in the top the default XHTML 1.0 strict doctype.  Lets remove this header and then run the page. Once IE opens up with the Default Page, press F12 or choose “F12 developer tools” from the Tools menu in the right top.

image

Once it opens up, you would notice the following for “Browser Mode” and “Document Mode”

image

As you can see, it defaults to “Quirks Mode”.  Here is a nice post from the IE Team on Document Modes and Browser Modes but, simply putting, Quirks mode is JavaScript behavior of  IE6.

So, we need to have DocType mentioned in the Master Page or Layout Page.  And all the more good, if we simply change it to <!DOCTYPE html>

Next, we will jump into some advanced stuff and then come back to the mark up enhancements.

Cheers !!!

HTML5 for ASP.NET Developers

HTML5 for ASP.NET Developers is my attempt to learn HTML5 myself being an ASP.NET Developer.  I am planning to post a series of posts on how ASP.NET Developers can leverage some of the HTML5 features in their applications.  To begin with, I plan to post a few samples on the following

1. Markup Enhancements that every ASP.NET Developer should know

2. Using HTML5 Geolocation API

3. Using HTML5 Local Storage in ASP.NET Applications

4. Making HTML5 Video work with IIS Express

5. HTML5 Boilerplate template for ASP.NET with Visual Studio 2010

6. Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

And few other things (I will update the above links as and when I get more posts)

In the meantime, it doesn’t need more reiteration that HTML5 is a critical learning for every web developer be it you work on ASP.NET or PHP for web development.

Cheers !!!

Integrating Facebook Authentication for your website using WebMatrix 2 Beta

In the recently concluded WebCamps, Delhi, I was demonstrating Facebook Authentication implementation for your website using WebMatrix 2 Beta.  You can read about my earlier post on WebMatrix 2 Beta from here

Using the new WebMatrix 2 Beta, we can create a decent looking starter site with a few clicks as explained in my above post.  Once we have the site up and running, we would want to implement authentication.

Now, like ASP.NET 4, ASP.NET MVC 3 etc., WebMatrix comes with default Membership infrastructure.  For the sake of simplicity, lets create the site now.  Fire up WebMatrix and from the Start up screen, click on “Templates”

image

Select the “Starter Site” template and give it a name, say “Web 3” and click “Ok”

image

Navigate to the “Files” tab in the left bottom and when you expand the “Account” folder under the root in the top, you can get to see all the Membership related files, as below:-

image

Infact, if you run the default site as is, it would show up the home page with the “Login” link in the right top alongside “Register”.  The logic for registering an user, and thereafter verifying login credentials, change password etc., are all pre-coded in the Membership files showcased earlier and one has to just start using it.  By default, this uses the “StarterSite.sdf” (SQL Compact Edition) database that is created when you create the site using “Starter Site” template. 

Now, if you want to implement Facebook or Twitter authentication, the code for the same is pre-configured and just has to be enabled.

Lets see the steps first.  Open up the Login.cshtml page and when you scroll down to the bottom, you can see a “Login in using another service” setting commented.  Uncomment the section and then run the page.  You can now see the links for these in the Login Page.

image

The next step is to enable the OAuth code that is available in _AppStart.cshtml page in the root folder.  Open the page and uncomment the section that has “BuiltinOAuthClient.Facebook” as below:-

image

Now, we have some work to do in Facebook.  Facebook authentication requires us to create an application before it provides the consumerKey & consumerSecret values that is needed in the above code.  You would need a Facebook Developer Account. Register for one, if you don’t have already. 

Visit Facebook.com/developers and login with your facebook id.  Click on the “Apps” link in the top.  On the “Apps” page, click on the “Create New App” button in the right top.

image

On the dialog that opens up, provide a “App Display Name”.  You can skip the “App Namespace” and check to accept the “Facebook Platform Policies” and click “Continue”.  Verify the captcha screen that comes up next and then the configuration screen opens up.  It already has the values you provided for “App Name” and the email address associated with the account.

Click on the “Website” link which reads “I want to allow people to log in to my website using Facebook” .  In the box that shows up, we need to provide the ROOT url of our application.  The good part is, it works with localhost URLs too.  In my case, I have entered, as follows:-

image

Once you click on “Save Changes” the screen refreshes and shows up the “App Id” and “App Secret” key in the top.  We need these to put in the _AppStart.cshtml file in our site.

Now, switch to WebMatrix and open up the _AppStart.cshtml file.  In the section that we uncommented, provide the “AppId” in the consumerkey setting and “App Secret Key” in the consumerSecret setting.  Once this is done, run the site and click on the “Login” link in the top.

On the right side of the Login page where you see the “Facebook”, Twitter” etc., links, click on the “Facbeook” link".   Since you are already logged in to Facebook, it would take you through the verification page, as follows

image

Next would be the “Associate” screen where it takes to link the App with your Facebook credentials. 

image

Once the above step is done, you can see that the application logged me in using Facebook and it shows up the Hello message with my name

image

 That’s it, your website is now using Facebook authentication to validate users.

Facebook Connect has been there for a while but with the new WebMatrix 2 Beta, integrating Facebook Connect with your website is much much simplified as explained in this post.

Download WebMatrix 2 Beta from http://bit.ly/webvnext

Cheers !!!