Not sure where to place Scripts.Render for JQuery

I'm receiving a 'Uncaught TypeError: undefined is not a function' while trying to call the autocomplete function in JQuery and I'm assuming I have my Scripts.Render in the wrong place. Where shouldthe JQuery scripts go within the layout.cshtml? My assumption was at the top but I can't seem to get it working no matter where I put them.

Here is the top of my layout file:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/themes/base/css")
</head>...

and at the bottom I have this:

...
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

At the bottom of my View file I have the javascript:

@section scripts{
    <script>
    $(document).ready(function () {

        $('#mpvalue').autocomplete({
            source: '@Url.Action("MyMethod")'
        });

    });
    </script>
}

I also have some bundling going on in the BundleConfig:

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                  "~/Content/themes/base/jquery.ui.core.css",
                  "~/Content/themes/base/jquery.ui.resizable.css",
                  "~/Content/themes/base/jquery.ui.selectable.css",
                  "~/Content/themes/base/jquery.ui.accordion.css",
                  "~/Content/themes/base/jquery.ui.autocomplete.css",
                  "~/Content/themes/base/jquery.ui.button.css",
                  "~/Content/themes/base/jquery.ui.dialog.css",
                  "~/Content/themes/base/jquery.ui.slider.css",
                  "~/Content/themes/base/jquery.ui.tabs.css",
                  "~/Content/themes/base/jquery.ui.datepicker.css",
                  "~/Content/themes/base/jquery.ui.progressbar.css",
                  "~/Content/themes/base/jquery.ui.theme.css"));
    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/respond.js"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/site.css"));

From what I've read on other posts and examples on the web, everything appears to be in the correct places.

What am I doing to throw the 'Uncaught TypeError: undefined is not a function'?

Any help would be appreciated

Thanks!

EDIT: This is running on ASP.NET MVC 5

回答1:

The order of your includes doesn't actually have anything to do with your JS error. It doesn't look like the jQueryUI JavaScript file is actually included in any of your script bundles. You have a bunch of CSS files for jQueryUI, but no JS files. In the code that you included in the question, you're trying to render a bundle called "jqueryui" but there is not a bundle defined with that name in the BundleConfig.

Assuming you have added jQueryUI to the project, the jQueryUI script bundle should look like this (taken from the MVC4 template):

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

回答2:

As a rule of thumb, you define all your @Styles.Render(...) at the top in your head and all your @Scripts.Render(...) just before your body.

They will work elsewhere sure but then you encounter different kind of performance issue or just plain duplicate declaration like you have now.

In this scenario, you do have a duplicate modernizr declaration.

If case this answer is not solving your issue, please provide the relevant generated HTML (<script>/<style> tags in head in at the bottom of your page) as well as the console output (it will tell you from which scripts this error is coming from).