Query string for Global Filter in ASP.NET Core MVC

Question

I have a category dropdown filter on my website navbar that affects all pages. I do not want to create a separate View for it.

When the filter is used I want ?filter=category+selected added in front of my query string.

For example, my query string should be https://website.com/controller_name/action_name?filter=category+selected

Is there a way to achieve this? Any advice is appreciated.

Answer 1

In your view, use javascript to get selected option value (put it inside a script tag):

function filterQuery() {
    let selectedCategory = document.getElementById("dropdownId").value;
    
    let url = "/ControllerName/ActionName?filter=" + encodeURIComponent(selectedCategory);
    
    window.location.href = url;
}

The dropdown will have an onchange event which will trigger above function:

<select id="dropdownId" onchange="filterQuery()">
    @foreach (var category in Model.Categories)
    {
        <option value="@category">@category</option>
    }
</select>

Controller action code:

public IActionResult ActionName(string filter)
{
    var dropdownDataModel = GetData();

    if (!string.IsNullOrWhiteSpace(filter))
    {
        //Filter code
    }
    
    return View(dropdownDataModel);
}

You can also use fetch APIs to update options if you don't want the page to reload.