CODEWITHSUNDEEP
jqueryasp.net-mvc-4
user2561899
user2561899

Reputation:

Proper way to include jquery in a ASP.NET MVC4 project

I'm new to ASP.NET MVC 4 and I would like to add a jquery control in one of the pages of my project.

Here is the end part of my _layout.cshtml file :

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

1. What exactly does the @Script.Render("~/bundles/jquery") line ?

Inside the page where I want my control added :

@{
    ViewBag.Title = "Test page";
}

@section scripts
{
    @Scripts.Render("~/Scripts/jquery-1.8.2.js") // The control needs jquery.
    @Scripts.Render("~/Scripts/icarousel.min.js") // The control in question.
    @Styles.Render("~/Content/icarousel.css") // A css file needed by the control.
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#icarousel').iCarousel();
    });
</script>

(some html code here, including the #icarousel div ... )

When I run that page, I get the error : '$' is undefined.

It's like jquery is not loaded or something ...

2. What am I missing to make this work ?

Upvotes: 4

Views: 30330

Answers (3)

Claudio Redi
Claudio Redi

Reputation: 68400

What exactly does the @Script.Render("~/bundles/jquery") line ?

Go to App_Start -> BundleConfig. Inside that file you'll see something like this 

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

Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file. You can create CSS, JavaScript and other bundles. Fewer files means fewer HTTP requests and that can improve first page load performance

What am I missing ?

You don't need your jquery declaration on your page as @Script.Render("~/bundles/jquery") is already redering a reference to your jquery file. You should remove that.

Be sure to place any jquery code after library reference.

Upvotes: 4

Joe Enos
Joe Enos

Reputation: 40393

You're putting the jQuery script tag at the very bottom of the body, but trying to use it at the top of your file. Everything runs top-to-bottom, so it's trying to use something that hasn't loaded yet.

Check out the rendered HTML source to see exactly what it looks like.

You should probably render your scripts section (specifically the ones that point to javascript files rather than inline script) inside the head, rather than the body.

Upvotes: 4

Oleksii Aza
Oleksii Aza

Reputation: 5398

@Scripts.Render("~/bundles/jquery") is mechanism of asp.net mvc 4 that bandles and minifies your scripts.

Try to relocate @Scripts.Render("~/bundles/jquery") as high as possible between head tags. Something like this on your _Layout.cshtml:

<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
    </head>

Upvotes: 2

Related Questions