ASP.NET - путь к использованию для ссылки .CSS и .JS

У меня есть главная страница в корне моего проекта. У меня есть страницы контента во всем моем проекте и в подпапках, ссылающихся на эту главную страницу. Каков правильный способ ссылки на мои .CSS и .JS файлы, если я всегда хочу, чтобы они были относительно корня?

Вот как я это делаю сейчас:

link href="/common/css/global.css"
script src="/common/javascript/global.js"

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

Ответ 1

Я бы использовал что-то вроде

Server.ResolveClientUrl("~/common/css/global.css")

Это позволит получить правильный URL-адрес для вас в любое время.

Пример:

В комментарии это будет полным использованием.

<link type="text/css" rel="stylesheet" 
    href='<%= Server.ResolveClientUrl("~/common/css/global.css") %>' />

В соответствии с комментариями другое одобренное использование, "ошибка CS1061:" System.Web.HttpServerUtility "не содержит определения" error:

    <script type="text/javascript" 
src="<%= Page.ResolveUrl("~/Scripts/YourScript.js") %>" ></script>

Также важно всегда помещать закрывающий тег.

Ответ 2

Вы можете сделать тег <link> для запуска на сервере, чтобы Asp.Net разрешил URL-адрес для вас следующим образом:

<link href="~/common/css/global.css" runat="server" />

(Обратите внимание на "~" )
Я не знаю, может ли он применяться к тегу <script>, но вы должны попробовать...

EDIT: Недавно я обнаружил в проекте, что вы можете (и должны) использовать ScriptManager для хранения ваших скриптов (у вас может быть только 1 на страницу). Вы можете поместить его в свой MasterPage и ссылаться на все ваши скрипты. Внутри страницы вашего контента затем добавьте ScriptManagerProxy, который будет ссылаться на сценарии на главной странице, и вы даже можете добавить другие сценарии только для этой страницы контента.

Ответ 3

Я делаю это так просто: link href="<%=ResolveUrl("~/common/css/global.css")%>"

Ответ 4

Решения, которые я видел до сих пор, не работали в моем проекте (особенно не для ссылок .css). Были следующие вопросы:

внутри <link> он не разрешил выражение <%=...%>
он не обнаружил Page.ResolveURL во всех случаях
возникла проблема с кавычками "и", если вы вложили <%=...%>

Итак, я хотел бы предложить это решение: в коде позади (ваша основная страница класса С#) добавьте следующие 3 метода:

public partial class SiteBasic : System.Web.UI.MasterPage
{
    public string ResolveURL(string url)
    { 
        var resolvedURL=this.Page.ResolveClientUrl(url);
        return resolvedURL;
    }

    public string cssLink(string cssURL)
    {
        return string.Format("<link href='{0}' rel='stylesheet' type='text/css'/>", 
                    ResolveURL(cssURL));
    }

    public string jsLink(string jsURL)
    {
        return string.Format("<script src='{0}' type='text/javascript'></script>", 
                    ResolveURL(jsURL));
    }
}

Для ссылок stylsheet вы можете сказать:

<%=cssLink("~/css/custom-theme/jquery-ui-1.8.20.custom.css")%>

Для ссылок JavaScript это выглядит так:

<%=jsLink("~/Scripts/jquery-1.7.2.js")%>

И для других ссылок вы можете использовать:

<a href='<%=ResolveURL("~/Default.htm")%>'>link</a>
<img title='image' src='<%=ResolveURL("~/Images/logo.png")%>'/>

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

Это решение прост и хорошо работает в моем случае, даже если страницы, ссылающиеся на главную страницу, находятся в разных подкаталогах. В основном это означает перевод пути ~ (который должен быть абсолютным из корня вашего веб-сайта) в относительный путь (с использованием как можно большего количества ../ в пути) на основе текущей страницы отображение.

Расширенный совет:

Если вы используете вызовы AJAX для вызова методов веб-сервисов, тогда у вас будет такая же проблема, если обратиться к ним, если у вас есть страницы ASPX на разных уровнях каталогов. Я рекомендую вам определить что-то вроде (предполагая, что ваши веб-службы находятся в каталоге ~/AJAX):

<script type="text/javascript">
    function getWebServicePath() { return '<%=ResolveURL("~/AJAX/")%>'; } 
</script>

внутри раздела <head> ... </head> главной страницы . Это сделает входной путь веб-службы доступным в вашем JavaScript. Вы можете использовать его как

$.ajax({
    type: "POST",
    url: getWebServicePath()+"myWebService.asmx/myMethod",
    data: $.toJSON({ param: "" }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
            // ... code on success ...
    },
    error: function (ex) {
            // ... code on error ...
    }
});