如何将带有波浪线的相对路径在jQuery/JavaScript中渲染成 ../../ 的相对路径？

Question

嗯，我明白我的标题有点令人困惑。下面我将通过示例清晰地表述。

<asp:ImageButton ID="imgButton" NavigateUrl="~/Presentation/Resources/Images/addFile.png" runat="server" />

在HTML中，上述控件将被呈现为：

<input type="image" name="imgButton" id="imgButton" src="../../Resources/Images/addFile.png" style="border-width:0px;">

我注意到，它会将src从“~”转换为“../../”。它会自动安排文件级别。

所以在JavaScript中，我想使用以下URL来设置控件：

~/Presentation/Resources/Images/PDF.png

不幸的是，在HTML中它将被呈现为：

<input type="image" name="imgButton" id="imgButton" src="~/Presentation/Resources/Images/addFile.png" style="border-width:0px;">

我的问题是，如果我想用“~”获取“../../”相对路径，我应该写什么？ 我尝试过这个，但是我无法得到它。

<script type="javascript">
document.getElementById("<%= imgButton.ClientID %>").src = 
"~/Presentation/Resources/Images/PDF.png";
</script>

- DEN

---

有关 Razor，请参见 https://dev59.com/N2oy5IYBdhLWcg3wa9Qj。 - Michael Freidgeim

Answer 1

请试一下： http://weblogs.asp.net/joelvarty/archive/2009/07/17/resolveurl-in-javascript.aspx。 在网站的母版页中，添加以下内容：

<script type="text/javascript">
        var baseUrl = "<%= ResolveUrl("~/") %>";
</script>

然后，在您的JavaScript文件中，加入以下函数：

function ResolveUrl(url) {
    if (url.indexOf("~/") == 0) {
        url = baseUrl + url.substring(2);
    }
    return url;
}

你可以把函数放在主页面中，但这样你就不能在代码的其他部分使用智能感知了。现在你可以直接从javascript中使用带有~/的ResolveUrl。

为什么需要在客户端使用它？使用服务器控件（runat=server）即可在服务器上使用tilde解析URL。

- Tim Schmelter

---

我需要它，因为我必须将动态HTML控件与~/url绑定。 - DEN

Answer 2

实际上，由于以下方法： ResolveURL和ResolveClientURL， 带有波浪符的网址会被转换为绝对网址。

因此，您应该能够做到这一点：

<input type="image" name="imgButton" id="imgButton" src="<%=this.ResolveClientUrl("~/Resources/Images/addFile.png")%>" style="border-width:0px;">

（实际上，在 Web 控件（如 HyperLink 等）中，这是自动完成的）

这两种方法的区别在于使用用户控件时。一种情况下，URL 是相对于包含用户控件的文件夹的 URL，而另一种情况下，则是包含用户控件的页面的 URL。

请参见此问题：Control.ResolveUrl versus Control.ResolveClientUrl versus VirtualPathUtility.ToAbsolute

- tsimbalar

Answer 3

请查看VirtualPathUtility类和来自msdn有关ASP.NET项目路径的信息。

VirtualPathUtility.ToAppRelative方法可能是您要找的内容。

引用如下： VirtualPathUtility.ToAppRelative 如果应用程序的虚拟路径为“myapp”，并且将虚拟路径“/myApp/sub/default.asp”传递到ToAppRelative方法中，则生成的应用程序相关路径为“~/sub/default.aspx”。

它解释并提供了有关如何在不同路径格式之间进行转换的示例。

我还认为您应该在服务器级别输出正确的路径，而不是在浏览器中使用JavaScript进行反向工程。如果重新排列项目并且asp更改，则可能会出现问题。

- Jonas Stensved

---

我修改了我的回答，因为我第一次阅读时误解了你的问题。 - Jonas Stensved

Answer 4

WebControls在渲染HTML之前在服务器上将波浪号转换为正确的路径，如果您需要在jQuery中动态更改src，则需要使用完整路径或相对路径。

您可能希望在页面上具有根路径的属性，例如：ApplicationRootURL，并执行以下操作：

<script type="javascript">
document.getElementById("<%= imgButton.ClientID %>").src = 
"<%=ApplicationRootURL%>/Presentation/Resources/Images/PDF.png";
</script>

- Mark Redman