¿Cómo hacer referencia a un archivo .css en una vista de afeitar?

195

Sé cómo configurar archivos .css en el archivo _Layout.cshtml, pero ¿qué pasa con la aplicación de una hoja de estilo por vista?

Creo que aquí, en _Layout.cshtml, tienes <head>etiquetas con las que trabajar, pero no así en una de tus vistas sin diseño. ¿A dónde <link>van las etiquetas?

css asp.net-mvc razor MrBoJangles
fuente

Respuestas:

339

Para CSS que se reutilizan en todo el sitio, los defino en la <head>sección de _Layout:

<head>
    <link href="@Url.Content("~/Styles/main.css")" rel="stylesheet" type="text/css" />
    @RenderSection("Styles", false)
</head>

y si necesito algunos estilos específicos de vista, defino la Stylessección en cada vista:

@section Styles {
    <link href="@Url.Content("~/Styles/view_specific_style.css")" rel="stylesheet" type="text/css" />
}

Editar: es útil saber que el segundo parámetro en @RenderSection, falso, significa que la sección no es necesaria en una vista que usa esta página maestra, y el motor de vista ignorará felizmente el hecho de que no hay una sección "Estilos" definida en tu opinión Si es verdadero, la vista no se procesará y se generará un error a menos que se haya definido la sección "Estilos".

Darin Dimitrov
fuente
44
Sabes, pensándolo bien, eso no es tan malo. Creo que es nuevo y diferente.
MrBoJangles
@section Styles -> dice que no se pueden resolver los estilos de sección, ¿qué significa?
Anterior
2
@Sam, significa que no hay tal sección definida en su diseño.
Darin Dimitrov
@DarinDimitrov ¿Hay alguna forma de renderizar en la posición exacta en lugar de al final del encabezado? Me gustaría mantener un orden específico para las prioridades CSS.
Marc
@Marc Se procesa en un lugar, donde llamas RenderSection(sorprendentemente :), no al final del encabezado.
David Ferenczy Rogožan
22

Intenté agregar un bloque así:

@section styles{
    <link rel="Stylesheet" href="@Href("~/Content/MyStyles.css")" />
}

Y un bloque correspondiente en el archivo _Layout.cshtml:

<head>
<title>@ViewBag.Title</title>
@RenderSection("styles", false);
</head>

Que funciona! Pero no puedo evitar pensar que hay una mejor manera. ACTUALIZACIÓN: Se agregó "falso" en la @RenderSectiondeclaración para que su vista no se expanda cuando descuide agregar una @sectionllamada head.

MrBoJangles
fuente
No hay una mejor manera, aunque nombraría la sección "Head".
SLaks
Tienes toda la razón Llamarlo "pageStyle" sugiere que es solo para ese propósito.
MrBoJangles
1
Si lo hace así, necesitaría agregar "MyStyles" en todas las Vistas, iría con la respuesta de Darins.
Filip Ekberg
Derecha-o. Es por eso que agregué el argumento falso a @RenderSection(). Buena atrapada.
MrBoJangles
12

Utilizando

@Scripts.Render("~/scripts/myScript.js")

o 

@Styles.Render("~/styles/myStylesheet.css")

podría funcionar para ti

https://stackoverflow.com/a/36157950/2924015

Nishanth Shaan
fuente
44
No publique enlaces a respuestas duplicadas . En cambio, considere otras acciones que podrían ayudar a los futuros usuarios a encontrar la respuesta que necesitan, como se describe en la publicación vinculada.
Mogsdad
3

el diseño funciona igual que una página maestra. cualquier referencia CSS que tenga el diseño, cualquier página secundaria tendrá.

Scott Gu tiene una excelente explicación aquí

BentOnCoding
fuente
1
Muy agradecido. Sin embargo, mi pregunta es, ¿cómo configuro una referencia a una vista única, no al "maestro".
MrBoJangles
1

Prefiero usar el razor html helper de Client Dependency dll

Html.RequireCss("yourfile", 9999); // 9999 is loading priority
John Blair
fuente
0

Puede esta estructura en el archivo Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />
mofidul
fuente
1
¿Cómo me permite esto aplicar selectivamente una hoja de estilo por vista?
MrBoJangles
También puede agregar una clase o id a cada sección, y dentro del encabezado puede tener estilos como el mencionado por mofidul. Lo que hago es trabajar con sass, por lo que cada vista tiene un contenedor de clase separado. De esa manera, creé páginas sass para cada sección, que al final es más estructurada y organizada.
Leo
¿Cuál es el significado de rel = "stylesheet"?
Sven Krauter