Menu
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>
536
A JS file for the Index component is placed in the Pages folder ( Pages/Index. razor. js ) next to the Index component ( Pages/Index. razor ).
To include a JavaScript function, it is as simple as include a <script> tag and define the function inside the script block. Now, to call the function, add an onclick event on the employee name hyperlink and call the function.
_Layout.cshtml The layout typically includes common user interface elements such as the app header, navigation or menu elements, and footer. Common HTML structures such as scripts and stylesheets are also frequently used by many pages within an app.
It is absolutely possible to have your jquery at the end of your body tag. Ideally the only js you have in your head is modernizr, html5shiv or the like.
Put a @RenderSection("scripts", required: false) after the jQuery <script... element as the last line inside your body element. Then in any of your views you would use
@section scripts
{
<script type="text/javascript">
$(function () {
// page specific js code here
});
</script>
}
Between your jQuery script element and the closing of your body element have a script element pointing to the relevant js file for the action/view in question:
<script
src="@Url.Content("~/Scripts/" + ViewContext.RouteData.GetRequiredString("action") + ".js")"
type="text/javascript">
</script>
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
