How to correctly use Html ActionLink with ASP NET MVC 4 Areas

Question

I recently discovered Areas in ASP NET MVC 4  which I have successfully implemented  but I m running into troubles with the  Html ActionLink helper in my Razor views  The URL this helper generates always seems to be relative to the URL of the current page   I have my web site configured in IIS 7  Win7  as an Application virtual directory at  Foo   I have two Areas registered  Admin and Blogs  I have the default code in the AdminAreaRegistration cs and BlogsAreaRegistration cs files  I added namespaces   new      MvcProject Controllers    to the defaults of the default RouteConfig   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                                       When I go to the home page for my site  http   localhost Foo  it correctly loads the  home  page for my site  At this point  all the action links have their correct URLs   Sample code from MvcProject Views Shared  Layout cshtml   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    This is correctly rendering the HTML as    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    When I navigate in the browser to  Blogs  for instance  this URL correctly loads in the browser   Foo Blogs Home   Now the links in my main navigation change their URLs to    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    Notice that  Blogs   is appended to the IIS virtual directory name  so that  Foo Blogs Home is now  Foo Blogs Blogs Home   The controllers and views are rendering fine  it s just the calls to  Html ActionLink in my MvcProject Views Shared  Layout cshtml view are not working as I expected   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  Html ActionLink behaves

User · Answer

Below are some of the way by which you can create a link button in MVC.

@Html.ActionLink("Admin", "Index", "Home", new { area = "Admin" }, null)  
@Html.RouteLink("Admin", new { action = "Index", controller = "Home", area = "Admin" })  
@Html.Action("Action", "Controller", new { area = "AreaName" })  
@Url.Action("Action", "Controller", new { area = "AreaName" })  
<a class="ui-btn" data-val="abc" href="/Home/Edit/ANTON">Edit</a>  
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#CustomerList" href="/Home/Germany">Customer from Germany</a>  
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#CustomerList" href="/Home/Mexico">Customer from Mexico</a>

Hope this will help you.

User · Answer

Just to add up my bit  Remember  you re gonna need to have at least 2 areas in your MVC application to get the routeValues    area      working  otherwise the area value will be used as a query-string parameter and you link will look like this    area     If you don t have at least 2 areas  you can fix this behavior by  1  editing the default route in RouteConfig cs like this   routes MapRoute      name   Default       url    controller   action   id        defaults  new   area       controller    Home   action    Index   id   UrlParameter Optional        OR 2  Adding a dummy area to your MVC project

User · Answer

How I redirect to an area is add it as a parameter   Html Action  Action    Controller   new   area    AreaName       for the href portion of a link I use   Url Action  Action    Controller   new   area    AreaName

User · Answer

I hate answering my own question  but  Matt Bodily put me on the right track   The  Html Action method actually invokes a controller and renders the view  so that wouldn t work to create a snippet of HTML in my case  as this was causing a recursive function call resulting in a StackOverflowException  The  Url Action action  controller    area    abc     does indeed return the URL  but I finally discovered an overload of Html ActionLink that provided a better solution for my case    Html ActionLink  Admin    Index    Home   new   area    Admin     null    Note    null is significant in this case  to match the right signature   Documentation   Html ActionLink  LinkExtensions ActionLink   Documentation for this particular overload   LinkExtensions ActionLink Controller  Action  Text  RouteArgs  HtmlAttributes   It s been difficult to find documentation for these helpers  I tend to search for  Html ActionLink  when I probably should have searched for  LinkExtensions ActionLink   if that helps anyone in the future   Still marking Matt s response as the answer   Edit  Found yet another HTML helper to solve this    Html RouteLink  Admin   new   action    Index   controller    Home   area    Admin

[c#] How to correctly use Html.ActionLink with ASP.NET MVC 4 Areas

Examples related to c#

Examples related to asp.net-mvc-4

Examples related to razor

Examples related to asp.net-mvc-routing