web-dev-qa-db-fra.com

La page ASP.NET ne charge pas les styles CSS

C’est un site Web simple en ASP.NET avec C # qui utilise VS 2010. J’ai la structure de répertoires suivante pour ce projet:

enter image description here

La page de départ est Default.aspx et il se charge parfaitement. Mais lorsque j'ouvre la page Interface/SystemAdminLogin.aspx depuis la page par défaut, elle se charge sans styles CSS. J'ai importé une feuille de style CSS dans Master Page. Voici comment je fais référence au fichier MasterPage dans les deux fichiers .aspx:

Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

SystemAdminLogin.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SystemAdminLogin.aspx.cs" Inherits="_Default" %>

Je ne vois aucune erreur avec mon code mais pourquoi Page dans le dossier Interface ne charge pas les styles CSS ?? S'il vous plaît, aidez-nous.

Voici le code de la page principale où j'importe un fichier css:

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>

Et voici la partie du code de fichier CSS:

body {
margin: 0;
padding: 0;
background: #fff url(../images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
c#asp.netcssvisual-studio-2010
13
Azeem

Les feuilles de style incluses dans votre page maître utilisent des chemins relatifs. 

Spécifiez vos liens de feuille de style avec runat=server et préfixez-les avec le chemin d'accès racine Web virtuel (~):

<link href="~/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

OU:

<link href="/Styles/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

Mais gardez à l'esprit que la première option est recommandée. La seconde ne fonctionnera pas lorsque vous publiez votre site dans un répertoire virtuel.

Après le dernier commentaire ...

Les URL de l'image dans les CSS doivent également être mises à jour afin de ne pas utiliser de chemins relatifs ni de traverser chemin (../).

arrière-plan: url #fff (images/img01.jpg) répéter-x à gauche en haut;

Pour cette option, vous devrez déplacer le dossier images à l'intérieur du dossier Styles (c'est une bonne pratique).

Dernière mise à jour:

Il semble que l'élément head doit également être runat=server pour que les chemins relatifs ASP.NET (~) fonctionnent dans les éléments link avec runat=server.

23
Marcel N.

Cela fonctionne pour moi dans mes pages maîtres:

<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>'
1
user3123048

J'ai trouvé qu'il était ASPNETCORE_ENVIRONMENT défini sur Développement pour le débogage. Et dans le _Layout.cshtml, il manquait la version asp-append-version.

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

J'ai corrigé ça et c'était encore bon:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

0
Johan Grobler

Cela fonctionne pour moi dans mes pages maîtres:

<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server">
<link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" />
</asp:Content>
0
user3123048

Essayez avec (~ sur votre chemin):

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Facial Recognition Bank System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="~/Styles/style.css" runat="server" rel="stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
0
Aghilas Yakoub

Ajoutez runat = "serveur" à l'attribut head et assurez-vous également que le lien cible la racine, comme dans ("~/path to css")

<head runat="server">
  <title>Page Title Here</title>
  <link href="~/css/main.css" rel="stylesheet" type="text/css" />
 <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>

0
Godwin Awojobi