layout view jquery plugin is not available in child views mvc4

StackOverflow https://stackoverflow.com/questions/23647571

Question

I added jquery script in the layout page. but it is not accessible in the child view. I am not using any bundles.

Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1>Test Apppp</h1>
@RenderBody()
 <script src="/Scripts/modernizr-2.7.2.js"></script>
    <script src="/Scripts/jquery.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>

</body>
</html>

MyView.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="width: 100%; height: 500px;" class="float_left">

</div>
<script type="text/javascript">

    $(document).ready(function () {
        alert('dd');

    });   
</script>

Error shows in the $(document).ready(function){}); like $ is not defined Please suggest the solution

Thanks in advance

Was it helpful?

Solution

Use @RenderBody() and refer those scripts above the RenderBody()

<script src="/Scripts/modernizr-2.7.2.js"></script>
<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
@RenderBody()

OTHER TIPS

Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="~/Scripts/modernizr-2.7.2.js"></script>
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
 @RenderBody()
</body>
</html>

MyView.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" language="javascript">

    $(document).ready(function () {
        alert('dd');

    });   
</script>
<div style="width: 100%; height: 500px;" class="float_left">

</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top