asp.net-mvc如何引用在 Javascript 中的 MVC 内容文件夹

发布时间: 2016/10/9 6:19:34
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

在我的 PartialView 我可以拖放从我内容的文件夹,自动获得图片地址。

<div style="text-align:center">
    <img src="~/Content/information-button16.png"/>
</div>

这条道路将呈现为 <img src="/MyProject/Content/information-button16.png"/>

现在我试着去创建一个块消息并且想要添加等待光标,但这似乎不工作,因为相同的代码生成一个不同的路径。

$('#tabs').block({
    message: '<h1><img src="~/Content/busy.gif") /> Just a moment...</h1>'
});

渲染器 URL 是http://Myserver/MyProject/~/Content/busy.gif

后问问昨天吧。 可以修好,

message: '<h1><img src="/MyProject/Content/busy.gif") /> Just a moment...

但是知道这个变化是坏主意硬编码中案例的项目路径。

所以引用在 javascript 中的 MVC 路径的正确方法是什么?

解决方法 1:

解析 URL

如果这不包含在外部 Javascript 文件,则可以使用 Url.Content() helper 方法内 MVC 解决的适当的绝对 URL:

$('#tabs').block({
    message: '<h1><img src="@Url.Content("~/Content/busy.gif")" /> Just a moment...</h1>'
});

考虑一种 CSS 的方法

另一种更适用方法可能要考虑使用一个 CSS 类来设置你忙的动画。这将允许您无需显式调用它的整个路径每次引用你的图像︰

.busy {
    /* This URL will need to be relative to the location of the element within your CSS */
    background: url('~/Content/busy.gif');
    height: 16px;
    width: 16px;
    display: block;
}

然后只是使用 CSS 声明相对于 <img> 标记︰

$('#tabs').block({
    message: '<h1><i class='busy'></i> Just a moment...</h1>'
});
赞助商