How to add link to JavaScript file into the header of the certain ASP .NET MVC page

Question

How to add link to JavaScript file into the header of the certain ASP .NET MVC page?

Lets say there are _Layout.cshtml and About.cshtml and I need to put some javascript file to the header of the About.cshtml. I mean to that page only.

http://www.dotnetcurry.com/ShowArticle.aspx?ID=636

How it can be done?

check this out: http://stackoverflow.com/questions/5110028/add-css-or-js-files-to-layout-head-from-views-or-partial-views — bygrace, Nov 09 '12 at 23:44
I personally think that the second answer on that link is better than the accepted one. — bygrace, Nov 09 '12 at 23:45

score 4 · Answer 1 · answered Nov 09 '12 at 23:42

4

Why must it be in the header? You can include any script you need inline:

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

answered Nov 09 '12 at 23:42

Travis J

81,153
41
202
273

Sometimes it doesn't work if the script is not in the header... Some of JQuery plugins are not working I mean. – NoWar Nov 09 '12 at 23:43
@Peretz - Never that I have come across, can you provide a working example of that happening? – Travis J Nov 09 '12 at 23:44
@TravisJ Situation I just came across at work. cshtml files were including js files. When the section was reloaded via json, there was a bunch of global variables (working on getting rid of those) that were getting mauled because of the reload. So there's one example. – teynon Aug 04 '14 at 18:23
@Tom - Usually people prevent that by checking for existence before initialization. For example `var myInitializer = myInitializer || init();`. I think my previous comment was probably poorly worded, in that order can definitely affect the script, however it will still *load*. – Travis J Aug 04 '14 at 18:28
Which is what I did to fix our issue (added the OR), but it's still a case where this applies. Working on an application with a lot of those types of variables. Having said that, I now realize that this post is 2 years old. ;) – teynon Aug 04 '14 at 21:53

score 4 · Accepted Answer · edited Nov 10 '12 at 00:02

4

My solution:

_Layout.cshtml

!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>


    @if (IsSectionDefined("AddToHead"))
    {
         @RenderSection("AddToHead", required: false)
    }    
</head>

About.cshtml

@{
    ViewBag.Title = "Index";     
}

<h2>Index</h2>

@section footer {
     <b>Footer Here</b>
}

@section AddToHead {
    <script src="@Url.Content("~/Scripts/test.js")" type="text/javascript">
    </script>
}

edited Nov 10 '12 at 00:02

Sergey Berezovskiy

232,247
41
429
459

answered Nov 09 '12 at 23:59

NoWar

36,338
80
323
498

I think you don't need to verify if section defined when you don't have `else` part (default content) – Sergey Berezovskiy Nov 10 '12 at 00:06
3

You should at least give credit to the author of this approach that you adapted: http://stackoverflow.com/a/7357102/1026459 – Travis J Nov 10 '12 at 00:14
@user636525 I am sure It will. – NoWar Dec 18 '12 at 09:54

score 1 · Answer 3 · answered Oct 09 '13 at 08:27

Try below code

HtmlGenericControl my_js = new HtmlGenericControl("script");
            my_js.Attributes["async"] = "async";
            my_js.Attributes["type"] = "text/javascript";
            my_js.Attributes["src"] = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
            Page.Header.Controls.Add(my_js);

You need to use namespace : "using System.Web.UI.HtmlControls" to use HtmlGenericControl.

How to add link to JavaScript file into the header of the certain ASP .NET MVC page

3 Answers3

Linked