ThreadAbortException

March 2011 Entries

HTML5 development with Visual Studio 2010 Service Pack 1

At TechEd India 2011 I presented on HTML5 Development with Visual Studio 2010 SP1.   I wanted to cover the aspects that were discussed in my session.

HTML5

1. HTML5 is the emerging but promising trend in web development

2. Some of the standards have got green signal i.e. they are candidate recommendations.

3. Some others are still work in progress.

4. IE9 implements standardized HTML5 specifications.

Visual Studio 2010 and HTML5

Visual Studio 2010 Service Pack 1 comes from basic HTML5 support.    Having said that, apart from lack of intellisense, nothing stops people from developing HTML5 based websites even today.

I had earlier written a post around this.  It was during VS 2010 SP1 Beta but holds good even now.  You can read it at http://geekswithblogs.net/ranganh/archive/2011/02/07/html5-and-visual-studio-2010.aspx

One of the popular tags in HTML5 is the Video tag.  The ability to run videos on web pages without the dependency of plugins/Silverlight/Flash makes it exciting for web developers.  HTML5 Video specifications are a little complicated at the moment.  H.264 encoded MP4, OGV, WEBM formats are the major video formats going around the industry.

Microsoft supports H.264 encoded videos and also has extended support for WebM format (Read the IE Team’s post here http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx)

I showcased the Video playing capabilities and also the mechanism to fall back on Silverlight based player in case the browser doesn’t support HTML5.  I had written this post earlier.  So, you can find the sample from http://geekswithblogs.net/ranganh/archive/2011/02/22/playing-html5-video-with-fall-back-for-ie8ie7-and-earlier.aspx 

Browser detection vs. Feature detection

Its safe to test for features in a browser rather than simple browser detection and rendering accordingly.  This is particularly important given that various versions of browsers support various levels of HTML5/JavaScript and limiting the functionality based on just browser version would miss out on stuff that the browser actually supports.

here below is the code snippet for checking the video playing capabilities of the browser

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Video Codec Detection</title>
</head>
<body>
    <video id="myVideo">
    </video>

    <script type="text/javascript">

        var player = document.getElementById('myVideo');

        alert("Is <video> supported? " +
            (player.canPlayType != null));

        if (player.canPlayType) {

            alert("Is an unknown format supported? " +
                player.canPlayType('NoWay/VidXF'));

            alert("Is mp4 supported? " +
                player.canPlayType('video/mp4'));

            alert("Is H.264 Baseline supported? " +
                player.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
        }
    </script>
</body>
</html>

Expression Web 4 SP1

Expression Web 4 SP1 has support for HTML5.  This would allow you to create HTML5 based websites/layouts and validate them using the snapshot/ Super Preview.  Read the Expression Web blog post here http://blogs.msdn.com/b/xweb/archive/2011/03/21/expression-web-4-service-pack-1.aspx 

Cheers !!!

Adding MVC 3 features to an existing ASP.NET Web Forms application–Part 2

UPDATE: Scott Hanselman has a NuGet package to automate many of these steps and you should check it out, http://www.hanselman.com/blog/CreatingANuGetPackageIn7EasyStepsPlusUsingNuGetToIntegrateASPNETMVC3IntoExistingWebFormsApplications.aspx

This is in continuation with Part 1 of the article, so you may want to check it out before reading this, in case you haven’t already.

Next, we need to enable the Global.asax.  We will open up the Global.asax and add the following two references in the namespaces section

using System.Web.Mvc;
using System.Web.Routing;

We need to then add the RegisterRoutes method which is a default in MVC projects.  So we will add this method to the Global.asax

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

        }

Then, we need to call this method in the Application_Start event of the Global.asax.

RegisterRoutes(RouteTable.Routes);

Now, we would create folders called “Controllers” and “Views” in the root of the application. But, if we right click on the “Controllers” folder and try to add a new Controller, it doesn’t show up in the templates.  We still need to enable one setting in Visual Studio.  The default Project properties' ProjectTypeGuids section doesn't have the ProjectTypeGuid for MVC included.  This will be used by Visual Studio uses to identify the templates to show in the project.

So, to edit that, first, we need to “unload” the project.  Now, if you haven’t enabled Visual Studio to always show the Solution file (Tools – Options – Projects and Solutions – Always Show Solution), and if there is only this project (that we created) we would not be able to unload the project since the solution file wouldn't show up in the Solution Explorer.  Once you do the above step, it will show the solution file within the Project hierarchy.  Then we would be able to chose the Project file and chose – “Unload Project”

image

After that we can edit the project file by right clicking on the project and select “Edit HybridWebApp.csproj"

image

 It opens up the Project file in Visual Studio.  In that, we will add a key value to make sure MVC 3 tooling is enabled.  So, identify and replace the section with the following

