We just moved an ASP MVC intranet website onto a local server and are experiencing something weird with the pics used on one page. For some reason, the URL contains an extra subfolder. What’s weird about this is that this is that it’s a URL that’s used in the “master template” page, yet no other page is displaying this oddity. This is
Theses are the two pics in question:
<img src="../../Content/images/Monet3.png" id="MonetSig" />
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
When I bring up the developer tools in Chrome I get the following error messages for both pics:
GET http://insideapps.dev.company.com/Monet/Monet/Content/images/Monet3.png 404 (Not Found)
GET http://insideapps.dev.company.com/Monet/Monet/Content/images/TEST2body_top.png 404 (Not Found)
Again, no other pages display this error.
Here is a copy of the master layout for the site:
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script language="javascript">
function DoFun() {
}
</script>
</head>
<body>
@using Monet.Common
<div class="page">
<header>
<div style="margin: 10px;" id="Logo">
<img src="../../Content/images/Monet3.png" id="MonetSig" />
</div>
@* </a>*@
@* <div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>*@
<nav>
<ul id="menu">
<li>@Html.MenuLink("Agents", "Index", "Agent")</li>
<li>@Html.MenuLink("Products", "Index", "Product")</li>
<li>@Html.MenuLink("Product Training", "Index", "Course")</li>
<li>@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li>@Html.MenuLink("Help", "About", "Home")</li>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Just in case, here is the Index.cshtml for the page in question
@model IEnumerable<Monet.Models.FollowUpItems>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#thetable").tablesorter();
}
);
function GetNotes(id) {
$('#' + id).dialog();
}
function GetMisc(id) {
var target = id + "Misc";
$('#' + target).dialog();
}
</script>
<h2>Follow Up Items</h2>
@using (Html.BeginForm())
{
<span id="searchBox" class="boxMe" >
<form method="post">
<select name="Table" title="Table" style="font-size:8pt;">
<option value="%">--Table Name--</option>
<option value="AgentContEd">CE</option>
<option value="AgentProductTraining">PT</option>
</select>
<select name="IssueType" style="font-size:8pt;">
<option value="%">--Issue Type--</option>
<option value="W">Warning</option>
<option value="E">Error</option>
</select>
<select name="Status" style="font-size:8pt;">
<option value="%">--Status Type--</option>
<option value="O">Open</option>
<option value="U">Under Review</option>
</select>
<input type="image" src="@Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
<a href="#" style="padding-left: 30px;"></a>
</form>
</span>
<br />
<br />
<span id="programExplanation" style="width: 500px; float:left; padding: 5px; margin-left: 25px;"></span>
<span class="error" style="clear: both;">
@ViewBag.ErrorMessage
</span>
<span class="msg">
@ViewBag.Message
</span>
<br />
<br />
<br />
}
<table>
<tr>
<th>
Table
</th>
<th>
Issue
</th>
<th>
Status
</th>
<th>
Message
</th>
<th>
CreatedBy
</th>
<th>
CreatedOn
</th>
<th>
Key1
</th>
<th>
Key2
</th>
<th>
Notes
</th>
<th>
Misc.
</th>
<th></th>
</tr>
@foreach (var item in Model.Where(i => i.Status != "C" && i.IssueType != "S"))
{
var note = string.Empty;
if (!String.IsNullOrWhiteSpace(item.Notes))
{
note = item.Notes.ToString();
}
var id = item.Id;
var target = id + "Misc";
<tr>
<td>
@if (!String.IsNullOrWhiteSpace(item.TableName))
{
if (item.TableName.Equals("AgentContEd"))
{
@Html.Raw("CE");
}
else if (item.TableName.Equals("AgentProductTraining"))
{
@Html.Raw("PT");
}
else
{
@Html.DisplayFor(modelItem => item.TableName)
}
}
</td>
<td>
@Html.DisplayFor(modelItem => item.IssueType)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
<td>
@Html.DisplayFor(modelItem => item.Message)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreatedBy)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreatedOn)
</td>
<td>
@Html.DisplayFor(modelItem => item.Key1)
</td>
<td>
@Html.DisplayFor(modelItem => item.Key2)
</td>
<td>
@if (!String.IsNullOrWhiteSpace(item.Notes))
{
<span id="notes" onclick='GetNotes(@id);'>
<img src="@Url.Content("~/Content/images/magnify.gif")" alt="Show Notes" />
</span>
}
<div id="@id" title="Notes" style="display:none;">
@Html.DisplayFor(modelItem => item.Notes)
</div>
</td>
<td>
@if (!String.IsNullOrWhiteSpace(item.LastUpdateBy) || !String.IsNullOrWhiteSpace(item.LastUpdateOn.ToString()))
{
<span id="misc" onclick='GetMisc(@id);'>
<img src="@Url.Content("~/Content/images/magnify.gif")" alt="Show Notes" />
</span>
}
<div id="@target" title="Misc" style="display:none;">
@Html.DisplayFor(modelItem => item.LastUpdateBy)
@Html.DisplayFor(modelItem => item.LastUpdateOn)
</div>
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id })
</td>
</tr>
}
</table>
Always use heleprs when dealing with urls in an ASP.NET MVC application and never hardcode them as you did.
So:
and if you are using WebPages v2.0 (which is the default in ASP.NET MVC 4) you could do this:
The Url helper will take care of generating proper url to the resource no matter where and how your application is hosted.