Converting a classic ASP site to ASP.NET MVC – Part I

The site has three main content areas –

  • The main content area that holds the site’s content
  • The right menu that holds a number of images and links (these are displayed on every page)
  • The left menu that holds the site’s navigation menus and also displays the current sponsorship totals (this section is also displayed on every page)

The classic ASP site uses functions to render the left and right menus. The main content of each page is included in the pages mark-up alongside calls to the left and right hand menu functions. In the ASP.NET MVC we’ll use master pages to render the content.

Master page

The main master page on the new site will render the main site banner, it will also contain a placeholder to hold the content for each page. The mark-up for the master page will therefore look something like this –

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head runat=“server”>
  4. <title><asp:ContentPlaceHolder ID=“TitleContent” runat=“server” /></title>
  5. <link href=“../../Content/158grounds.css” rel=“stylesheet” type=“text/css” />
  6. </head>
  7. <body bgcolor=“#FFFFFF” marginwidth=“0” marginheight=“0” topmargin=“0” leftmargin=“0”>
  8. <table border=“0” cellspacing=“0” cellpadding=“0” width=“100%”>
  9. <tr style=“height:2mm”>
  10. <td align=“center”>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td align=“center”>
  15. <img src=“../../images/image3.gif” hspace=“0” vspace=“0”>
  16. </td>
  17. </tr>
  18. <tr style=“height:2mm”>
  19. <td align=“center”>
  20. </td>
  21. </tr>
  22. <tr>
  23. <td align=“left”>
  24. <table border=“0” cellspacing=“0” cellpadding=“0” width=“100%” bgcolor=“FFFFFF”>
  25. <tr>
  26. <td width=“22%” valign=“top”>
  27. <!–DrawLeftTable()–>
  28. </td>
  29. <td width=“1%”>
  30. </td>
  31. <td valign=“top”>
  32. <asp:ContentPlaceHolder ID=“MainContent” runat=“server” />
  33. </td>
  34. <td width=“1%”>
  35. </td>
  36. <td width=“177” valign=“top”>
  37. <!–DrawRightTable()–>
  38. </td>
  39. </tr>
  40. </td>
  41. </tr>
  42. </table>
  43. </body>
  44. </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/158grounds.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr  style="height:2mm">
        <td align="center">
        </td>
    </tr>
    <tr>
        <td align="center">
            <img src="../../images/image3.gif" hspace="0" vspace="0">
        </td>
    </tr>
    <tr  style="height:2mm">
        <td align="center">
        </td>
    </tr>
    <tr>
        <td align="left">
            <table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="FFFFFF">
                <tr>
                    <td width="22%" valign="top">
                        <!--DrawLeftTable()-->
                    </td>
                    <td width="1%">
                    </td>
                    <td valign="top">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                    </td>
                    <td width="1%">
                    </td>
                    <td width="177" valign="top">
                    <!--DrawRightTable()-->
                    </td>
                </tr>
        </td>
    </tr>
</table>

</body>
</html>

You’ll have to forgive the use of tables in the page layout, the site was written in 2005 and CSS hadn’t yet been invented ;-). Now we have a content placeholder we can create a view that will hold the homepages initial content. As explained here the ASP.NET MVC app will initially look at the ‘index.asp’ mark-up. Here it is –

  1. <%@ Page Language=“C#” MasterPageFile=“~/Views/Shared/Site.Master” Inherits=“System.Web.Mvc.ViewPage” %>
  2. <asp:Content ID=“aboutContent” ContentPlaceHolderID=“MainContent” runat=“server”>
  3. <table border=“0” cellspacing=“0” cellpadding=“0” width=“100%” bgcolor=“FFFFFF”>
  4. <tr>
  5. <td align=“left” width=“2%”>
  6. &nbsp;
  7. </td>
  8. <td align=“left” width=“98%”>
  9. <font class=“plainText”>
  10. Content would appear here …
  11. </font>
  12. </td>
  13. </tr>
  14. </table>
  15. </asp:Content>
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="FFFFFF">
      <tr>
        <td align="left" width="2%">
           &nbsp;
        </td>
           <td align="left" width="98%">
          <font>
              Content would appear here ...
          </font>    
        </td>
      </tr>
     </table>
</asp:Content>

On hitting the ‘view.aspx’ file the MVC application will render the master page with the ‘view.aspx’ mark-up contained within the ‘MainContent’ placeholder. (Incidentally, if you get this error – “System.Web.HttpException: Content controls have to be top-level controls in a content page or a nested master page that references a master page.” It’s probably because you forgot to include content placeholder in the view. That might seem very simple – but it confused me for a few minutes!)

Now all we have to is render the content in the right and left menus. The left menu renders dynamic content so we’ll look at how to render that in a later part in the series. The right menu always renders the same content, but rather than lumping it all in with master page we’ll use a slightly different approach.

RenderPartial

The html helper method RenderPartial will render a view within the mark-up of another view or master page. So if we create a view under our ‘home’ subdirectory like this –

158views

We can render this view within the master page by adding the following code –

  1. <td width=“177” valign=“top”>
  2. <!–DrawRightTable()–>
  3. <% Html.RenderPartial(“RightTable”);%>
  4. </td>
<td width="177" valign="top">
    <!--DrawRightTable()-->
    <% Html.RenderPartial("RightTable");%>
</td>

The render partial method will then render the mark-up with in the ‘RightTable.aspx’ view at the specified position on the page.

That’s it for the first part, in the next part we’ll look at adding the left menu to the site. This will involve data access and rendering dynamic content on multiple pages.