CSS-ссылка на главную страницу не может быть разрешена

Я работаю над веб-интерфейсом в C# ASP.net. Если это имеет значение, я использую XHTML 1.0 Transitional.

Этот веб-сайт имеет дело с мастер-страницей, и именно здесь возникла проблема. Когда я использовал реальный абсолютный путь для ссылки CSS в заголовке, все было хорошо. Но затем, когда я попытался переключить его на нотацию тильды, все стилирование сломалось.

Вот фрагмент оригинальной главной страницы, которая работала нормально:

<head>
    <title>Account Information</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>

Но затем мы обнаружили, что эта учетная запись будет приложением, которое не находится в корневом каталоге сервера, поэтому нам пришлось внести изменения.

<head>
    <title>Account Information</title>
    <link runat="server" href="~/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>

Теперь те же самые изменения (добавление runat="server" и тильда) работали просто FINE везде на странице, но это не так. Когда я посмотрел на вывод, он не разрешил тильду, поэтому ссылка фактически указывала на "myserver.net/~/css/main.css", что, очевидно, не сработает.

Затем я попытался использовать ResolveURL, вот так:

<link runat="server" href="<% =ResolveURL("~/css/main.css") %>" rel="stylesheet" type="text/css" />

Visual Studio даже не скомпилирует это. Он даже не знал, что имел в виду ResolveURL. (В качестве теста я вставил тот же код в нескольких других местах, включая заголовок страницы прямо рядом с тегом ссылки, и он работал отлично везде!)

В конце концов я заставил его работать, присвоив ссылке идентификатор и установив href в коде:

--Master page--
<link id="StyleLink" runat="server" rel="stylesheet" type="text/css" />

--Masterpage codebehind file--
StyleLink.Attributes.Add("href", ResolveUrl("~/css/main.css"));

Но мне остается удивляться, почему мне пришлось потратить два часа на борьбу с этим. Почему стандартная нотация не сработала? Некоторое время я гуглил, но не нашел ничего особенно актуального; самое близкое, что я мог найти, было обсуждение сбоя нотации, когда оно было на подмастерке.

3 ответа

Это работает на главной странице передо мной прямо сейчас:

<head runat="server">
     <link runat="server" href="~/styles/main.css" rel="stylesheet" type="text/css" />
</head>

Для страницы в корне приложения это переводится в HTML следующим образом:

<link href="styles/main.css" rel="stylesheet" type="text/css" />

Для страницы в папке вне корня, вот как это выглядит:

<link href="../styles/main.css" rel="stylesheet" type="text/css" />

(Очевидно, обе страницы используют этого мастера)


Альтернативный подход

Сохраните путь к файлу CSS в веб-конфигурации и измените его при развертывании.
Вы даже можете использовать преобразования Web Config для автоматического изменения в зависимости от типа сборки.

Я предполагаю, что это может быть проблемой с областью применения. Другими словами, когда вы бежите <link rel='stylesheet' href='~/css/base.css' id='id' runat='server'> приложение может возвращать что-то вроде этого

http://www.mydirectory.com/includes/masterpages/css/base.css

и вы хотите вернуть что-то вроде этого

http://www.mydirectory.com/css/base.css

так как ~ получает корневой каталог приложения и добавляет его, вы можете получить ошибку о том, где находится ваша главная страница, если она не сохранена в корневом каталоге.

Вот ссылка на SO вопрос, на который я ссылался, чтобы объяснить проблему. косая черта (/) против косой черты (~/) в пути к таблице стилей в asp.net

Я понятия не имею, почему он не будет компилироваться, кроме, возможно, незамеченной кавычки в теге ссылки, т.е. <link type='text/css" href="..." runat="server" /> обратите внимание на одинарную кавычку в типе по сравнению с двойной кавычкой. Я делал это время от времени, но я просто догадываюсь здесь. Я проверил это на своем и падение ~ с помощью сервера runat не вызывает ошибку времени компиляции для меня.

У меня были ссылки на CSS-файлы на главной странице, используя следующий синтаксис

 <link  href="~/bm/Styles/Site.css" rel="stylesheet" type="text/css" />

Путь разрешен правильно в Chrome и Firefox, но не в IE9. Следующий синтаксис прекрасно работает во всех трех браузерах. Обратите внимание на записи id и runat.

<link id="siteCss" runat="server"
      href="~/bm/Styles/Site.css" rel="stylesheet" type="text/css" />
Другие вопросы по тегам