2011-01-19 34 views
7

Eventuali duplicati:
CSS in App_Theme folder gets Cached in BrowserCome posso forzare i browser a ricaricare i file CSS memorizzati nella cache quando si utilizzano Asp.Net Themes?

ho visto "What is an elegant way to force browsers to reload cached CSS/JS files?", ma la risposta non utilizza PHP e non affronta il fatto che il CSS viene iniettato in modo dinamico da un ASP Tema .Net.

+0

Ciao Omero, non so se questo funzionerà o meno come il suo solo una teoria. I browser indovinare nascondono il file css e ottengono una nuova versione se possono vederlo modificato. La mia idea sarebbe di avere una classe nel file css che non è usato e diverso per ogni tema. Se questa classe si trova all'inizio di ogni file css, il browser la leggerà, vedrà il nome della classe diversa e scaricherà nuovamente il file css. Questo è, naturalmente, tutti basati su ipotesi e nessuna conoscenza su come internet explorer cache CSS. Sarei interessato anche se qualcun altro può parlare con autorità su questo! – WraithNath

+0

Sono un po 'confused- Quando si utilizza un tema diverso il foglio di stile si trova in un'altra cartella cioè /App_Themes/blue/stylesheet.css vs /App_Themes/red/stylesheet.css. Quel cambiamento di directory è sufficiente a far sì che non venga memorizzato nella cache. Ora, ovviamente rosso/foglio di stile.css sarà ancora memorizzato nella cache, ma se cambi temi in blu, questo caricherà quello blu (che potrebbe essere memorizzato nella cache). – Prescott

+0

Non sto scambiando temi, semplicemente modificando il file css. – Homer

risposta

13

Penso di avere una soluzione rapida e sporca. Il trucco è quello di esaminare i controlli all'interno della pagina (ad esempio nella fase di PreRender), trovare i link che puntano al CSS-files nella cartella App_Themes e renderli dinamici (con l'aggiunta di alcune informazioni casuali alla query-string). Molto probabilmente dirà al browser di invalidare la versione cache del file.

Il codice:

protected void Page_PreRender(object sender, EventArgs e) 
{ 
    HtmlLink link = null; 

    foreach (Control c in Header.Controls) 
    { 
     if (c is HtmlLink) 
     { 
      link = c as HtmlLink; 

      if (link.Href.IndexOf("App_Themes/", StringComparison.InvariantCultureIgnoreCase) >= 0 && 
       link.Href.EndsWith(".css", StringComparison.InvariantCultureIgnoreCase)) 
      { 
       link.Href += string.Format("?t={0}", DateTime.Now.Ticks.ToString()); 
      } 
     } 
    } 
} 

L'output:

<link href="App_Themes/MyTheme/MyTheme.css?t=634310637798128189" 
     type="text/css" rel="stylesheet" /> 

Si noti che è necessario disporre di un <head runat="server"> dichiarato nel markup della tua pagina in modo da essere in grado di accedere alla proprietà Header (altrimenti sarà null).

+0

Questo metodo eliminerebbe sicuramente il caching del browser css poiché il nome del file sarebbe diverso ogni volta che un utente visualizzava la pagina. Ad ogni modo, ho letto che i browser non memorizzano nella cache i file con un parametro querystring. – Homer

+0

@Homer: potrebbero memorizzare nella cache tali file, dipende dall'implementazione. Perché non memorizzare nella cache il file se il suo URI (non l'URL) non cambia mai? – volpav

+0

@Homer, questa idea di base ha funzionato per me, ho dovuto cambiare un po 'comunque. Ecco la mia modifica: protetto override void OnPreRender (oggetto mittente, EventArgs e) Inoltre, è necessario assicurarsi di chiamare il metodo base prima che il metodo sia terminato. –

1

Se ti stai chiedendo come il lato server può forzare il ricaricamento ... Un modo è quello di cambiare dinamicamente il nome del file CSS/JS in modo che le chiamate successive alla pagina richiedono un file diverso.

<sarcasm> L'altro è quello di dire semplicemente all'utente di premere CTRL-F5 :) </sarcasm>

+0

Qualche idea su come farlo in ASP.Net (cambiare dinamicamente il nome del file, non CTRL-F5)? – Homer

+2

Un metodo che ho usato è quello di avere regole di riscrittura sul server, reindirizzando qualsiasi richiesta per un file di un particolare pattern (/css/mycssfile.201104056554433.css) al file reale che non ha un timestamp. In questo modo il browser tratta ogni richiesta come una richiesta per un file univoco e il server può solo restituire ciecamente una richiesta per il file, indipendentemente dal timestamp effettivo. Devi solo ricordare nella pagina asp di cambiare dinamicamente il nome file css richiesto per ogni richiesta (facile, basta inserire il timestamp corrente su ogni richiesta). – Dekker500

1

Quando finito di fare modifiche al sito cambiare il nome del css manualmente.

1

Non ho trovato un modo per la versione dei file App_Themes (ancora), ma è possibile impostarli a scadere in un periodo di tempo relativamente breve (ad esempio, 10 secondi), che ridurrà al minimo il problema della cache mentre ne diamo alcuni vantaggio prestazionale della memorizzazione nella cache. Ricorda, se il file non è stato modificato, il server risponderà con 304-Non modificato, quindi il traffico si riduce anche se il browser richiede il file.

Aggiungere questo alla sezione <configuration> del Web.Config

<location path="App_Themes"> 
    <system.webServer> 
     <staticContent> 
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00:00:10" /> 
     </staticContent> 
    </system.webServer> 
</location> 
Problemi correlati