URL помощник в JavaScript

Question

Я использую jQuery Lightbox для своей галереи изображений.
URL для изображения кнопки: '../../Content/Lightbox/lightbox-btn-next.gif'
Это хорошо работает, если мой URL-адрес 'localhost/Something1/Somtehing2'
Если я использую другой маршрут, например «localhost/Something1/Something2/Something3», то URL для изображений кнопок будет неправильным.
Могу ли я использовать Url.Action() внутри файлов .js?
Вот как я называю файлы .js:

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.lightbox-0.5.js") %>"></script>

Answer 1

Я помещаю следующее в мою главную страницу, которая выполняет почти то же самое, что и @ Url.Content ('~ / path'):

<script type="text/javascript" charset="utf-8">
    function UrlContent(path) {
        return '@Url.Content("~/")' + path.replace(/^\//, ''); 
    }
</script>

Когда моя главная страница компилируется и обрабатывается, это переводится в функцию javascript, которая применяет корень моего сайта к пути. Работает отлично. Регулярное выражение path.replace просто удаляет косую черту, если она есть, поскольку @ Url.Content ("~ /") имеет косую черту.

Answer 2

Вы не можете использовать Url.Action () внутри файлов .js. Но вы можете определить глобальную переменную и использовать ее в своем файле js.

<script type="text/javascript">

    var imageUrl = "<%= ... %>";

</script>

Answer 3

Просто поместите @Url.Content(@"~/some paths") в одинарные кавычки, например:

'@Url.Content(@"~/some paths")'

Answer 4

Я предпочитаю извлекать URL-адреса из действия тегов 'href's or form' - или другого элемента, который имеет смысл.

<img class="_click" src="<%= Url.Content("~/my/image.png") %>" alt="Click" />

И в моем javascript (дважды проверьте это на jQuery, я не уверен, что это точный синтаксис.):

var url = $('._click').attr('href');
// To pass these to your plugin as options
// see lightbox source for a full list
$('a').lightBox({ imageLoading : url })

Еще один менее предпочтительный вариант - добавить настройки поверх файла:

<script type="text/javascript"><![CDATA[
    $('a').lightBox({ imageLoading : <%= Url.Content("~/my/image.png") %> })
//]]></script>

Я сказал «менее предпочтительный», потому что этот подход смешивает разметку и код.

Еще один подход (который требует много усилий) состоит в том, чтобы предоставить вам файл js из контроллера:

public ActionResult GetFileContent(string filename)
{
    // important: make sure to control the path for security
    var path = Server.MapPath("~/Scripts/" + filename);
    var content = System.IO.File.ReadAllText(path);

    // Use some kind of template convention
    content = content.Replace("{{IMAGE_PATH}}", Url.Content(@"~/my/image.png"));

    var bytes = new UTF8Encoding().GetBytes(content);
    return new FileContentResult(bytes, "text/javascript");
}