Question

186

How to to include JavaScript into the page header MVC4

rated 0 times [ 193] [ 7] / answers: 1 / hits: 28963 / 12 Years ago, thu, august 30, 2012, 12:00:00

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 [email protected](~/Scripts/farbtastic/farbtastic.js)></script>

<link [email protected](~/Scripts/farbtastic/farbtastic.css) rel=stylesheet type=text/css />

<script type=text/javascript [email protected](~/Scripts/jquery.tinycarousel.min.js)></script>

<script type=text/javascript [email protected](~/Scripts/jquery-ui-1.8.11.min.js)></script>

}

and no success at all.

How I can archive it?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

kourtney questions

1 Problem with typescript while making request to SWR

Sun, Oct 4, 20, 00:00, 4 Years ago

1 JS DateTimePicker onChange event not working

Tue, Oct 29, 19, 00:00, 5 Years ago

1 NodeJS and Sharp, BMP to PNG Error: Input file contains unsupported image format

Fri, May 24, 19, 00:00, 5 Years ago

1 React Slick slider map not showing slides?

Thu, Apr 4, 19, 00:00, 5 Years ago

1 Cypress - Add custom header for all XHR requests

Fri, Mar 1, 19, 00:00, 5 Years ago

View All

answered 12 Years ago caylasarinag · Accepted Answer

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

<head>

<link [email protected](~/Scripts/farbtastic/farbtastic.css) rel=stylesheet type=text/css />

<script type=text/javascript [email protected](~/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 [email protected](~/Scripts/farbtastic/farbtastic.css) rel=stylesheet type=text/css />

<script type=text/javascript [email protected](~/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/[email protected](~/Scripts/farbtastic/farbtastic.js)></script>

   <script type=text/javascript [email protected](~/Scripts/jquery.tinycarousel.min.js)></script>

}



@section CSS

{

  <link [email protected](~/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!