asp.net iframe webforms frameset multiview

Multi-paned Web Page

What is the best practice for making a multi-paned web page?

For example, I have a web page divided up like so:

enter image description here

This page is for a VERY old internal application that I'm giving a much needed makeover to. It was done with framesets which have long been deprecated. My question is what is the best way to redesign this with a similar separated feel? Please keep in mind the left "menu bar" is largely static while the main viewport on the right is where all the content is loaded into.

The options I have come up with are:

ASP.NET MultiView (x2, one for sidebar, one for main content)
iframes (x4, one for each view)

I'm sure I'm missing other options. What is the best practice for this type of layout considering the functional requirements?

Solution

I would use a masterpage and use separate webcontrols for each of the panels.

If your content in the left most panel(s) don't change then a masterpage should be fine and probably very easy too.

I've roughed out a sample for you below as I'm probably not the best at explaining things in text only.

In the sample I've used 7 Items as listed below.

The core parts 1. MasterPage 2. QuickLinks (your topmost panel on the left with a...b...c.. etc) 3. LeftNavMain (Your middle panel on the left also with a...b...c... etc) 4. SearchPanel (Your bottom panel on the left with return to search / search)

The content

Default (home page)
Page_A (a generic content page in this case for the 'A' Index
Search (the search page)

Hopefully the actual pages should explain better when you click the links you will see what I meant.

MASTERPAGE

<%@ Master Language="VB" %>
<%@ Register src="QuickLinksPanel.ascx" tagname="QuickLinksPanel" tagprefix="uc1" %>
<%@ Register src="LeftNavMain.ascx" tagname="LeftNavMain" tagprefix="uc2" %>
<%@ Register src="SearchPanel.ascx" tagname="SearchPanel" tagprefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  'Server side code here
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder id="head" runat="server">
  </asp:ContentPlaceHolder>
    <style type="text/css">
      .QuickLinks
      {
        font-family: Tahoma,;
        font-size: 12pt;
        text-align: center;
        vertical-align: middle;
      }
    .MainItemsOrLinks
    {
        font-family: Tahoma,;
        font-size: 14pt;
        text-align: left;
        vertical-align: middle;
        padding-left: 8px;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <div style="text-align: center; vertical-align: middle; height: 100%; width: 100%;">
      <table style="width: 100%; height: 100%; border-collapse: collapse; border-style: none;">
        <tr>
          <td style="width: 30%; text-align: left; vertical-align: top; height: 15%;">
            <uc1:QuickLinksPanel ID="QuickLinksPanel1" runat="server" />
          </td>
          <td style="width: 70%; padding: 24px; height: 80%; text-align: left; vertical-align: top; border-left-style: solid; border-left-width: 8px; border-left-color: #CCCCCC;" rowspan="3">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
          </td>
        </tr><tr>
          <td style="width: 30%; text-align: left; vertical-align: top; margin-left: 40px; border-top-style: solid; border-bottom-style: solid; border-top-width: 8px; border-bottom-width: 8px; border-top-color: #CCCCCC; border-bottom-color: #CCCCCC;">
            <uc2:LeftNavMain ID="LeftNavMain1" runat="server" />
          </td>
        </tr><tr>
          <td style="width: 30%; text-align: left; vertical-align: top; height: 5%;">
            <uc3:SearchPanel ID="SearchPanel1" runat="server" />
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>
</html>

QUICKLINKS (left top

<%@ Control Language="VB" ClassName="QuickLinksPanel" %>
<script runat="server">
'Server side code here
</script>
<table style="width: 100%;">
  <tr>
    <td class="QuickLinks"><a href="Page_A.aspx">A</a></td>
    <td class="QuickLinks">B</td>
<td class="QuickLinks">C</td>
<td class="QuickLinks">D</td>
<td class="QuickLinks">E</td>
<td class="QuickLinks">F</td>
<td class="QuickLinks">G</td>
<td class="QuickLinks">H</td>
<td class="QuickLinks">I</td>
<td class="QuickLinks">J</td>
<td class="QuickLinks">K</td>
  </tr><tr>
    <td class="QuickLinks">L</td>
    <td class="QuickLinks">M</td>
    <td class="QuickLinks">N</td>
    <td class="QuickLinks">O</td>
    <td class="QuickLinks">P</td>
    <td class="QuickLinks">Q</td>
    <td class="QuickLinks">R</td>
    <td class="QuickLinks">S</td>
    <td class="QuickLinks">T</td>
    <td class="QuickLinks">U</td>
    <td class="QuickLinks">V</td>
  </tr><tr>
    <td class="QuickLinks">W</td>
    <td class="QuickLinks">X</td>
    <td class="QuickLinks">Y</td>
    <td class="QuickLinks">Z</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

SEARCH PANEL (left bottom)

<%@ Control Language="VB" ClassName="SearchPanel" %>
<script runat="server">
'Server side code here
</script>
<p><a href="search.aspx">Return To Search Page</a></p>

LEFTNAV (left middle)

<%@ Control Language="VB" ClassName="LeftNavMain" %>
<script runat="server">
'Server side code here
</script>
<table style="width: 100%;">
  <tr>
    <td class="MainItemsOrLinks"><a href="page_a.aspx">A Something</a></td>
  </tr><tr>
    <td class="MainItemsOrLinks">B Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">C Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">D Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">E Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">F Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">G Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">H Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">I Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">J Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">K Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">L Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">M Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">N Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">O Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">P Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">Q Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">R Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">S Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">T Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">U Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">V Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">W Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">X Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">Y Something</td>
  </tr><tr>
    <td class="MainItemsOrLinks">Z Something</td>
  </tr>
</table>

DEFAULT PAGE (home page content)

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
'Server side code here
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <h1>Home</h1>
</asp:Content>

SEARCH PAGE (search page content)

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
'Server side code here
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <h1>Search</h1>
</asp:Content>

PAGE_A PAGE (Generic page content)

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" %>
<script runat="server">
'Server side code here
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <h1>Page_A</h1>
</asp:Content>

Well thats it, hopefully that will explain better what I couldn't explain in words.