jqueryasp.net-mvc

Body tag does not render. ASP.NET MVC


I'am working on small ASP.NET MVC project and I got an weird behaviour. At the point the project differs from ASP.NET MVC default template only by css stylesheets. The body tag is completely empty. Here you can see the master page:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!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="<%: ResolveUrl("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
    <link href="<%: ResolveUrl("~/Content/ObscuraUI.css") %>" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="/Scripts/jquery-1.4.1.js" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>Obscura.com</h1>
            </div>            

            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>

            <div id="menucontainer">

                <ul id="menu">
                    <li class="ui-corners-all" ><%: Html.ActionLink("Home", "Index", "Home")%></li>
                    <li class="ui-corners-all" ><%: Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

and the home controller index view:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <img src="../../Content/Images/Design/blackpony1440.jpg" alt="" class="protectedContent" />
</asp:Content>

I've looked through the generated html with firebug - the head is rendered correctly, but the body tag is completely empty but view initial source shows the correct html. I tried to throw an exception in index view and i got the error page. I have no useful warnings while building project. but when i commented this line

<script type="text/javascript" src="/Scripts/jquery-1.4.1.js" />

everything was rendered well.

I thought of some script failure, but if I import just an empty file i get the empty screen. Why does it work this way ?

Thanks.


Solution

  • You shouldn't use self-closing tags e.g. " " in your web forms or pages. Doing that will make crazy things happen, and unexpected behavior in the browsers. Even the browser inspecting tools will suggest this problem is due to Quirck mode.

    Follow the protocol especially for <script> tags and other server-side controls, too. Use closing tags as follows:

    <script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
    

    <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>