[SOLVED] jQuery is not defined error when rendering partial view

jQuery is not defined error when rendering partial view

I have a _layout.cshmtl which has the following (kept very simple):

<head>
    <partial name="_Styles" />
</head>
<body>
    @RenderBody()
    <partial name="_Scripts" />
</body>

The _scripts.cshtml file is just the following:

<script src="~/plugins/jquery/jquery.min.js"></script>
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

I then have a partial view that uses jsgrid, so I have:

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

<link type="text/css" rel="stylesheet" href="~/plugins/jsgrid/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="~/plugins/jsgrid/jsgrid-theme.min.css" />

<section>stuff here...</section>

<script src="~/plugins/jsgrid/jsgrid.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () { //code here... });
</script>

With the above in place I get the following errors:

jsgrid.min.js:7 Uncaught ReferenceError: jQuery is not defined at jsgrid.min.js:7

MyView:104 Uncaught ReferenceError: jQuery is not defined at MyView:104

So how do I exactly make sure that the parent view's scripts are loaded before/during the partial view?

Solution

Before using the JQuery method or the JSGrid plufin, we should add the JQuery reference. So, the JQuery reference should be load before the jsGrid.

Try to modify your code as below (code in the _layout.cshmtl, please check the file path, make sure it is correct):

<body>
    <partial name="_scripts.cshtml" />
    @RenderBody()
</body>

Or using the following code:

<body>
    <script src="~/plugins/jquery/jquery.min.js"></script>
    <script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    @RenderBody()
    <partial name="_scripts.cshtml" />
</body>