忽略 ASP.net 中的 Javascript、CSS 和图像文件路由
Posted
技术标签:
【中文标题】忽略 ASP.net 中的 Javascript、CSS 和图像文件路由【英文标题】：Ignoring Javascript, CSS and image files routing in ASP.net 【发布时间】：2014-02-12 16:00:25 【问题描述】：我已将 Stack Overflow 上下颠倒，但不幸的是，没有一个答案对我有帮助。
我有一个使用 Visual Studio 提供的 IIS 在我的本地 PC 上完美运行的 Web 应用程序，但是当我将此应用程序部署到服务器时，只有 CSS 才能正确显示。
文件的文件夹结构如下：
Root（此文件夹在服务器上名为Knowledge Management） CSS JS 媒体 上传 文档 图片 用户我的代码，至少母版页头部分看起来像这样：
<head runat="server">
<link href="CSS/Style.css" rel="stylesheet" />
<script src="/JS/jQuery203Min.js"></script>
<script src="/JS/jQueryUI1103Min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
但是，浏览器会这样生成它：
<head>
<link href="../../CSS/Style.css" rel="stylesheet" />
<script src="JS/jQuery203Min.js"></script>
<script src="JS/jQueryUI1103Min.js"></script>
<script src="/JS/HomeArticles.js"></script>
</head>
问题是除了 CSS 之外，JS 文件夹中的任何文件和 Media 或 Uploads 文件夹和子文件夹中的文件都没有正确生成。
问题是，如果我在图像 src 属性前添加“斜线”，图像将获得位置 http://localhost/Media/Discussion.png，如果我不添加“斜线”，则图像位置是 http://localhost/Uploads/Users/HrvojeFadiga.jpg，而它应该是 @987654325 @
这是一个带有图像的代码示例：
<div class="profileInfoWrapper">
<img src="/Uploads/Users/<%=article.User.PhotoLocation %>" />
<span class="postInfo">
<img src="/Media/Rating.png" /><%= GetArticleRating(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Visitors.png" /><%= GetArticleViews(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Comments.png" /><%= GetArticleComments(article.idArticle) %>
</span>
</div>
仅供参考，Global.asax 不包含任何忽略文件路由的规则，但默认添加的 .axd 文件除外。
【问题讨论】：
"问题是如果我在图像 src 属性前添加“斜线”" - 你能显示包含图像元素的代码吗？另外，如果您从脚本 src 属性中删除“/”，这些链接仍然不起作用吗？ @Fresh 我已经添加了带有图像元素的代码。删除斜线没有帮助。我不知道这里的 Windows Server 是否存在问题，或者因为在测试环境（本地使用 IIS Express）中一切正常。 @Hrvach 您的母版页在哪里？在某个文件夹中？ @AfnanAhmad 母版页位于根文件夹中。 【参考方案1】：我可以通过添加runat=server 属性并在定义文件源之前使用倾斜(~) 对其进行排序。例如：
<link href="~/CSS/Style.css" rel="stylesheet" runat="server" />
同样适用于javascript 文件。
【讨论】：
很遗憾，在 javascript 文件中添加 runat 标记会导致错误。 你试过<script src="~/JS/jQuery203Min.js" runat="server"/>吗？注意/>，没有结尾</script>
是的，我有 - 还是一样。我真的很困惑。我什至尝试将 .js 文件添加到 CSS 文件夹，因为 .css 文件按预期工作，但也没有帮助。
这对我来说真的很奇怪。考虑改用捆绑包。
我相信我已经找到了一种解决方法（经过近 10 天的调整、尝试等）！ :) 似乎将脚本添加到 ScriptManager 可以解决问题 - 我必须对其进行一些测试，但会让您知道！感谢您的帮助！【参考方案2】：
对于脚本和样式的任何 URL，您需要像这样调用 ResolveUrl：
<link href="<%= ResolveUrl("~/CSS/Style.css") %>" rel="stylesheet" />
【讨论】：
【参考方案3】：试试这个。没有“~”它也可以工作，但您可以添加它只是为了引用始终是您的项目解决方案的根目录。因此，通过使用波浪号“~”，您可以正确指定 css 和 js 文件的位置。
<link href="~/CSS/styles.css" type="text/css" rel="stylesheet"/>
<script src="~/JS/jScript.js" type="text/javascript"/>
对于您存储在上传文件夹中的图像也是如此。您可以使用它访问它
<img src="~/Uploads/Images/youImage.gif" />
【讨论】：
【参考方案4】：像下面这样尝试，它对我有用...
<script src="JS/jQuery203Min.js" type="text/javascript"></script>
<script src="JS/jQueryUI1103Min.js" type="text/javascript"></script>
<link href="CSS/Style.css" rel="stylesheet" type="text/css"/>
【讨论】：
这是我尝试的第一件事。不幸的是，它没有帮助。【参考方案5】：首先，感谢大家的回复。在玩了几天之后，我终于想出了如何让一切正常工作。
JS 问题
我通过向 .aspx 页面添加 ScriptManager 控件并在其中添加 JS 文件解决了 JS 问题。
<asp:ScriptManager ID="smScripts" runat="server">
<Scripts>
<asp:ScriptReference Path="JS/jQuery203Min.js"/>
</Scripts>
</asp:ScriptManager>
由于某些原因，CSS 文件“开箱即用”，所以我保持不变。
图像问题
我已经设法通过避免硬编码链接到图像并将<%: Page.ResolveUrl("~/Media/Image.png") %> 添加到<img> 标记的src 属性来解决图像问题。我想我应该对所有我不想路由的东西都这样做。这可以用于 CSS 文件、JS 文件等所有内容。但是，（即使这应该可以完美运行）我在 JS 文件中遇到了一些奇怪的问题，这就是使用 ScriptManager 的原因。
页面链接问题
起初我没有意识到我的链接都不起作用，所以我认为问题是半硬编码的链接，由于某种原因，即使我按照定义的相同方式硬编码路由，也不会正确路由Global.asax 文件。我仍然不确定为什么这不起作用。
解决方案是使用<%: Page.GetRouteUrl("RouteName", new routeParameter1 = routeParameter1Value, routeParameter2 = routeParameter2Value) %> 生成链接，一切都会正常工作。
【讨论】：
【参考方案6】：目录/虚拟目录设置可能是罪魁祸首。
在 Google Chrome 中查看您的页面，然后“检查元素”。滚动到顶部并包含您的 .JS 文件。您可以单击它们以查看它们尝试链接到的 URL。服务器上的路径很可能与您的本地副本略有不同。
【讨论】：
以上是关于忽略 ASP.net 中的 Javascript、CSS 和图像文件路由的主要内容，如果未能解决你的问题，请参考以下文章
Firefox 中的 Asp.Net 表单 DefaultButton 错误
忽略 ASP.NET Core 3.1 中的 WCF 证书错误