How do I add jquery to my MVC project

Question

I am new to MVC, how can I add the link/script below to my project and change the styling to suit.

<link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" 

rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
    $(function () {
        $("#accordion").accordion({
            collapsible: true
        });
    });
  </script>

Matt Tabor · Accepted Answer · 2014-02-23 13:36:44Z

1

Add the jQuery js and CSS file links to your master layout page in the header (or js files in the footer if you dont need them to load right away).

you can add your own css files after the jquery css files if you want to overwrite the styles.

answered Feb 23, 2014 at 13:36

Matt Tabor

1,0538 silver badges10 bronze badges

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

3 Comments

user3288249 Over a year ago

just not sure how I can take jquery from jquery-ui site and add to my project.

Matt Tabor Over a year ago

the jQuery CDN lets you link to them, its best because that means users will load your page faster, and will download the jQuery files from another web server. usually you will already have jQuery in your project if its a new MVC application, check your Scripts folder?

Matt Tabor Over a year ago

if it is not there you can install it from here: nuget.org/packages/jquery and nuget.org/packages/jQuery.UI.Combined

Paweł Bejger · Accepted Answer · 2014-02-23 13:26:50Z

0

You could use the @Scripts.Render method for this:

@Scripts.Render("~/jquery")

The above bundles the whole directory so you do not need to include it file by file.

And Styles.Render method for CSS files (localated within a given directory):

@Styles.Render("~/Content/css")

You can read more about bundling and minification in ASP.NET MVC here.

In case you use older versions of ASP.NET MVC you could simply do this in the following way:

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>

answered Feb 23, 2014 at 13:26

Paweł Bejger

6,38624 silver badges28 bronze badges

Collectives™ on Stack Overflow

How do I add jquery to my MVC project

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related