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.
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
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.
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.
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.
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.
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!!!