How to include js files in the view. ASP.NET MVC 4

Question

I wonder why my js file work when I call it in the view:

@section Scripts {  
<script>   

    function myFunction() {
        alert("Hello1");
    }       

</script>
}

but does not work when I call it:

@section Scripts {

   <script type="text/javascript" src="~/Views/Home/script.js"></script>
   <script>   
         myFunction();
    </script>
}

These both look like Razor files? Is the top file the _Layout and the second a view using the layout? — Christian Phillips
– Christian Phillips, Commented Jul 15, 2014 at 16:33
I'm working in the view. But with "@ section Scripts" I want the script to be placed in the _Layout when run in the browser. Thanks. — efrainx3
– efrainx3, Commented Jul 15, 2014 at 23:13

David Sherret · Accepted Answer · 2015-08-25 23:49:28Z

30

It's because .js files are not accessible in the ~/Views/ folder. You have to enable it.

To enable access to .js files in the Views folder, you can add the following to your Views' folder's web.config directly under the handlers tag:

<add name="JavaScriptHandler"
         path="*.js"
         verb="*"
         preCondition="integratedMode"
         type="System.Web.StaticFileHandler" />

Alternatively put your script into the ~/Scripts/ folder and reference it like such:

@Scripts.Render("~/Scripts/script.js")

edited Aug 25, 2015 at 23:49

answered Jul 15, 2014 at 16:31

David Sherret

108k28 gold badges197 silver badges190 bronze badges

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

3 Comments

David Sherret Over a year ago

Just a sidenote... I actually put my scripts in the Views folder. I do something like having Views/Home/Contact.cshtml and nested underneath the file in visual studio (using the NestIn extension) I have Views/Home/Contact.js and Views/Home/Contact.less. Then my build script picks up the files appropriately. It's actually a great time saver to do this.

codea Over a year ago

David, can you elaborate about what your build script does? I like this idea too, I am passing a lot of time struggling and looking for related files...

David Sherret Over a year ago

@codea sorry, that was confusing. Since I have a build script that minifies and concatenates my scripts, instead of having it search the scripts folder for scripts—~/Scripts/**/*.js—it searches the Views folder instead—~/Views/**/*.js since they are now stored in there.

Felipe Pincheira · Accepted Answer · 2016-02-11 21:27:03Z

10

Its better practice to place your Js file in Script folder and access it from there. You could write this code in view's head to use the js file

@Scripts.Render("~/Scripts/script.js")

edited Feb 11, 2016 at 21:27

Felipe Pincheira

4741 gold badge6 silver badges21 bronze badges

answered Jul 15, 2014 at 16:38

Cybercop

8,72421 gold badges79 silver badges137 bronze badges

Comments

Maroine Abdellah · Accepted Answer · 2016-11-10 16:58:18Z

2

you have to add your script in the Bundle config :

 public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",    "~/Views/Home/script.js"));

this worked for me

answered Nov 10, 2016 at 16:58

Maroine Abdellah

6521 gold badge8 silver badges24 bronze badges

Comments

Yusuf GURDAG · Accepted Answer · 2017-01-10 04:25:39Z

1

You should Add rendersection to your Layout Page which your view using.

@RenderSection("scripts", required: false)

answered Jan 10, 2017 at 4:25

Yusuf GURDAG

372 bronze badges

Collectives™ on Stack Overflow

How to include js files in the view. ASP.NET MVC 4

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related