<ProjectTypeGuids>{E53F8FEA-EAE0-44A6-8774-FFD645390401};{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>

Basically I have added the highlighted value to the setting, which is specific to MVC3.

Once we are done, we can close the file, select “HybridWebApp” and chose “Reload Project”

image

Once this is done, we can right click on the Controllers folder and select “Add” it lists “Controller”

image

We will give this Controller, the name “ProductsController”

image

In the Controller created, we will add reference to the Model that we created, in the using section as follows:

using HybridWebApp.Models;

Also, we need to create a handle for the Entity model generated, as follows:-

NorthwindEntities nw = new NorthwindEntities();

After this, we will modify the default “Index” view generated to retrieve a list of products, as follows:-

public ActionResult Index()
        {
            var productList = from pList in nw.Products
                          select pList;


            return View(productList);
        }

We can now right click on the Controller and select “Add View”

image

It would prompt the View configuration screen where we can select that this would be a strongly-typed view and would be based on the Product entity and the Scaffold template would be “List”

image

 One thing we need to do still is that, inside the “Views” folder there needs to be a config file.  So, right click Views folder and select “Add – New Item”

image

 and in the “Add New Item” screen search for “config” in the top right search box.  It would list the Web Configuration template and we can chose that to add

image

Once we add that, we can create another simple MVC3 application or use an existing MVC3 application and navigate to the Views folder to open the web.config file.  From there we can copy the contents of the config file into our newly created config file under the Views folder in our HybridWebApp.  The settings are as follows

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>

  <system.web>
    <httpHandlers>
      <add path="*" verb="*" type="System.Web.HttpNotFoundHandler"/>
    </httpHandlers>

    <!--
        Enabling request validation in view pages would cause validation to occur
        after the input has already been processed by the controller. By default
        MVC performs request validation before a controller processes the input.
        To change this behavior apply the ValidateInputAttribute to a
        controller or action.
    -->
    <pages
        validateRequest="false"
        pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
        pageBaseType="System.Web.Mvc.ViewPage, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
        userControlBaseType="System.Web.Mvc.ViewUserControl, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <controls>
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" namespace="System.Web.Mvc" tagPrefix="mvc" />
      </controls>
    </pages>
  </system.web>

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />

    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>
</configuration>

After we have copied the above and saved our newly created config file, we will be good to go.

Note that, the Product/Index.cshtml created provides the default List template taking the columns as is from the Product Entity.

We can customize and remove columns such as ID that we don’t need from listing.  Also, we can customize the HTML layout.  But, for the sake of this post, we will leave it as is.

One last step that we want to do is open the “Site.Master” of our HybridWebApp and you will find the Menu section in the page.  We will edit the menu section to read as follows:-

image

Once we save all our files -  Build and run the app using F5, we will first encounter the Home Page where we list the Categories using Webforms.

image

Now, when you click on the “Products” menu this would open up the products listing page running out of MVC

image

So, we are now running one page in Web Forms and the other one using MVC.  We can customize the UI etc.,to make it look better.

This concludes my two part article of adding MVC3 features to ASP.NET 4 Web Form application, that I presented at Tech Ed India 2011.

Cheers !!

Adding MVC 3 features to an existing ASP.NET Web Forms application–Part 1

UPDATE: Scott Hanselman has a NuGet package to automate many of these steps and you should check it out, http://www.hanselman.com/blog/CreatingANuGetPackageIn7EasyStepsPlusUsingNuGetToIntegrateASPNETMVC3IntoExistingWebFormsApplications.aspx

Today, at Tech Ed India 2011, I delivered this session – Web Forms vs. MVC choosing the right one for web development. Although its a tricky topic, it was worth clarifying some of the patterns to decide between Web Forms and MVC. One of the demo scenarios I took up was using them in a hybrid scenario. Thanks to Scott Hunter from the ASP.NET Team, I got this dimension where we can use both together instead of re-writing the application from the scratch.

So, here below are the steps. For the purpose of this post, I am using Visual Studio 2010 Service Pack 1 and ASP.NET MVC 3 with Razor. But all of this can be reused for integrating MVC 2 based applications as well.

To begin with, we will create a Web Forms application (ASP.NET 4) using Visual Studio 2010. So, a File – New – Web Application and giving it a name HybridWebApp.

image

It would create the default web form templates. We would create a folder “Models” in the root directory where we would be adding our Entity Model. To begin, we will use a Database. For the purpose of this demo, I would be using the NorthWind sample database which can be downloaded from here

We will add an ADO.NET Entity Data Model into our application and give it a name NorthWindModel

image

Through the wizard, we connect to the NorthWind sample database and chose the tables “Products”, “Categories” and “Suppliers” and then complete the wizard to generate the ADO.NET Entity Model.

image

So once we rebuild the solution, we have the schema ready. Next, we can wire up this data into a web page using a GridView control. We will use the Default.aspx page created automatically to place the GridView and then using the GridView’s binding UI, try and bind to the TechEd Entity that we just created.

image

image

image

finally chose in the GridView the binding option to “Edit”, “Select” etc., and complete the wizard. With this our data binding with Web Forms is done and we have a page where we can see the Categories Listing.

image

Next, we want to add to this, an MVC Application. To do that we need to implement the following:-

1. Reference the MVC, Routing & WebPages assemblies in the Project

2. Reference the assemblies in the web.config file

3. Add the Routing mechanism to the Global.asax

4. Enable tooling support in Visual Studio for MVC (since this is a Web Form application)

5. Create the Controllers/Views for displaying data

So, first, we need to add Reference to the System.Web.Mvc which is installed typically in the C:\Program Files\Microsoft ASP.NET\ASP.NET MVC3\Assemblies folder. Also, we need to add Reference to the System.Web.Razor, System.Web.Helpers, System.Web.WebPages and the System.Web.WebPages.Razor DLLs located in the C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies folder.

image

Next, in the Web.Config file, we will add the reference to the namespaces within the <system.web> tags

<pages>
<namespaces>
<add namespace="System.Web.Helpers" />
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="System.Web.WebPages"/>
</namespaces>
< /pages>

After that, we will add the assemblies’ references within the <compilation> tags

<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
</assemblies>
</compilation>

The next step is to enable the Global.asax, we will see that in the Part 2 of this article.

Cheers!!!

Visual Studio 2010 Service Pack 1, now available for download

Visual Studio 2010 Service Pack 1 (SP1) is now available for general download for almost a week now.  The Beta of SP1 came couple of months back and it did a lot of performance enhancements, added support for HTML5 tags and few other stuff related to web development.  Now, the final release of SP1 is available.  The good part is that, if you had installed the SP1 beta, you don’t have to remove the Beta and start all over again.  You can apply the final release on top of the Beta and it works like a charm.

So, in simplified terms, what is new in Visual Studio 2010 SP1

Before I start listing it down, I was checking if there was an MSDN article available on this and found http://msdn.microsoft.com/en-us/library/gg442059.aspx 

While it reads (Beta), the same holds good for the release candidate as well.  Unlike VS 2008 SP1 and .NET 3.5 SP1 (which came together), this release doesn’t add any new project templates/item templates.

However, there are lot of enhancements related to Web Deployment, Debugging and Unit Testing for .NET 3.5 applications.

So, how does one find if you are running the correct version of SP1 final release.

While the SP1 Beta (Help – About Visual Studio) reads Microsoft Visual Studio 2010 Version 10.0.3118.1 SP1 Rel, once you install the SP1 RTM release, it should read as below

image

The download link for SP1 Beta is here

Cheers!!!

Download Internet Explorer 9 RTM

The much anticipated RTM release of Internet Explorer 9 (IE9) happened today.  IE9 preview release was first showcased at MIX 2010 and post that there were 7-8 Platform Preview releases.  Also, IE9 Beta came out in September 2010 with close to 10 million downloads within a month.  More recently, the RC version was out with much improved performance. 

Today, marks the launch of IE9 RTM.  What this means is that, within an year, the IE Team has shipped the stable product, much faster than the earlier cycles for IE8 and IE7.  I wanted to clarify a few things (myths) that arise in common

1. I am already using Chrome and its faster for me, why would I need IE9

IE9 uses 100% hardware acceleration which means, you are going to get the best of performance compared to any other browser that shipped/will ship in future.  With native Windows support, IE9 will outperform all other browsers in terms of performance.

2. What about standards and security

Agreed IE6 hasn’t been in the best of standards, but why would someone compare IE6 which was released almost 10 years back.  Later, we shipped IE7 and IE8 which had the best of standards and supports during their timeframes, but one would agree that standards and specifications keep getting updated and its hard to keep pace with the same for older browsers.  Example. HTML5 support is not there in IE8 but it is very much there in IE9.  IE9 supports most of the stable standards of HTML5 and its going to provide preview releases for the work-in-progress standards.

3. IE doesn’t keep in pace with other browsers

Agreed! we don’t force/release updates on major versions in very short time periods.  What we do is provide Windows Update that provides security updates/patches and other critical updates for not just IE but the whole of Windows operating system

4. I am running Windows XP, what do I do?

This is the trickiest part.  Windows XP isn’t the supported operating system for IE9 and there are various reasons to it.  The recommended operating system is Windows Vista and Windows 7.  In the interest of technology and its pace, we had to discontinue Windows XP both from a retail selling perspective as well as IE9 support.  But, the recent 2 years has seen PCs/Laptops only shipped with Windows Vista or Windows 7 so, it shouldn't affect them.

5. Where do I verify IE9’s performance/standard support and other information.

http://samples.msdn.microsoft.com/ietestcenter/ 

Here below is a snapshot of one of the tests.

image

Clearly IE9 outperforms all other browsers and will continue to outperform them in future.  You can download IE9 from www.beautyoftheweb.com

Cheers!!!