Adding jquery to Empty MVC Project

Question

I'm fairly new to MVC and I'm trying to figure out how to add jquery to an empty MVC project.

I first added several js files to my project by installing several Nuget packages. Then I added the following to my my layout file.

<head>
    ...
    <script src="~/Scripts/jquery-2.0.3.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</head>

Now when I run the project I get the following javascript error.

 JavaScript runtime error: 'JSON' is undefined

When am I missing?

Thanks

Take a look at these SO Questions: http://stackoverflow.com/questions/12197323/how-to-to-include-javascript-into-the-page-header-mvc4 & http://stackoverflow.com/questions/4311783/asp-net-mvc-3-razor-include-js-file-in-head-tag These may help you sort out what you need/should be doing. — Archangel33, Oct 17 '13 at 19:08
"JavaScript runtime error: 'JSON' is undefined" error might appear in old IE browsers. Take a look at Json2.js library — cycaHuH, Oct 17 '13 at 19:56

score 0 · Answer 1 · answered Oct 17 '13 at 19:43

In order to get MVC to recognize what the tilde means, you need to use:

<head>
    ...
    <script src="@Url.Content("~/Scripts/jquery-2.0.3.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
</head>

Hope this helps!

score 0 · Answer 2 · answered Oct 18 '13 at 15:39

Apparently the newest version of jQuery that the jQuery Nuget packages installs drops support for IE 6, 7, and 8. And also won't work in IE 9 or 10 if it loads in compatibility mode.

I added the following to my layout page to tell IE not to run in compatibility mode.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

It seems to be working fine now.

score 0 · Answer 3 · answered Nov 24 '13 at 20:39

Put this in the head element of your cshtml or aspx:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

X-UA-Compatible meta tag allows web authors to choose which version of Internet Explorer the page should be rendered.

Adding jquery to Empty MVC Project

3 Answers3