Come fare riferimento a un file .css su una vista rasoio?

196

So come impostare i file .css sul file _Layout.cshtml, ma per quanto riguarda l'applicazione di un foglio di stile in base alla visualizzazione?

Il mio pensiero qui è che, in _Layout.cshtml, hai <head>tag con cui lavorare, ma non così in una delle tue visualizzazioni non di layout. Dove vanno i <link>tag?

css asp.net-mvc razor

— MrBoJangles
fonte

340

Per i CSS che vengono riutilizzati nell'intero sito, li definisco nella <head>sezione di _Layout:

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

e se ho bisogno di alcuni stili specifici della vista, definisco la Stylessezione in ciascuna vista:

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

Modifica: è utile sapere che il secondo parametro in @RenderSection, false, significa che la sezione non è richiesta in una vista che utilizza questa pagina principale e il motore di visualizzazione ignorerà beato il fatto che non è stata definita la sezione "Stili" a tuo avviso. Se vero, la vista non verrà visualizzata e verrà generato un errore a meno che non sia stata definita la sezione "Stili".

— Darin Dimitrov
fonte

4

Sai, ripensandoci, non è poi così male. Penso che sia solo nuovo e diverso.

— MrBoJangles,

Stili @section -> dice che non è possibile risolvere gli stili di sezione, cosa significa?

— Revious

2

@Sam, significa che non esiste una sezione simile definita nel layout.

— Darin Dimitrov,

@DarinDimitrov Esiste un modo per eseguire il rendering nella posizione esatta anziché alla fine dell'intestazione. Vorrei mantenere un ordine specifico per le priorità dei CSS.

— Marc,

@Marc Viene visualizzato in un punto in cui chiami RenderSection(sorprendentemente :), non alla fine dell'intestazione.

— David Ferenczy Rogožan,

22

Ho provato ad aggiungere un blocco in questo modo:

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

E un blocco corrispondente nel file _Layout.cshtml:

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

Che funziona! Ma non posso fare a meno di pensare che esiste un modo migliore. AGGIORNAMENTO: Aggiunto "false" @RenderSectionnell'istruzione in modo che la tua vista non si sparga quando trascuri di aggiungere un @sectionchiamato head.

— MrBoJangles
fonte

Non esiste un modo migliore, anche se vorrei nominare la sezione "Head".

— SLaks,

Hai esattamente ragione. Chiamandolo "pageStyle" suggerisce che è solo per quello scopo.

— MrBoJangles,

1

Se lo fai in questo modo, dovresti aggiungere "MyStyles" in tutte le viste, andrei con la risposta di Darins.

— Filip Ekberg,

A destra-o. Ecco perché ho aggiunto il falso argomento a @RenderSection(). Buona pesca.

— MrBoJangles,

12

utilizzando

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

o

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

potrebbe funzionare per te.

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

— Nishanth Shaan
fonte

4

Si prega di non pubblicare collegamenti a risposte duplicate . Invece, considera altre azioni che potrebbero aiutare i futuri utenti a trovare la risposta di cui hanno bisogno, come descritto nel post collegato.

— Mogsdad,

3

il layout funziona come una pagina master. qualsiasi riferimento CSS che il layout ha, qualsiasi pagina figlio avrà.

Scott Gu ha un'ottima spiegazione qui

— BentOnCoding
fonte

1

Molto obbligato. Tuttavia, la mia domanda è: come posso impostare un riferimento a una singola vista, non al "master".

— MrBoJangles,

1

Preferisco usare l'helper HTML razor da Client Dependency dll

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

— John Blair
fonte

0

È possibile questa struttura nel file Layout.cshtml

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

— mofidul
fonte

1

In che modo ciò mi consente di applicare selettivamente un foglio di stile per vista?

— MrBoJangles,

Puoi anche aggiungere una classe o un ID a ciascuna sezione e all'interno dell'intestazione potresti avere uno stile come quello menzionato da mofidul. Quello che faccio è lavorare con sass, quindi ogni vista ha un contenitore di classe separato. In questo modo ho creato pagine sass per ogni sezione, che alla fine è più strutturata e organizzata.

— Leo,

qual è il significato di rel = "foglio di stile"?

— Sven Krauter,