Игнорирование Javascript, CSS и маршрутизации файлов изображений в ASP.net

Я крутил Stack Overflow вверх и вниз, но, к сожалению, ни один из ответов мне не помог.

У меня есть веб-приложение, которое отлично работает на моем локальном ПК с использованием IIS, предоставляемого Visual Studio, но когда я развертываю это приложение на сервере, правильно отображается только CSS.

Структура папок для файлов следующая:

  • Root (this folder is named Knowledge Management on the server)
    • CSS
    • JS
    • Медиа
    • Uploads
      • Documents
      • Картинки
      • Пользователи

Мой код, по крайней мере, для заголовка главной страницы выглядит так:

<head runat="server">
    <link href="CSS/Style.css" rel="stylesheet" />
    <script src="/JS/jQuery203Min.js"></script>
    <script src="/JS/jQueryUI1103Min.js"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Однако браузер генерирует его следующим образом:

<head>
    <link href="../../CSS/Style.css" rel="stylesheet" />
    <script src="JS/jQuery203Min.js"></script>
    <script src="JS/jQueryUI1103Min.js"></script>    
    <script src="/JS/HomeArticles.js"></script>
</head> 

Проблема в том, что, кроме CSS, ни один из файлов в папке JS, ни один из файлов в папках и подпапках Media или Uploads не генерируется должным образом.

Дело в том, что если я добавлю «косую черту» перед атрибутом изображения src, изображение получит местоположение http://localhost/Media/Discussion.png, а если я не добавлю «косую черту», ​​то местоположение изображения будет http://localhost/Uploads/Users/HrvojeFadiga.jpg, когда оно должно быть http://localhost/Knowledge%20Management/Uploads/Users/HrvojeFadiga.jpg

Вот пример кода с изображениями:

<div class="profileInfoWrapper">
    <img src="/Uploads/Users/<%=article.User.PhotoLocation %>" />
    <span class="postInfo">
        <img src="/Media/Rating.png" /><%= GetArticleRating(article.idArticle) %>
    </span>
    <span class="postInfo">
        <img src="/Media/Visitors.png" /><%= GetArticleViews(article.idArticle) %>
    </span>
    <span class="postInfo">
        <img src="/Media/Comments.png" /><%= GetArticleComments(article.idArticle) %>
    </span>
</div>

К вашему сведению, Global.asax не содержит никаких правил для игнорирования маршрутов файлов, за исключением файлов .axd, которые добавляются по умолчанию.


person wegelagerer    schedule 22.01.2014    source источник
comment
Дело в том, что если я добавлю косую черту перед атрибутом src изображения, можете ли вы показать код, который включает элемент изображения? Кроме того, если вы удалите / из атрибута src скрипта, эти ссылки все равно не будут работать?   -  person Ben Smith    schedule 27.01.2014
comment
@Fresh Я добавил код с элементом изображения. Удаление слэша не помогает. Я не знаю, есть ли здесь проблема с Windows Server или что, потому что в тестовой среде (локально с IIS Express) все работает нормально.   -  person wegelagerer    schedule 27.01.2014
comment
@Hrvach, где находится ваша главная страница? Внутри какой-то папки?   -  person Afnan Ahmad    schedule 27.01.2014
comment
Основная страница @AfnanAhmad находится в корневой папке.   -  person wegelagerer    schedule 28.01.2014


Ответы (6)


Я смог отсортировать это, добавив атрибут runat=server и используя наклон (~) перед определением источника файла. Например:

<link href="~/CSS/Style.css" rel="stylesheet" runat="server" />

То же самое относится к файлам javascript.

