Using Razor "RenderPartial" and "RenderBody", the body is rendered on top

Question

I am developing a site with Header, Main Menu, Body and Footer sections.
I am using a web page base layout _Layout.cshtml where I use the RenderPartial() method to render the Header, Main Menu and Footer. For the body, I am using the RenderBody() method.
In _Layout.cshtml I have the following code:

<body style="margin: 0">
<form name="FormStart" method="post" action="Start.aspx" id="FormStart">
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
    <tr>
        <td valign="top" width="1px"></td>
        <td valign="top" align="center" width="972" bgcolor="#FFFFFF">
            <table id="Table1" cellspacing="0" cellpadding="0" width="972" border="0" bordercolor="yellow">
                 <!-- HEADER -->
                 @{Html.RenderPartial("_Header");}

                 <!-- MAIN MENU -->
                 @{Html.RenderPartial("_Menu");}

                 <!-- CONTENT -->
                 @RenderBody()
             </table>
             <br />
             <!-- FOOTER -->
             @{Html.RenderPartial("_Footer");}
         </td>
    </tr>
</table>
</form>
</body>

On the other hand, I created a very simple view with the following code

@{
    ViewBag.Title = "Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h3>You just clicked </h3><h1>NATURAL ALOE SECTION</h1>

The thing is, that the content of this simple view is displayed at the very top of the page, whereas the rest is on the bottom. Instead of displaying HEADER-MAINMENU-my site-FOOTER it displays it in the order of my site-HEADER-MAINMENU-FOOTER.

I am quite new with MVC all around; I have been reading here about the possibility of using RenderSection instead of RenderPartial in my main Layout site, but could this be the reason while it is displaying this way? Probably I am way off base, any advice is much appreciated.

Thanks in advance.

Dennis Traub · Accepted Answer · 2012-10-24T07:29:49.187

2

This might be happening because you render the header, menu and body inside a <table>. At least the body seems to be missing the row and cell tags (<tr><td>...</td></tr>). Therefore there are no rows and cells in your table which can lead to all sorts of rendering problems.

It would probably help if you didn't render into a table and use CSS for layout purposes instead.

edited Oct 24 '12 at 07:29

answered Oct 23 '12 at 15:23

Dennis Traub

50,557
7
93
108

You were right! It was a matter of cleaning the html. Thanks! – Soph Oct 29 '12 at 16:43

score 0 · Answer 2 · answered Oct 23 '12 at 23:08

This looks to be nothing to do with the MVC side of what you are doing - that looks perfectly fine.

The issue will be with your HTML. I would suggest having a look at the site using one of the browser developer tools (e.g. in Chrome or IE open your site and press F12) - you can use the features of these to examine how the visual elements on your page relate to the HTML. These tools are invaluable as an MVC programmer.

Using tables to control the layout of a web-page is discouraged in favour of using css for layout. You can find some basic css layout templates via Google to get started.

Using Razor "RenderPartial" and "RenderBody", the body is rendered on top

2 Answers2