Hello I understand from reading advice on this site that scripts should go at the bottom of the _layout page. My problem is that I am not sure exactly where the ‘bottom’ is. Some people have said it is just before the tag but that does not work for me. I have tried putting the script in many places but nowhere seems to work. Could someone please tell me what I am doing wrong.
This is my About page
@{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p>
Put content here.
</p>
<script type="text/javascript">
$(function () {
alert("Hello World");
});
</script>
This is my _Layout page
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@* jQuery works if this line is here but not if it is at the bottom
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
*@
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()
</div>
<div id="footer">
</div>
</div>
@* jQery does not work if the script is here! *@
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</body>
</html>
Jquery file has to be included before first reference to jquery is found on the document. So, to solve this problem, i put jquery file in head section and all other script that are not used in views but in other script files are included before closing body tag