person Morpheus    schedule 24.01.2014
comment
К сожалению, добавление тега runat в файлы javascript вызвало ошибку. - person wegelagerer; 27.01.2014
comment
Вы пробовали <script src="~/JS/jQuery203Min.js" runat="server"/>? Примечание /> и без окончания </script> - person Morpheus; 27.01.2014
comment
Да, у меня - все так же. Я действительно озадачен. Я даже пытался добавить файлы .js в папку CSS, поскольку файлы .css работают так, как должны, но тоже не помогло. - person wegelagerer; 27.01.2014
comment
Действительно странно, это работает нормально для меня. Вместо этого рассмотрите возможность использования пакетов. - person Morpheus; 27.01.2014
comment
Я считаю, что нашел обходной путь (после почти 10 дней настройки, попыток и т. д.)! :) Кажется, что добавление скриптов в ScriptManager сделает свое дело - мне нужно немного его протестировать, но дам вам знать! Спасибо за помощь! - person wegelagerer; 27.01.2014

Для любых URL-адресов для скриптов и стилей вам нужно вызвать ResolveUrl следующим образом:

<link href="<%= ResolveUrl("~/CSS/Style.css") %>" rel="stylesheet" />
person Jay Douglass    schedule 29.01.2014

Попробуй это. без «~» это также может работать, но вы можете добавить его только для ссылки на корневой каталог, который всегда является решением вашего проекта. Таким образом, используя тильду «~», вы можете правильно указать, где находятся ваши файлы css и js.

<link href="~/CSS/styles.css" type="text/css" rel="stylesheet"/>
<script src="~/JS/jScript.js" type="text/javascript"/>

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

<img src="~/Uploads/Images/youImage.gif" />
person Suhaib Janjua    schedule 30.01.2014

Просто попробуйте, как показано ниже, и это сработало для меня...

<script src="JS/jQuery203Min.js" type="text/javascript"></script>
<script src="JS/jQueryUI1103Min.js" type="text/javascript"></script>
<link href="CSS/Style.css" rel="stylesheet" type="text/css"/>
person Biby Augustine    schedule 28.01.2014
comment
Это было первое, что я попробовал. К сожалению, это не помогло. - person wegelagerer; 29.01.2014

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

Проблемы JS

Я решил проблемы с JS, добавив элемент управления ScriptManager на страницу .aspx и добавив туда файлы JS.

<asp:ScriptManager ID="smScripts" runat="server">
     <Scripts>
          <asp:ScriptReference Path="JS/jQuery203Min.js"/>
     </Scripts>
</asp:ScriptManager>

По какой-то причине файлы CSS работали «из коробки», поэтому я оставил их без изменений.

Проблемы с изображением

Мне удалось решить проблемы с изображениями, избегая жестко закодированных ссылок на изображения и добавляя <%: Page.ResolveUrl("~/Media/Image.png") %> к атрибуту src тега <img>. Я думаю, я должен был сделать это для всего, что я не хочу маршрутизировать. Это можно сделать для файлов CSS, файлов JS, всего. Однако (хотя это должно работать идеально) у меня возникли некоторые странные проблемы с файлами JS, и это причина использования ScriptManager.

Проблема со ссылками на страницы

Сначала я не понимал, что ни одна из моих ссылок не работает, поэтому я решил, что проблема была в частично жестко закодированных ссылках, которые по какой-то причине не маршрутизируются должным образом, хотя я жестко запрограммировал маршрут так же, как определено в Файл Global.asax. Я все еще не уверен, почему это не работает.

Решение для этого состоит в том, чтобы генерировать ссылки с помощью <%: Page.GetRouteUrl("RouteName", new { routeParameter1 = routeParameter1Value, routeParameter2 = routeParameter2Value}) %>, и все будет работать нормально.

person wegelagerer    schedule 30.01.2014

Вероятным виновником является установка каталогов/виртуальных каталогов.

Просмотрите свою страницу в Google Chrome, затем «Проверить элемент». Прокрутите вверх, и вы включите свои файлы .JS. Вы можете щелкнуть по ним, чтобы увидеть, на какой URL они пытаются ссылаться. Скорее всего, путь на сервере немного отличается от пути вашей локальной копии.

person Jason Geiger    schedule 30.01.2014