0

I have an ASP.NET MVC 3 project with a _Layout.cshtml and the css style sheet being accessed like this:

link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css"

This is fine for most of the views in my project but there is just one view that I would like to define the style sheet independently and in the view itself. Specifically in the head of the view. This means that the view would have to have it's own head and body tags independently of the _Layout.cshtml file.

Is this possible? If so can someone help me get started with it?

EDIT:

What I'm trying to do is put a style sheet in the head of this one view that would override the CSS from the _Layout.cshtml.

Alexander Manekovskiy
  • 3,185
  • 1
  • 25
  • 34
CloudyKooper
  • 727
  • 3
  • 19
  • 47
  • 1
    Minor note: Use `@Url.Content("~/Content/themes/base/jquery.ui.all.css")` just because it's usually more maintainable to think about "Where is the file as seen from the root" as opposed to "Where is it as opposed to the current view" (especially when including .js and .css files in individual views) – Michael Stum Dec 28 '13 at 21:10
  • You want to use nested layouts possibly with optional section. See this question http://stackoverflow.com/questions/5525602/razor-nested-layouts-with-cascading-sections – Alexander Manekovskiy Dec 28 '13 at 23:27

1 Answers1

1

You could define an optional Razor Section in the head tag of your layout. Place it after your main stylesheet, and then it can be used in any views using the layout to bring in additional stylesheets that contain override rules.

_Layout.cshtml

<head>
    <link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css">
    @RenderSection("CssOverrides", false)
</head>

View.cshtml

@section CssOverrides {
    <link href="../../Content/themes/base/jquery.ui.override.css" rel="Stylesheet" type="text/css">
    <!-- additional stylesheets -->
}
Bryan
  • 2,870
  • 24
  • 39
  • 44