2011-10-18 8 views
11

Ecco il codice ho attualmente:Razor Engine - Come posso rendere diversi tag body in base a condizioni diverse?

@{ 
    if (Request.Browser.Browser == "IE") { 
     if (Request.Browser.MajorVersion == 7) { <body class="ie7"> } 
     if (Request.Browser.MajorVersion == 8) { <body class="ie8"> } 
     if (Request.Browser.MajorVersion == 9) { <body class="ie9"> } 
     if (Request.Browser.MajorVersion > 9) { <body> } 
    } else { 
     <body> 
    } 
} 

Ecco l'errore che restituisce quando il browser tenta di renderla:

parser messaggio di errore: Il blocco di codice manca una chiusura " } " carattere. Assicurati di avere un carattere "}" corrispondente per tutti i caratteri "{" di all'interno di questo blocco e che nessuno dei caratteri "}" viene interpretato come markup.

Che diamine? Sono stato in grado di farlo nella sintassi del template standard ASP.NET! Ecco cosa che sembrava:

<% // Adaptation of paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ 
    if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 7)) { %><body class="ie7"><% } %> 
<% if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 8)) { %><body class="ie8"><% } %> 
<% if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 9)) { %><body class="ie9"><% } %> 
<% if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion > 9)) { %><body><% } %> 
<% if (Request.Browser.Browser != "IE") { %><body><% } %> 
+0

Si fa anche questo [schifezza convalida HTML] (http://joshuahayworth.com/wp-content/uploads/2011/10/razorEngineStackOverflowQuestion01.png) nell'IDE, che è fastidioso. –

+1

Perché non usi CSS include? http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/. Basta definire uno stile per "corpo" in ciascuno di questi script. – jgauffin

+0

Controllando ora! Grazie per il link. –

risposta

24

Un'opzione migliore potrebbe essere dichiarare una variabile ieClass nella parte superiore della vista e quindi fare riferimento al tag del corpo.

@{ 
    string ieClass = ""; 
    if (Request.Browser.Browser == "IE") { 
     if (Request.Browser.MajorVersion == 7) { ieClass="ie7"; } 
     else if (Request.Browser.MajorVersion == 8) { ieClass="ie8"; } 
     else if (Request.Browser.MajorVersion == 9) { ieClass="ie9"; } 
    } 
} 

...

<body class="@ieClass"> 
+0

Questo funziona! Tuttavia, in Firefox, ora ho un seduto lì. Non sono sicuro di quanto sia entusiasta di ciò. –

+0

Inizia con ieClass come "", quindi sulla prima corrispondenza inizia con "class =" + "ie7" per esempio tale che if ieClass == "" then ieClass = "class =" quindi fai funzionare la tua magia da lì. Ma avere "class =" "" è ok e i browser non dovrebbero avere problemi. –

0

Si apre un sacco di <body> tag, ma non li chiude. Il rasoio è "intelligente", quindi ricorda i tag aperti e chiusi durante l'analisi.

Si può dire di rasoio per ignorare i tag utilizzando

@:<body class="ieX"> 

se si sfuggire l'ultimo <body> si dovrebbe anche sfuggire alla tag </body> come @:</body>. Il mio consiglio è di lasciare un tag <body> così com'è.

Ma c'è di più.

La formattazione di tutto su una riga probabilmente confonde anche il rasoio. Così (non testato) avete bisogno di qualcosa di simile:

if (Request.Browser.MajorVersion == 7) { <text>@:<body class="ie7"></text> } 

Se questo non funziona, formattarlo come:

if (Request.Browser.MajorVersion == 7) { 
    @:<body class="ie7"> 
} 

(vedi risposta del JRummel) E probabilmente la soluzione più semplice è:

 @{ 
     var bodyClass = string.Empty; 

     if (Request.Browser.MajorVersion == 7) { bodyClass = "ie7"; } 
     if (Request.Browser.MajorVersion == 8) { bodyClass = "ie8"; } 
     // etc 
    } 
    <body class="@bodyClass"> 
    </body> 

2

consiglierei anche l'approccio un po 'più pulita, ponendo rasoio/codice C# nella parte superiore della pagina e utilizzando le variabili per assegnare logicamente i valori per l'utilizzo all'interno della vostra pagina. In primo luogo, risolve il problema dei tag, ma aiuta anche nella manutenzione del codice.

@{ 
    string bodyCssClass = string.Empty; 
    switch(Request.Browser.Browser) 
    { 
     case "IE": 
      switch(Request.Browser.MajorVersion) 
      { 
       case 7: 
        bodyCssClass = "browser-ie7"; 
        break; 
       case 8: 
        bodyCssClass = "browser-ie8"; 
        break; 
       case 9: 
        bodyCssClass = "browser-ie9"; 
        break; 
       default: 
        bodyCssClass = "browser-ie6"; 
      } 
      break; 
    } 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <title>@Page.Title</title> 
</head> 
<body class="@bodyCssClass"> 
    <div>@RenderBody()</div> 
</body> 
</html> 

Con tutto ciò detto; a meno che non sia disponibile per questa pagina, il lavoro eseguito non dovrebbe essere sull'elemento di presentazione (file cshtml) ma piuttosto su ViewBag (ad esempio ViewBag.BodyCssClass).

[Modifica] Ho dimenticato la pausa per l'istruzione switch esterno per il caso "IE". :)

+0

Anche questo funziona! Ho finito per usare una combinazione del tuo e del codice di jrummell per risolvere il mio problema. –

0

La risposta di JRummel è corretta. Per ampliarlo ho modificato il suo script per permettermi di supportare versioni precedenti di IE e rimanere compatibile con le versioni precedenti.

@{ 
Layout = null; 

string ieClass = ""; 
if (Request.Browser.Browser == "IE") 
{ 
    ieClass += " ie"; 
    if (Request.Browser.MajorVersion == 9) { ieClass += " lt-ie10"; } 
    if (Request.Browser.MajorVersion == 8) { ieClass += " lt-ie9"; } 
    if (Request.Browser.MajorVersion == 7) { ieClass = " lt-ie8"; } 
} 
} 
<!doctype html> 
<html lang="en-us" dir="ltr" class="no-js @ieClass.Trim()"> 
7
@if (Request.Browser.Browser == "IE" || Request.Browser.Browser == "InternetExplorer") 
{ 

} 
+0

Stavo per aggiungere questa risposta e ho visto la tua. Microsoft deve aver cambiato ciò che restituisce il browser delle richieste. –

Problemi correlati