web-dev-qa-db-ja.com

ASP.NETページはCSSスタイルをロードしていません

これは、VS 2010を使用したC＃を使用したASP.NETのシンプルなWebサイトです。このプロジェクトのディレクトリ構造は次のとおりです。

enter image description here

開始ページはDefault.aspxそしてそれは完全にロードされます。しかし、ページを開くと_Interface/SystemAdminLogin.aspxデフォルトページから、CSSスタイルなしでロードします。マスターページにCSSスタイルシートをインポートしました。両方の.aspxファイルでMasterPageファイルを参照する方法を次に示します。

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" %>

コードに誤りはありませんが、InterfaceフォルダーのページにCSSスタイルが読み込まれないのはなぜですか？助けてください。

これは私が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>

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

マスターページに含まれるスタイルシートは、相対パスを使用しています。

スタイルシートリンクをrunat=serverで指定し、仮想Webルートパス（~）をプレフィックスとして付けます。

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

または：

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

ただし、最初のオプションが推奨されることに注意してください。 仮想ディレクトリでサイトを公開する場合、2番目は機能しません。

最後のコメントの後...

相対パスを使用したり、パストラバーサル（../）を使用したりしないために、CSSの画像URLも更新する必要があります。

背景：#fff url（images/img01.jpg）repeat-x左上;

このオプションでは、Stylesフォルダー内のimagesフォルダーを移動する必要があります（移動することをお勧めします）。

最終更新：

ASP.NET相対パス（〜）がrunat=serverでhead要素内で機能するには、link要素もrunat=serverである必要があるように見えます。

24
Marcel N.

これは私のマスターページで機能します。

<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

ASPNETCORE_ENVIRONMENTがデバッグ用に開発に設定されていることがわかりました。 _Layout.cshtmlには、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>

私はそれを修正し、それは再び良かったです：

<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

これは私のマスターページで機能します。

<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

試してみてください（パスに〜）：

<%@ 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

Runat = "server"をhead属性に追加し、リンクが（ "〜/ 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