ASP.NET MVC ActionLink vs RedirectToAction 用于区域中的图像答案

【问题标题】：ASP.NET MVC ActionLink vs RedirectToAction for images in areasASP.NET MVC ActionLink vs RedirectToAction 用于区域中的图像
【发布时间】：2023-03-12 08:49:01
【问题描述】：

我的图片有点难以解释，所以希望这会有意义。我正在使用 ASP.NET MVC 4 Razor。我有一个区域设置，并且正在使用根目录中的布局页面。除了一个小问题外，一切正常。当我在一个区域中使用 ActionLink 时，我的页面呈现得很好，包括布局页面，页面上的图像除外。如果我在我的控制器中使用 RedirectToAction，那么包括图像在内的一切都会很好。我可以看到图像的位置呈现不同，但我不确定为什么或如何修复它。

这是我位于根目录的布局页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewData("Title") - eLAD</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
       <div id="container">
         <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><img src="../../Images/digital_blue_std.jpg" alt="" height="50px" style="vertical-align:middle" /> @Html.ActionLink("company name", "Index", "Home")</p>
                 </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home", New With {.area = ""}, Nothing)</li>
                            <li>@Html.ActionLink("About", "About", "Home", New With {.area = ""}, Nothing)</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home", New With {.area = ""}, Nothing)</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required:=false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
         </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year</p>
                </div>
            </div>
        </footer>
       </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required:=False)

     </body>
</html>

我有一个名为 OwnedQuote 的区域，我的大部分视图和控制器都在其中。假设我有这个 URL /OwnedQuote/AircraftRegNumber/Create ，我可以在控制器中使用 RedirectToAction（省略 http localhost 部分URL 由于堆栈溢出要求）。如果您在这种情况下查看图像的属性，图像的 url 是：/Images/digital_blue_std.jpg 这就是我想要的。但是，当使用从该页面到同一区域中另一个页面的操作链接时，同一图像的 url 为：/OwnedQuote/Images/digital_blue_std.jpg。注意现在添加的区域是一个问题，因为该位置不存在图像。我的操作链接命令只是：

@Html.ActionLink("Referral to UW", "ReferToUW", "Referral", New With {.id = Model.Aircraft.ID}, Nothing)

布局页面和正文部分的所有其他内容都是正确的。所以我不确定为什么使用 Html.ActionLink 与 RedirectToAction 时图像 URL 不同。我需要它与 RedirectToAction 一样。

【问题讨论】：

标签： c# asp.net-mvc image razor asp.net-mvc-areas

【解决方案1】：

首先，不要在您的应用程序中使用类似的路径。您想使用已知的参考点。由于您使用的是使用 Razor 2 的 MVC 4，因此 razor 原生了解您的站点根目录。所以你只需要这样做：

<img src="~/Images/myImage.jpg">

其中 ~ 是您网站的根目录。在 MVC3 中，您必须像这样使用 Html.Content：

<img src="@Html.Content("~/Images/myImage.jpg")" >

问题的原因是您最终访问了不同的 URL，并且由于 MVC 路由默认操作处理，您可以从两个不同的 url 路径查看相同的操作。问题是两个路径的图像不存在相同的偏移量，因此您遇到了问题。使用站点相对路径可以解决问题。

请记住，当您执行“../../blah”之类的操作时，它会从 URL 路径获取相对路径，而不是页面操作路径。这是因为浏览器正在加载图像，而不是服务器，并且浏览器除了当前路径之外什么都不知道。

【讨论】：

这很有意义并解决了我的问题。感谢您的快速响应和解释。