How to pass selected dropdown value using javascript to Html.ActionLink

Question

I have a LocationCode dropdown:

@Html.DropDownList("LocationCode", (SelectList)ViewBag.Values, "Search Location...", new { @value = "@ViewBag.LocationCode.ToString()", @class = "form-control btn btn-default dropdown-toggle", name = "LocationCode" })

Below is my @Html.ActionLink which calls an Export to Excel function:

@Html.ActionLink("Export to Excel", "ExportAllVehicleLocationsToExcel", new { id = "ExportAllVehicleLocationsToExcel" })

Here is my Javascript attempt which is not working:

jQuery(function () {
    $("#ExportAllVehicleLocationsToExcel").click(
    function AllVehicleLocationsSearch() {
        $('#LocationCode').val(LocationCode);
        }
    );
});

How do I pass the selected LocationCode to the @Html.ActionLink using Javascript?

Answer 1

You need to build a new url based on the selected value

The code for generating the should be just (never set the value attribute when using the HtmlHelper methods, and your attempt at setting the name attribute fortunately does nothing at all)

@Html.DropDownList("LocationCode", (SelectList)ViewBag.Values, "Search Location...",
    new { @class = "form-control btn btn-default dropdown-toggle" })

and the link can be just

<a href="#" id="export">Export to Excel</a>

and then the script will be

var baseUrl = '@Url.Action("ExportAllVehicleLocationsToExcel")';
$('#export').click(function() {
    location.href = baseUrl + '/' + $('#LocationCode').val();
})