如何将带有波浪号的相对路径渲染到 jquery/javascript 中相对路径的 ../../ 中？答案

【问题标题】：how to render the relative path with tilde into ../../ of relative path in jquery/javascript?如何将带有波浪号的相对路径渲染到 jquery/javascript 中相对路径的 ../../ 中？
【发布时间】：2023-04-02 14:47:01
【问题描述】：

嗯，我知道我的标题有点混乱。我会在下面用例子清楚地说明。

<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>

【问题讨论】：

对于 Razor，请参阅 stackoverflow.com/questions/8574237/…

标签： c# javascript jquery asp.net html

【解决方案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。

为什么在客户端需要这个？使用 servercontrols(runat=server)，你可以使用波浪号来解析服务器上的 URL。

【讨论】：

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

【解决方案2】：

实际上，带有波浪号的 URL 可以通过以下方法转换为绝对 URL： ResolveURL and ResolveClientURL

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

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

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

当您使用用户控件时，这两种方法的最大区别就出现了。在一种情况下，URL 是指相对于用户控件所在文件夹的 URL，在另一种情况下，就是包含用户控件的页面。

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

【讨论】：

【解决方案3】：

查看 VirtualPathUtility Class 和来自 msdn 的有关 ASP.NET project paths 的信息。

VirtualPathUtility.ToAppRelative 方法可能是您正在寻找的方法。

VirtualPathUtility.ToAppRelative

如果应用程序的虚拟路径是“myapp”并且虚拟路径“/myApp/sub/default.asp”被传递到 ToAppRelative 方法中，生成的应用程序相对路径是“~/sub/default.aspx”。

它解释并举例说明了如何在不同的路径格式之间进行转换。

我还认为您应该在服务器级别输出正确的路径，而不是在浏览器中的 javascript 中进行逆向工程。如果您重新安排项目并用 ASP 更改它，可能会导致问题。

【讨论】：

我编辑了我的答案，因为我在第一次阅读时误解了你的问题。

【解决方案4】：

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

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

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

【讨论】：