I am having a problem where I try to render a <table> inside of parent container, but MVC3 Razor always renders the outside of the container tag. This causes problems when trying to control the outside parent container via Javascript.
Razor Example:
<span id="mySpan">
@Html.Action("Table1", "GetMyTable")
</span>
HTML that is output:
<span id="mySpan"></span>
<table>
<thead><tr><th>Header</th></tr></thead>
<tbody>
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
</tbody>
</table>
No matter which parent container I try to stick the table into, a div, span, p, the table always renders OUTSIDE the container’s tags! Can anyone explain what I am doing wrong? How should I code the Razor syntax to properly add the table inside those tags?
as you are viewing the output in Firebug, what is happening is you are seeing an “effective” view of the html, after the browser engine has parsed it.
in HTML5, many tags do not need to be explicitly closed. If you include a tag “inside” another that is invalid (like a table inside a span), the browser assumes what you are doing is using an unclosed span tag, so it automatically closes it for you before starting the table tag.
The easiest fix here would be either not to “wrap” the table, or wrap it with something that HTML5 considers valid, such as a section tag.
Another option would be going back to XHTML1.1, where a table is valid inside a div (but not inside a span). Also, XHTML requires explicit closing tags, so this behavior would not show up there. (the same thing for XHTML5, though it’s still invalid to wrap a table with a div in XHTML5)
Viewing the raw source would reveal that Razor is not axtually changing anything here; it is the browser. It is good to see this, though; so you know what the browser is expecting and how it’s handling what you are sending it.