I have an ASP.NET MVC 3 site that I’m trying to enable client-side validation on but I’m running into a really strange problem. The page loads and renders just fine until I include any javascript files. Once I do, any content below the script tag disappears completely. For example, this renders just fine (note the lack of a javascript include):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@ViewBag.Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
@Html.Partial("Header")
<div class="clr"></div>
<div class="body_resize">
<div class="body">
<div class="left">
@RenderBody()
</div>
<div class="right">
@RenderSection("RightContent")
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
@Html.Partial("BottomSection")
@Html.Partial("Footer")
</div>
</body>
</html>
This, however, causes the entire page to be blank (note the addition of the jQuery link tag in the HEAD section):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@ViewBag.Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" />
</head>
<body>
<div class="main">
@Html.Partial("Header")
<div class="clr"></div>
<div class="body_resize">
<div class="body">
<div class="left">
@RenderBody()
</div>
<div class="right">
@RenderSection("RightContent")
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
@Html.Partial("BottomSection")
@Html.Partial("Footer")
</div>
</body>
</html>
If I move the script link tag to the bottom of the page, it renders fine again, but I’m pretty sure I’m not getting access to the jQuery library. I tried adding this just above the script include (which is now at the bottom of the page):
<script language="javascript" type="text/javascript">
<!--
$(document).ready(function () {
alert('test');
});
//-->
</script>
My alert never fired.
So additionally, the same thing is happening in a separate Partial View:
<div id="formContainer">
@using (Html.BeginForm())
{
<div class="tRightBoxMid tClear">
<p style="padding:0;">
Your Name @Html.ValidationMessageFor(m => m.Name)<br />
@Html.TextBoxFor(m => m.Name, new { style = "width:275px" })<br />
Your Email Address @Html.ValidationMessageFor(m => m.Email)<br />
@Html.TextBoxFor(m => m.Email, new { style = "width:275px" })<br />
Your Message @Html.ValidationMessageFor(m => m.Message)<br />
@Html.TextAreaFor(m => m.Message, 4, 100, new { style = "width:275px" })<br />
<input type="submit" class="formButton" value="Send Message" /><div id="msgSent" style="display:none;"><br /><br /><font color='green'><b>Message sent! A representative will be in touch with you shortly.</b></font></div>
</p>
</div>
}
</div>
<script type="text/javascript" src="/Assets/js/jquery.validate.min.js" />
<script type="text/javascript" src="/Assets/js/jquery.validate.unobtrusive.min.js" />
My client validation is never firing (note the includes at the BOTTOM — page renders, but I’m not getting access to the included JS). If I move it to the top, the rest of my page loads, but this partial view disappears.
Long story short, any HTML that exists BENEATH a javascript include anywhere in my site seems to be disappearing and when I move the JS to the bottom, it’s like it’s not included at all. I’ve tried deleting all of the content from the various body and other sections to eliminate it, but it seems to be happening even when almost all markup and code is stripped out of the equation…anyone have any idea what’s going on here?
try closing the script tag like this
then try: