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

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