Menu
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?
508
The recommended approach is to put in a separate JavaScript file or inside a section defined in Layout page. A section can be added in the MVC Layout page using @RenderSection() directive. For example, we can define a section in Layout page under <head> tag for scripts like below.
Simply open the file in the browser, press "view source" and use the JS path in the URL to see if it opens. Your syntax is (more or less) correct.
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!
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
