忽略 ASP.net 中的 Javascript、CSS 和图像文件路由答案

【问题标题】：Ignoring Javascript, CSS and image files routing in ASP.net忽略 ASP.net 中的 Javascript、CSS 和图像文件路由
【发布时间】：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 母版页位于根文件夹中。

标签： javascript asp.net css .net-4.0 url-routing

【解决方案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。服务器上的路径很可能与您的本地副本略有不同。

【讨论】：