title: How to correctly use Html.ActionLink with ASP.NET MVC 4 Areas
body: <p>I recently discovered <a href="http://www.codeproject.com/Articles/714356/Areas-in-ASP-NET-MVC" rel="noreferrer">Areas in ASP.NET MVC 4</a>, which I have successfully implemented, but I'm running into troubles with the <code>@Html.ActionLink</code> helper in my Razor views. The URL this helper generates always seems to be relative to the URL of the current page.</p>
  
  <p>I have my web site configured in IIS 7 (Win7) as an Application virtual directory at <code>/Foo</code>.</p>
  
  <p>I have two Areas registered: Admin and Blogs. I have the default code in the <code>AdminAreaRegistration.cs</code> and <code>BlogsAreaRegistration.cs</code> files. I added <code>namespaces = new[] { "MvcProject.Controllers" }</code> to the defaults of the default RouteConfig:</p>
  
  <pre><code>public class RouteConfig
  {
      public static void RegisterRoutes(RouteCollection routes)
      {
          routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
          routes.MapRoute(
              name: "Default",
              url: "{controller}/{action}/{id}",
              defaults: new {
                  controller = "Home", action = "Index", id = UrlParameter.Optional,
                  namespaces = new[] { "MvcProject.Controllers" }
              }
          );
      }
  }
  </code></pre>
  
  <p>When I go to the home page for my site: <code>http://localhost/Foo</code>, it correctly loads the "home" page for my site. At this point, all the action links have their correct URLs.</p>
  
  <p>Sample code from <code>MvcProject/Views/Shared/_Layout.cshtml</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Main Navigation&lt;/h2&gt;
  &lt;ul&gt;
      &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
      &lt;li&gt;@Html.ActionLink("Blogs", "Index", "Blogs/Home")&lt;/li&gt;
      &lt;li&gt;@Html.ActionLink("Admin", "Index", "Admin/Home")&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is correctly rendering the HTML as:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Main Navigation&lt;/h2&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="/Foo"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Foo/Blogs/Home"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Foo/Admin/Home"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I navigate in the browser to "Blogs" for instance, this URL correctly loads in the browser: <code>/Foo/Blogs/Home</code>.</p>
  
  <p>Now the links in my main navigation change their URLs to:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Main Navigation&lt;/h2&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="/Foo/Blogs/Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Foo/Blogs/Blogs/Home"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Foo/Blogs/Admin/Home"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Notice that "Blogs/" is appended to the IIS virtual directory name, so that <code>/Foo/Blogs/Home</code> is now <code>/Foo/Blogs/Blogs/Home</code>.</p>
  
  <p>The controllers and views are rendering fine, it's just the calls to <code>@Html.ActionLink</code> in my <code>MvcProject/Views/Shared/_Layout.cshtml</code> view are not working as I expected.</p>
  
  <p>It feels like I'm missing something trivial, but no amount of searching has come up with an answer. Every blog post and tutorial I've found for implementing Areas in ASP.NET MVC4 makes no mention of changes in how <code>@Html.ActionLink</code> behaves.</p>