ASP.NET MVC ActionLink not selecting correct controller

Question

Question background:

I'm trying to pass an variable - in this case an int 'productId' variable' in the url to a controller and action method specified in the ActionLink method.

The issue:

My routes are set as follows:

 routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Login", action = "Login", id = UrlParameter.Optional }
        );

        routes.MapRoute(
            name: "ProductDetailHandler",
            url: "{controller}/{action}/{productId}",
            defaults: new { controller = "Product", action = "ProductDetail", productId = UrlParameter.Optional }
        );

My 'ActionLink' in my 'Products.cshtml' view - which is returned by a controller called 'HomePageController' is set as follows:

@Html.ActionLink("Product", "ProductDetail", new { productId = (ViewBag.data as List<LoginTest.Models.HomePageItem>).First().Id })

The controller that receives the passed 'productId' along with its action method is set as follows:

public class ProductController : Controller
{
    public ActionResult ProductDetail(int productId)
    {
        //logic

        return View();
    }
}

This is the issue, when looking at the URL it is shown to be redirecting to the 'HomePage' controller:

If someone could tell me why my ActionLink is not going to the Product controller that would be great.

EDIT:

This is the 'Homepage' view that I click a button to redirect me to 'product/productDetail/productId'

My route now just features the 'Default example':

 routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Login", action = "Login", id = UrlParameter.Optional }
        );

The Action Link is now:

 @Html.ActionLink("Product", "ProductDetail", "Product", new { id = (ViewBag.data as List<LoginTest.Models.HomePageItem>).First().Id })

The 'Product/ProductDetail' controller and action method now looks like:

public class ProductController : Controller
{
    public ActionResult ProductDetail(int id)
    {
        string hold;

        return View();
    }
}

This still is giving me the the incorrect URL, as shown, note the 'productId' is now showing as 'length'?

Answer 1

Since the link is on a page rendered by HomePageController the default is to use that controller in the route. You need to use the overload that accepts a controller name

@Html.ActionLink("Your link text", "ProductDetail", "Product", new { id = 1 }, null)

As a side note, your original route table would have created /Product/ProductDetail?productId =1 with this overload because it matches the default route which is the first route in your table (the order of routes is important). In order to have /Product/ProductDetail/1, either reverse the order of the routes or just change the parameter of ProductDetail to int id rather than int productId