ASP.NET MVC ActionLink与RedirectToAction用于区域中的图像

Question

I have an issue with an image that is a little hard to explain so hopefully this will make sense. 我的图片有一个问题，很难解释，因此希望这是有道理的。 I am using ASP.NET MVC 4 Razor. 我正在使用ASP.NET MVC 4 Razor。 I have one area setup and I am using a layout page that in the root. 我有一个区域设置，并且正在使用根目录中的布局页面。 Everything is working fine except one small issue. 除了一个小问题，一切工作正常。 When I use an ActionLink in an area, my page renders just fine including the layout page except for the image on the page. 当我在某个区域中使用ActionLink时，除了页面上的图像之外，包括布局页面在内的页面都可以很好地呈现。 If I use RedirectToAction in my controller, everything renders fine including the image. 如果我在控制器中使用RedirectToAction，则包括图像在内的所有内容都可以正常渲染。 I can see the location of the image is rendered differently but I'm not sure why or how to fix it. 我可以看到图像的位置呈现了不同的效果，但是我不确定为什么或如何修复它。

Here's my layout page that located in the root: 这是我的布局页面，位于根目录中：

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

And I have an area called OwnedQuote that most of my views and controllers are in. So let's say I have this URL /OwnedQuote/AircraftRegNumber/Create that I got to using RedirectToAction in a controller (omitting the http localhost portion of the URL due to stack overflow requirements). 我有一个名为OwnedQuote的区域，我的大多数视图和控制器都在其中。因此，假设我有这个URL / OwnedQuote / AircraftRegNumber / Create，我必须在控制器中使用RedirectToAction（由于以下原因，省略了URL的http localhost部分：堆栈溢出要求）。 If you look at the properties of the image in this case the url for the image is: /Images/digital_blue_std.jpg which is what I want. 如果在这种情况下查看图像的属性，则图像的URL为：/Images/digital_blue_std.jpg这就是我想要的。 However, when is use an actionlink from that page to another page in the same area, the url for the same image is: /OwnedQuote/Images/digital_blue_std.jpg. 但是，当使用从该页面到同一区域中另一页面的操作链接时，同一图像的URL为：/OwnedQuote/Images/digital_blue_std.jpg。 Notice the addition of the area now which is a problem because the image does not exist in this location. 请注意，现在添加了区域，这是一个问题，因为该位置不存在图像。 My action link command is just: 我的动作链接命令是：

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

Everything else from the layout page and the body section is correct. 布局页面和正文部分中的所有其他内容都是正确的。 So I'm not sure why the image URL is different when using Html.ActionLink vs RedirectToAction. 所以我不确定为什么使用Html.ActionLink与RedirectToAction时图像URL会有所不同。 I need it to act the same as RedirectToAction. 我需要它的行为与RedirectToAction相同。

Answer 1

First, don't use paths like that in your application. 首先，不要在应用程序中使用类似的路径。 You want to use a known reference point. 您想使用一个已知的参考点。 Since you are using MVC 4, which uses Razor 2, razor natively understands your site root. 由于您使用的是使用Razor 2的MVC 4，因此razor可以自然地理解您的站点根目录。 So you need only do something like this: 因此，您只需要执行以下操作：

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

Where ~ is the root of your site. 〜是您网站的根目录。 In MVC3 you had to use Html.Content like this: 在MVC3中，您必须像这样使用Html.Content：

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

The reason for your problem is that you're ending up at different URL's, and because of MVC Routing default action processing, you can view the same action from two distinct url paths. 问题的原因是，您最终到达了不同的URL，并且由于MVC路由默认操作的处理，您可以从两个不同的URL路径查看同一操作。 The problem is that the images don't exist at the same offset for both paths, so you get the problem. 问题是两个路径的图像不存在相同的偏移量，因此您遇到了问题。 Using the site relative path solves the problem. 使用站点相对路径可以解决此问题。

Remember when you do something like "../../blah" it takes the relative path from the URL path, not the pages actions path. 请记住，当您执行“ ../../blah”之类的操作时，它会从URL路径获取相对路径，而不是页面操作路径。 This is because the browser is loading the image, not the server, and the browser doesn't know anything other than what it's current path is. 这是因为浏览器正在加载图像，而不是服务器，并且浏览器除了当前路径外，不知道其他任何信息。

ASP.NET MVC ActionLink与RedirectToAction用于区域中的图像

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-03-24 21:40:32

ASP.NET MVC ActionLink与RedirectToAction用于区域中的图像

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-03-24 21:40:32

解决方案1
2 已采纳 2014-03-24 21:40:32