7

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?

Community
  • 1
  • 1
NoWar
  • 36,338
  • 80
  • 323
  • 498
  • 1
    Couldn't u define a head tag and refer JS in pages? – ssilas777 Aug 30 '12 at 13:02
  • @ssilas777 Oh! How I can do it? – NoWar Aug 30 '12 at 13:03
  • 3
    Check this question: http://stackoverflow.com/questions/4311783/asp-net-mvc-3-razor-include-js-file-in-head-tag I think this is what you need. – nemesv Aug 30 '12 at 13:04
  • 4
    As a side note `Scripts.Render` and `Styles.Render` are used in [Bundling and Minification](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification) not to reference individual files. – nemesv Aug 30 '12 at 13:07
  • Great suggestion @nemesv ...@Peretz This is the right solution for u.. – ssilas777 Aug 30 '12 at 13:12
  • 1
    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 http://getcassette.net/ A slight learning curve, but it has quite a few benefits over the built in bundling stuff, IMHO. – Matt Sieker Aug 30 '12 at 13:13
  • @ssilas777 So what is the final code? Could u provide it like an answer pls? – NoWar Aug 30 '12 at 13:17

1 Answers1

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!

ssilas777
  • 9,672
  • 4
  • 45
  • 68
  • Thank you very much!!!! One last question: Have do I keep SECTIONS in some external files? – NoWar Aug 30 '12 at 13:38
  • 2
    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. – ssilas777 Aug 30 '12 at 13:48