如何在 Javascript 中引用 MVC 内容文件夹

How reference MVC content folder in Javascript

本文关键字：MVC 文件夹 引用 Javascript      更新时间：2023-09-26

在我的PartView中，我可以从我的内容文件夹中拖放并自动获取图片地址。

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

呈现网址为http://Myserver/MyProject/~/Content/busy.gif

昨天问过之后。 我可以修复它， 

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

但是知道是一个坏主意，如果发生此更改，则对项目路径进行硬编码。

那么在javascript中引用MVC路径的正确方法是什么？

解析

网址

如果这不包含在外部 Javascript 文件中，您可以使用 MVC 中的 Url.Content() 帮助程序方法来解析相应的绝对 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>'
});

将"/"放在字符串的开头。 no ~/或 ../

document.getElementById('PhotoPerson').innerHTML = 
  '<img src="/Content/Images/UnknownPerson.png" class="img-center img-responsive img-thumbnail">';
相关文章：