form action Url.Action send incorrect routeValues

Question

Trying to make a filter to a table which shows some products.

the method for View looks like this:

public ActionResult BikeFilter(int? page, string SelectWheelSize, int? catId)
        {
            ....some code.....
        }

In database I have different types of Products and each type has it's CategoryId. For example - bicycles have CategoryId = 1.

this is the HTML part:

<form class="form-filter" method="get" action="@Url.Action("BikeFiler", "Shop", new { catId = "1"})">
    <div class="form-inline filter">
        <label>Wheel size:</label>
        <select name="SelectWheelSize">
            <option selected></option>
            @foreach (var item in ViewBag.WheelSizes)
            {
                <option value="@item.Value">@item.Text</option>
            }
        </select>
        <input type="submit" value="Apply" class="btn btn-success btn-sm"/>
    </div>
</form>

If user chose no options to filter and hit "Apply" - it should work like this: method "public ActionResult BikeFilter()" gets catId = 1 and make SELECT from database for all products that has CategoryId = 1.

However I'm getting the whole list of Product.

I looked in Debug and found that catId has value NULL.

In ActionLinks like this one:

@Html.ActionLink("Bicycles","Bicycles","Shop", new {catId = "1"},new {@class = "nav-link"})
@Html.ActionLink("Scooters", "Scooters", "Shop", new { catId = "3" }, new { @class = "nav-link" })

it works perfect and the method always get the right catId.

What am I doing wrong?

Answer 1

If you pass query parameters in URL when submits the form, the parameter will disappear. for more info: submitting a GET form with query string params and hidden params disappear So better to pass catId value within the hidden input field.

<form class="form-filter" method="get" action="@Url.Action("BikeFilter", "Home")">
<input type="hidden" name="catId" value=1>
    <div class="form-inline filter">
        <label>Wheel size:</label>
        <select name="SelectWheelSize">
            <option selected></option>
            @foreach (var item in ViewBag.WheelSizes)
            {
                <option value="@item">@item</option>
            }
        </select>
        <input type="submit" value="Apply" class="btn btn-success btn-sm"/>
    </div>
</form>

DEMO

PS: If the user chose options to filter save filter value in CatId field.