Alex Rivera | Logout

Add CSS or JavaScript files to layout head from views or partial views

Asked 2011-02-24T20:27:31.263
188

Layout pages head:

<head>
    <link href="@Url.Content("~/Content/themes/base/Site.css")"
          rel="stylesheet" type="text/css" />
</head>

A View (AnotherView) from the application needs:

<link href="@Url.Content("~/Content/themes/base/AnotherPage.css")"
      rel="stylesheet" type="text/css" />

and AnotherView has a partial view (AnotherPartial) which needs:

<link href="@Url.Content("~/Content/themes/base/AnotherPartial.css")"
      rel="stylesheet" type="text/css" />

Question: How can we add these CSS files links AnotherView and AnotherPartial links to Layout head?

RenderSection is not a good idea because AnotherPage can have more than one Partials. Add all CSS to head is not useful because it will change dynamicaly (it depends on Anotherpages).

asp.net-mvc asp.net-mvc-3 razor
Edit
Report

1 Answer

210

Layout:

<html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
        @if (IsSectionDefined("AddToHead"))
        {
            @RenderSection("AddToHead", required: false)
        }

        @RenderSection("AddToHeadAnotherWay", required: false)
    </head>

View:

@model ProjectsExt.Models.DirectoryObject

@section AddToHead{
    <link href="@Url.Content("~/Content/Upload.css")" rel="stylesheet" type="text/css" />
}
answered 2011-09-09T04:17:38.553

Your Answer