Creating a Hybrid Website of Traditional and .NET Technologies

In 20 Steps!

We recently created a hybrid website, combining a traditional HTML site with a .NET site.  Before going over any details, however, let me share with you the specific list of project mandates and goals.

Here's an overview of all the steps we went through.

Project Goals:

• Create a linkage between a traditional HTML website and a .NET website, without converting existing HTLM files into ASPX;
• Identify a simple deployment mechanism;
• Create a database connectivity interface;
• Make sure the database connectivity interface can dynamically re-adjust itself to the location of the web server:
  • Subsequently, when the web server location is the developer's machine, use an MS Access database;
  • On the other hand, when the web server location is the ISP servicing the world wide web, use a SQL Server database; 
• Text and HTML documents are fine;
• Word processor documents (such as MS Word's .DOC) may or may not be OK for everyone, depending on the presence of Internet Explorer or MS Office on the recipient's machine;
• Database reports are usually NOT suitable as e-mail attachments.

• Is the recipient community ready to receive what you're sending them solely via e-mail or are there legal or technology issues that would necessitate a hard-copy to be mailed or faxed?
• Are you planning to develop a system that would function in a less-than-perfect mode?  For example ...
  • When all recipients are not willing to switch to an e-mail only mode, will your system behave in a user-preference mode?
  • What if all e-mail addresses aren't available?  Will your system send the e-mail to some and generate an alternative output for the others?

Development Steps:

Here are the development steps we went through, together with some comments about steps that didn't work and should be avoided.

1. Verify that the tools have been properly setup.  In this case, we had the following:
   • MS FrontPage 2000 for the traditional website
   • MS Visual Studio 2003 for the .NET website
   • MS Access 2002
   • MS SQL Server 2000 Developer Edition
   • All setup on a Windows XP Professional development machine
2. Verify the source code location of existing sites.  The source for the traditional site was at C:\InetPub\www\Pointer7 and the .NET source was at C:\InetPub\www\PointerDotNet.
3. Determine the coding language of the .NET site:  it was VB.NET.
4. Determine the directory path of the merged websites.  Our first attempt at this was to create a sub-folder under Pointer7 for the .NET elements (such as Pointer7\DotNet) and then copy necessary files from the existing PointerDotNet folder into the new subfolder Pointer7\DotNet.  This turned out to be a bad idea, as the number of adjustments needed on the .NET pages (ASPX files) which were copied from PointerDotNet to Pointer7\DotNet were prohibitive.

   NOTE: We thought about a reverse architecture (by putting the traditional site under the .NET site (something like PointerDotNet\Pointer7), but we ruled it out without even trying it.  Our reason for this decision was that we wanted to keep the traditional site as the users entry point (since, not all the users would need the .NET additions to the existing site).

    

5. Eventually, we ended up creating a new ASP.NET project (using Visual Studio 2003) at C:\InetPub\www\Pointer8 as the base of the new website.  This way, Pointer8 is automatically defined to Locahost web server.
6. We then copied just the .NET web pages (ASPX files) from PointerDotNet to Pointer8.
7. Then, we added the copied ASPX files to the VS2003 project, using the following sequence for each:
   • Right click
   • Add
   • Add existing item ...
8. Next, we established the entry page of the .NET piece using "Set as Start Page" in order to be able to test the .NET part independently.
9. Then we tested the .NET piece in its new home (using the F5 key);  It worked!
10. Incidentally, by testing the .NET piece independently, we also forced the .NET project to be compiled and the following files to be generated:
    • Pointer8\bin\Pointer8.dll
    • Pointer8\bin\Pointer8.pdb
11. It was now time to copy the traditional website (including all its subfolders) from Pointer7 to Pointer8.
12. Next, we created the linkage between the two sites, simply by utilizing a new hyperlink on the traditional site's Default page to point to the starting page of the .NET piece (i.e. it's ASPX file).
13. Since the starting point of the combined site is not Webform1 anymore (which was created by VS2003), we deleted all its references (Webform1.aspx, Webform1.aspx.resx and Webform1.aspx.vb).
14. Now it was time to Publish the combined website.  By having both sites in the same folder (Pointer8), we could simply utilize the Publish Web ... function of FrontPage.  Another benefit of taking this approach was that we wouldn't have to utilize VS2003's Setup and Deployment Projects.  (Especially since quite a few articles were posted on MSDN regarding the bumpy roads that other developers had experienced in their attempt to implement Setup and Deployment projects and we couldn't afford it's uncertainties at this point.)
15. Then we tested the combined site, via the Default page of the main site and its linkage to the .NET site.
16. Before establishing web server recognition and database connectivity features, a few clean-up tasks here and there were taken care of.  For example:
    • All HTML controls on the .NET side were converted to their equivalent web controls (both for programmability reasons and also for consistency of their appearance).
    • URL types on the .NET side were converted to Document relative, especially in ImageUrl property of Image controls.
17. For web server recognition, we used the following code:

    If InStr(UCase(Request.MapPath(Request.ApplicationPath())), "POINTER8") Then

        ' Code for web server on the developer's machine

    Else

        ' Code for web server on the world wide web

    End If

     

18. For database connectivity, we used the following connection strings (which are pretty standard):
    • For MS Access: "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(".") & "\myaccessdb.mdb; User Id=admin; Password="

       

    • For SQL Server: "server='server IP address'; user id='sqluser'; password='sqlpw'; database='mysqldb'"
19. We then examined the test data, directly from their respective database tools (MS Access and SQL Enterprise Manager), before connecting to them via the web.
20. Finally, we performed an end-to-end test on the entire system.  All done!