¿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?

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".


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.


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



1

Prefiero usar el razor html helper de Client Dependency dll

Html.RequireCss("yourfile", 9999); // 9999 is loading priority 

0

Puede esta estructura en el archivo Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.