How to to include JavaScript into the page header MVC4 [duplicate]

Question

Possible Duplicate:
ASP.Net MVC 3 Razor: Include js file in Head tag

I don't want to put a lots of JS into some layout and I need to do it for some specific pages I mean to include some of the JS into their header.

I've tried like that but it doesn't work as it should be.

@{
    Layout = "~/Views/Shared/_LayoutInner.cshtml";
    @Scripts.Render("~/Scripts/farbtastic/farbtastic.js")
    @Styles.Render("~/Scripts/farbtastic/farbtastic.css")
    @Scripts.Render("~/Scripts/jquery.tinycarousel.min.js")
    @Scripts.Render("~/Scripts/jquery-ui-1.8.11.min.js")
}
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#slider1').tinycarousel();
        $("#accordion").accordion();
        $('#picker').farbtastic('#color');
    });
</script>

I have tried like that

@{
    Layout = "~/Views/Shared/_LayoutInner.cshtml";
  <script type="text/javascript" src="@Url.Content("~/Scripts/farbtastic/farbtastic.js")"></script>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tinycarousel.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
}

and no success at all.

How I can archive it?

Check this question: stackoverflow.com/questions/4311783/… I think this is what you need. — nemesv
– nemesv, Commented Aug 30, 2012 at 13:04
As a side note Scripts.Render and Styles.Render are used in Bundling and Minification not to reference individual files. — nemesv
– nemesv, Commented Aug 30, 2012 at 13:07
Not really an answer, I got fed up with the System.Web.Optimization stuff between trying to put Modernizr in the header, and it sometimes not including new Javascript files, and switched to getcassette.net A slight learning curve, but it has quite a few benefits over the built in bundling stuff, IMHO. — Matt Sieker
– Matt Sieker, Commented Aug 30, 2012 at 13:13

ssilas777 · Accepted Answer · 2012-08-30 13:33:40Z

13

I'm sure in your _LayoutInner.cshtml you should have refered JS files similarly like this

<head>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
</head>

To achieve your target you have to add two named sections into your _LayoutInner.cshtml pages head section like this-

<head>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
 @RenderSection("JavaScript", required: false)
 @RenderSection("CSS", required: false)
</head>

Now in your other pages to include extra javascript or css pages use these named sections

@section JavaScript
{
   <script type="text/javascript"src="@Url.Content("~/Scripts/farbtastic/farbtastic.js")"></script>
   <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tinycarousel.min.js")"></script>
}

@section CSS
{
  <link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
}

It is upto you whether to include different named sections for javascript and css.

Hope it helps!

answered Aug 30, 2012 at 13:33

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

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

2 Comments

NoWar Over a year ago

Thank you very much!!!! One last question: Have do I keep SECTIONS in some external files?

ssilas777 Over a year ago

Nope you have to use sections in pages you want to include these JS files..In general the sections are not used only for including external files, it is meant to output dynamic content in these sections in the final response.In this case you can see javascript files and css files exactly in ur final response in the head section.

Collectives™ on Stack Overflow

How to to include JavaScript into the page header MVC4 [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related