Why this navbar menu using @Html.ActionLink in a .NET application is not working as I am expecting?

Question

I am not so into .NET and I have the following problem. Into a page I have a BootStrap navbar menu like this:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

    @Html.ActionLink("Vidly_v2", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link" })</li>
            <li>@Html.ActionLink("Customers", "Index", "Customers", new { @class = "nav-link" })</li>
            <li>@Html.ActionLink("Movies", "Index", "Movies", new { @class = "nav-link" })</li>
        </ul>
        @Html.Partial("_LoginPartial")
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" placeholder="Search" type="text">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

I have the following problem with these 3 links:

<li class="nav-item active">@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link" })</li>
<li>@Html.ActionLink("Customers", "Index", "Customers", new { @class = "nav-link" })</li>
<li>@Html.ActionLink("Movies", "Index", "Movies", new { @class = "nav-link" })</li>

because clicking on all these links the user is redirected to the following URLs (in the same order of the previous

tag:

http://localhost:60048/Movies?Length=4

and

http://localhost:60048/Movies?Length=9

and

http://localhost:60048/Movies?Length=6

Why? What is wrong? What am I missing? How can I fix this issue?

Answer 1

You are using the helper method incorrectly!.

You are currently using the below overload of ActionLink helper.

public static MvcHtmlString ActionLink (this HtmlHelper helper, 
                                             string linkText, 
                                             string actionName, 
                                             string controllerName, 
                                             object routeValues);

The last parameter is for passing the route values which will be used to build the querystring. Currently you are passing the anonymous object for the html attributes to that.

Use this overload

public static MvcHtmlString ActionLink (this HtmlHelper htmlHelper, 
                                             string linkText, 
                                             string actionName, 
                                             string controllerName,
                                             object routeValues,
                                             object htmlAttributes);

If you do not have any route values to pass, simply pass null for the 4 the param (route values)

@Html.ActionLink("Movies", "Index", "Movies", null, new { @class = "nav-link" })