ASP.NET MVC的ActionLink VS RedirectToAction在区域的图像 [英] ASP.NET MVC ActionLink vs RedirectToAction for images in areas
问题描述
我有这是一个有点硬的图像的问题来解释，所以希望这将是有意义的。我使用ASP.NET MVC 4剃刀。我有一个区域设置和我使用的是布局页，在根目录下。一切正常，除了一个小小的问题。当我在一个地区使用ActionLink的，我的页面呈现就好包括除了网页上的图像布局页面。如果我在我的控制器使用RedirectToAction，一切都呈现精致，包括图像。我可以看到图像的位置是不同的渲染，但我不知道为什么或如何解决它。
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. 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. If I use RedirectToAction in my controller, everything renders fine including the image. 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>© @DateTime.Now.Year</p>
</div>
</div>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required:=False)
</body>
</html>
和我有一个名为OwnedQuote一个区域，我的大部分观点和控制器。所以让我们说我有这个URL / OwnedQuote / AircraftRegNumber /创建我得到了在控制器使用RedirectToAction（省略的在HTTP localhost部分由于URL堆栈溢出的要求）。如果在这种情况下，看图片的属性为图像的URL是：/Images/digital_blue_std.jpg这就是我想要的。但是，如果是在同一地区使用ActionLink的从页面到另一个页面，对于同一个图像的URL是：/OwnedQuote/Images/digital_blue_std.jpg。注意，除了现在的区域，因为图像不会在此位置存在这是一个问题。我的操作链接命令就是：
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). 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. 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. 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)
其他的一切从布局页和主体部分是正确的。所以我不知道为什么图像URL中使用Html.ActionLink VS RedirectToAction时是不同的。我需要它来充当一样RedirectToAction。
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. I need it to act the same as RedirectToAction.
推荐答案
首先，不要使用一样，在你的应用程序的路径。你想用一个已知的参照点。由于您使用的MVC 4，使用剃刀2，剃须刀本身理解你的站点根目录。所以，你只需要做这样的事情：
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. So you need only do something like this:
<img src="~/Images/myImage.jpg">
在哪里〜是你的站点的根目录。在MVC3您必须使用Html.Content这样的：
Where ~ is the root of your site. In MVC3 you had to use Html.Content like this:
<img src="@Html.Content("~/Images/myImage.jpg")" >
原因您的问题是，你在不同的URL的结束了，因为MVC路由默认操作的处理，您可以查看从两个不同的URL路径同样的动作。问题是，图像不会同时存在两个路径偏移，所以你得到的问题。使用本网站相对路径解决问题。
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. 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.
当你做这样的事记../../blah它从URL路径，而不是页面的操作路径的相对路径。这是因为浏览器加载图像，而不是服务器，浏览器不知道比它的电流通路之外的任何
Remember when you do something like "../../blah" it takes the relative path from the URL path, not the pages actions path. 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 VS RedirectToAction在区域的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
