Como referenciar um arquivo .css em uma exibição de navalha?

195

Eu sei como definir arquivos .css no arquivo _Layout.cshtml, mas e sobre a aplicação de uma folha de estilo por visualização?

Meu pensamento aqui é que, em _Layout.cshtml, você tem <head>tags para trabalhar, mas não em uma das visualizações que não são de layout. Para onde <link>vão as tags?

css asp.net-mvc razor MrBoJangles
fonte

Respostas:

339

Para CSS reutilizados em todo o site, defino-os na <head>seção do _Layout:

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

e se eu precisar de alguns estilos específicos de vista, defino a Stylesseção em cada vista:

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

Editar: é útil saber que o segundo parâmetro em @RenderSection, false, significa que a seção não é necessária em uma exibição que usa esta página mestra, e o mecanismo de exibição ignorará alegremente o fato de que não há uma seção "Estilos" definida na sua opinião. Se verdadeiro, a exibição não será renderizada e um erro será gerado, a menos que a seção "Estilos" tenha sido definida.

Darin Dimitrov
fonte
4
Você sabe, pensando bem, isso não é tão ruim. Eu acho que é apenas novo e diferente.
MrBoJangles
@section Styles -> diz que não é possível resolver os estilos da seção, o que isso significa?
Revious
2
@ Sam, significa que não existe uma seção definida no seu Layout.
precisa
@DarinDimitrov Existe uma maneira de renderizar na posição exata em vez de no final do cabeçalho. Eu gostaria de manter uma ordem específica para as prioridades da CSS.
Marc
@ Marc É renderizado em um lugar, onde você chama RenderSection(surpreendentemente :), não no final do cabeçalho.
David Ferenczy Rogožan 26/03
22

Tentei adicionar um bloco assim:

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

E um bloco correspondente no arquivo _Layout.cshtml:

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

O que funciona! Mas não posso deixar de pensar que há uma maneira melhor. UPDATE: Adicionado "false" na @RenderSectioninstrução, para que sua visualização não se esbate quando você deixar de adicionar uma @sectionchamada head.

MrBoJangles
fonte
Não existe uma maneira melhor, embora eu nomeie a seção "Head".
SLaks
Você está exatamente certo. O nome "pageStyle" sugere que é apenas para esse fim.
MrBoJangles
1
Se você fizer isso assim, você precisará adicionar "MyStyles" em todas as Views, eu usaria a resposta de Darins.
Filip Ekberg
Certo. Foi por isso que adicionei o argumento falso a @RenderSection(). Boa pegada.
MrBoJangles
12

Usando

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

ou 

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

poderia trabalhar para você.

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

Nishanth Shaan
fonte
4
Por favor, não poste links para respostas duplicadas . Em vez disso, considere outras ações que possam ajudar futuros usuários a encontrar a resposta necessária, conforme descrito na postagem vinculada.
Mogsdad
3

o layout funciona da mesma forma que uma página mestre. qualquer referência css que o layout tenha, qualquer página filha terá.

Scott Gu tem uma excelente explicação aqui

BentOnCoding
fonte
1
Muito grato. No entanto, minha pergunta é: como faço para definir uma referência para uma única exibição, não para o "mestre".
MrBoJangles
1

Prefiro usar o razor html helper da DLL de Dependência de Cliente

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

Você pode essa estrutura no arquivo Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />
mofidul
fonte
1
Como isso me permite aplicar seletivamente uma folha de estilos por visualização?
MrBoJangles 31/03
Você também pode adicionar uma classe ou ID a cada seção e, dentro do cabeçalho, pode ter estilos como o mencionado por mofidul. O que faço é trabalhar com sass, para que cada visualização tenha um contêiner de classe separado. Dessa forma, criei páginas sass para cada seção, que no final é mais estruturada e organizada.
Leo
qual é o significado de rel = "stylesheet"?
Sven Krauter 23/04