How to include javascript code in asp.net MVC4 View page?

Question

i am new to asp.net MVC4 architecture i am get stuck with following thing please help me.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

<script type="text/javascript">
$(function () {
    $("#sections").tabs();
    //here i am getting error that Object[object object] has not method tabs    
});
</script>

<div id="sections">
    <ul>
        <li><a href="#section-1">section-1 </a></li>
        <li><a href="#section-2">section-2 </a></li>
    </ul>
        <div id="section-1">
        section-1 content............  
        </div>
        <div id="section-2">
        section-2 content............ 
        </div>
    </div>

THANKS IN ADVANCE......

Darin Dimitrov · Accepted Answer · 2012-10-17 12:19:29Z

10

You probably have included the ~/bundles/jquery bundle twice. Checkout your ~/Views/Shared/_Layout.cshtml file. At the end you probably have the following:

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

So the jQuery bundle is already included in your page. You should not include it a second time inside your view. You need only the ~/bundles/jqueryui bundle:

@Scripts.Render("~/bundles/jqueryui")

<script type="text/javascript">
$(function () {
    $("#sections").tabs();
    //here i am getting error that Object[object object] has not method tabs    
});
</script>

<div id="sections">
    <ul>
        <li><a href="#section-1">section-1 </a></li>
        <li><a href="#section-2">section-2 </a></li>
    </ul>
    <div id="section-1">
        section-1 content............  
    </div>
    <div id="section-2">
        section-2 content............ 
    </div>
</div>

UPDATE:

Here's a full example of how the structure of your view might look like:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Foo</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
    <div id="sections">
        <ul>
            <li><a href="#section-1">section-1 </a></li>
            <li><a href="#section-2">section-2 </a></li>
        </ul>
        <div id="section-1">
            section-1 content............  
        </div>
        <div id="section-2">
            section-2 content............ 
        </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    <script type="text/javascript">
        $("#sections").tabs();
    </script>
</body>
</html>

edited Oct 17, 2012 at 12:19

answered Oct 17, 2012 at 10:49

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

savy Over a year ago

thanks for reply...but when i remove @Scripts.Render("~/bundles/jqueryui") this line it says $ is not defined...

Darin Dimitrov Over a year ago

You should not remove the @Scripts.Render("~/bundles/jqueryui") line. You should remove the @Scripts.Render("~/bundles/jquery") line if it already exists in your _Layout.cshtml. Is this the case? I have updated my answer with an example of how your view might look.

Rex Whitten Over a year ago

How do you do this , when you are not using bundler? (or any other minifcation.) I get the same behavior as the OP. Its included in the _Layout, but then I also have to include it in every page I want to use JavaScript in. Else I get $ not defined.

Collectives™ on Stack Overflow

How to include javascript code in asp.net MVC4 View page?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related