JS files are not linking to asp.net MVC view

Question

I am creating an asp.net MVC application.

I have a view named "receive" and it placed in Views/Main folder.

I am trying to add js file.

In intellisense, I am getting access to js file functions.

But when I run the application, the js file is not linking.

My view is as follow

 @model dSite.Models.MModels
 <script type="text/javascript" src="../../Scripts/Jquery-2.1.js">        </script>
 <script>         
   $("#btn").click(function () 
       { alert("aa"); 
    });

</script>
@{
     ViewBag.Title = "receive";
 }
<h2>
receive</h2>
<input type="text" id="txtname" placeholder="enter name" />
<input type="button" id="btn" value="click here" />

And my Scripts folder is at the root.

How can I link my js file to my view? I have tried the above but it's not working

following is the file structure

enter image description here

Js files structure

enter image description here

When the view is rendered, see the page source, and get the script link. Paste here for reference. — Arghya C, May 22 '15 at 18:36
@Alex so try this: `src="@Url.Content("~/Scripts/Jquery-2.1.js")` — Andre Calil, May 22 '15 at 18:40
@Alex So there's something odd with your file structure. Can you add a print here? — Andre Calil, May 22 '15 at 18:44
@Alex, just to cover the corners. You sure its Jquery-2.1.js, not Jquery-2.1.4.js or something else? The rendered script tag from page source should be helpful. — Arghya C, May 22 '15 at 18:47
@Alex well, seems like the script is there indeed. If you inspect your browser console when in your page, do you see a 404 when it tried to load the script? What if you try to browse to (root-address)/Scripts/Jquery-2.1.js? — Andre Calil, May 22 '15 at 19:01
What make you think its not loading? If your expecting to see an alert box to be displayed with "aa", then it has nothing to do with jquery - its because `$("#btn")` is `undefined` (and you really should use a tilde `` — , May 23 '15 at 06:35
@StephenMuecke The problem is solved. thanks for your comment — user786, May 23 '15 at 06:48
I take it because you moved the script to the bottom of the page or wrapped it in document.ready() ? — , May 23 '15 at 06:50
@StephenMuecke yes I wrapped it in document.ready. why is this? — user786, May 23 '15 at 07:11
Firstly jquery was always loading! You would have seen a `$.` is not defined in the browser console if it wasn't. The real problem was that you have the script at the top of the page and not inside document.ready. What happens is as the view is rendered, you have `$("#btn").click(function ()` but at that point the element with `id="btn"` does not exist (its further down the page) so your actually attaching a `.click()` to something that does not exist (it's `undefined`) — , May 23 '15 at 07:17
@StephenMuecke I have asked a new question. please check it out:http://stackoverflow.com/questions/30410053/getting-data-from-controller-in-error-function-of-jquery-ajax-asp-net-mvc — user786, May 23 '15 at 07:19

score 1 · Accepted Answer · answered May 23 '15 at 07:30

Firstly jquery is being loaded! You would have seen a $ is not defined error in the browser console if it wasn't.

The real problem was that you have the following script at the top of the page but not inside document.ready.

<script>         
    $("#btn").click(function () { 
        alert("aa"); 
    });
</script>

What happens is as the view is rendered, the first line of the script is trying to attach a .click() event to the element with id="btn", but at this point that element does not exist in the DOM (its further down the page) so the you actually attaching the event to an undefined element (one that does not exist).

Unless you place your scripts immediately before the closing </body> tag, you should always wrap your scripts in $( document ).ready()

score 0 · Answer 2 · answered May 22 '15 at 18:24

0

Use the built in MVC bundling on your css and js files.

In your App_Data/BundleConfig.cs do this:

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

Replace your script tag in your view with this:

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

answered May 22 '15 at 18:24

Brad C

2,868
22
33

1

I don't think a bundle is necessary in this case. Also, OP seems to be a beginner, so a little more explanation would be interesting. – Andre Calil May 22 '15 at 18:29
I am using mvc 3. u sure BundleConfig available in mvc3. I tried but couldn't add this file to app data folder – user786 May 22 '15 at 18:35

Peter · Answer 3 · 2015-05-22T18:48:07.673

0

Update your script tag to this:

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

I believe in MVC 4+ (Razor 2) you can simplify this to

<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>

The tilde gets translated into your web application's root path so that you can specify paths relative to that.

edited May 22 '15 at 18:48

answered May 22 '15 at 18:37

Peter

12,541
3
34
39

score 0 · Answer 4 · edited May 23 '17 at 12:16

When a view is created and rendered all scripts are published in a folder Scripts at the root of your website so when you reference a script you must reference this folder. The scr atribute of the script references a absolute or relative url. Those can be referenced directly with a string or you can use the framework to generate one for you.

Check Absolute urls, relative urls, and...? to learn more about absolute and relative urls.

Some examples of the above using a string to reference the script's address

<script type="text/javascript" src="/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="http://mysite/Scripts/Jquery-2.1.js"></script>

You can also use url helpers like @Url.Content("~/Scripts/Jquery-2.1.js") and you will get an url generated by the framework acording to your defined routes.

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

I personaly recommend you that you use the MVC bundling and minification feature that will come handy in a production enviroment. This is located inside the BundleConfig.cs and you will have to specify which files you want to be generated.

bundles.Add(new ScriptBundle("~/bundles/myscript").Include("~/Scripts/myscript.js"));

Where myscript points to the javascript file you want to include and later reference it using

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

This will generate a script tag like the one you are using.

JS files are not linking to asp.net MVC view

4 Answers4

Linked