JavaScript 中的 URL 助手答案

【问题标题】：URL helper in JavaScriptJavaScript 中的 URL 助手
【发布时间】：2011-01-15 05:05:01
【问题描述】：

我正在为我的图片库使用 jQuery Lightbox。
按钮图像的 URL 是“../../Content/Lightbox/lightbox-btn-next.gif”
如果我的 URL 是“localhost/Something1/Somtehing2”，那效果很好
如果我使用另一条路线，如“localhost/Something1/Something2/Something3”，则按钮图像的 URL 不正确。
我可以在 .js 文件中使用Url.Action() 吗？
这就是我调用 .js 文件的方式：

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

【问题讨论】：

标签： jquery asp.net-mvc url-routing

【解决方案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("~/") 有一个终止斜杠。

【讨论】：

谢谢@matt。好主意，在这里效果很好。

【解决方案2】：

您不能在 .js 文件中使用 Url.Action()。但是你可以定义全局变量并在你的js文件中使用它。

<script type="text/javascript">

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

</script>

【讨论】：

【解决方案3】：

只需将@Url.Content(@"~/some paths") 放入单引号中，例如：

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

【讨论】：

【解决方案4】：

我更喜欢从标签 'href's 或 form 'action's 或其他一些有意义的元素中提取 URL。

<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");
}

【讨论】：

网址在 jquery.lightbox-0.5.js 里面我在 View 里面没有 a 标签。
也许你可以使用脚本标签？你在哪里运行你的 lightbox() 调用？
我正在局部视图中运行灯箱调用。 leandrovieira.com/projects/jquery/lightbox 有一个解释如何覆盖这些设置。但这不起作用:)
也许我解释得有点复杂:) 在 jquery.lightbox-0.5.js 中有一个名为 imageBtnClose 的设置。它是一个字符串，表示按钮图像的 url（不是 a 标签内的图像）。当我更改路线时，我必须更改 jquery.lightbox-0.5.js 中的设置，并且不能在不同的视图上重复使用相同的 .js 文件。
这就是我想在 .js 文件中使用 Url.Action 的原因，这样我就可以在其他视图上重复使用它，并且在更改路由时不必重新配置它。