web-dev-qa-db-fra.com

CSS n'est pas appliqué après les modifications

J'ai un problème où je ne peux pas appliquer le style en CSS dans mon application ASP.NET MVC. Le problème est qu’il s’applique pour la première fois et que les modifications ultérieures apportées au CSS ne sont pas reflétées dans mon _Layout.cshtml. Je ne suis pas sûr de ce qui me manque ici. 

Fichier CSS

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header,
footer,
nav,
section {
    display: block;
}

/* Styles for basic forms
-----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
}

.editor-label 
{
    margin: 1em 0 0 0;
}

.editor-field 
{
    margin:0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}
#Header
{
    color:white;
    padding:1px;
}
#Content
{
    float:left;
    margin:10px;
}
#SideBar
{
    float :left;
    margin:10px;
    padding :10px;
    border:  dotted 1px  red;
    width:180px;
    font-style:italic;
}
#Footer
{
    text-align:center;
    clear:both;
}

Par exemple, j'ai changé "border" dans #SideBar du rouge au noir. Mais ça reste toujours rouge. Je pourrais faire quelque chose de fondamentalement faux ici.

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
       <!--link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
      <link href="@Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>

<body>
   <div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;"   >

   </div>
   <div id="SideBar">
       @Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
   </div>
   <div id="Content">
        @RenderBody()
   </div>
   <div id="Footer">
        <p>Copyright &copy; XXXXXXX</p>
   </div>
</body>
</html>

Cependant, si vous renommez le fichier physique et changez la référence dans _Layout.cshtml, je pourrais voir les modifications que j'ai apportées. 

S'il vous plaît aider.

Merci

asp.netasp.net-mvcasp.net-mvc-2asp.net-mvc-3
20
Alan B

Appuyez sur Ctrl-F5 pour recharger la page sans utiliser le contenu mis en cache

75
Jahan Zinedine

Le navigateur peut mettre en cache des fichiers statiques tels que des fichiers CSS.

Si vous mettez à jour un fichier CSS et que la modification n'apparaît pas lorsque vous naviguez, essayez d'utiliser CTRL-F5 dans votre navigateur.

10
BonyT

Cela fonctionnera lorsque rien d'autre ne fonctionnera, comme dans mon cas:

Le crédit va à: atticae

Vous pouvez ajouter un paramètre de requête aléatoire à l'URL de la feuille de style (par exemple via JavaScript ou le code côté serveur). Cela ne changera pas le fichier css en cours de chargement, mais cela empêchera la mise en cache, car le navigateur détecte une autre URL et ne chargera pas la feuille de style mise en cache.

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
1
Somebody

Malheureusement, ctrl + f5 ne fonctionne pas pour moi. Je dois accéder à Chrome: F12 -> onglet Réseau -> clic droit dans la zone blanche où se trouvent tous les enregistrements get et post -> Vider le cache du navigateur. Maintenant, si vous appuyez sur ctrl + f5 ou seulement f5, cela devrait fonctionner.

0
macio.Jun

Dans mon cas, le problème était que j'avais un fichier de style de ressources qui faisait référence au code

string location = Page.ClientScript.GetWebResourceUrl(typeof(PageBase), "MyNS.Common.Web.Base.CommonStyle.css");
LiteralControl include = new LiteralControl(string.Format(tempLink, location));

Lorsque je modifiais/ajoutais un style dans le fichier, il ne reflétait pas dans le CommonStyle.css Il ne reflétait pas dans la page Web même après avoir vidé le cache (ctrl + f5, ctrl + shift + f5)?

Sur mon analyse, j'ai trouvé que la raison était - 

arrêtez le débogage, reconstruisez la solution et exécutez-la à nouveau de sorte que tous les styles de ressources Web se chargent une nouvelle fois; effacer simplement le cache comme le fait normalement, toute modification du code HTML ne sera d'aucune aide. Ce changement de style a été reflété dans la page Web et a résolu mon problème.

0
Rinoy Ashokan