ASP.NET MVC: Redirect user to route with parameters from a drop down list

Question

I have a drop down list (<select> tag) filled with bikes (more specifically their names). When a user selects a bike in the list I want them to be redirected to the details page for the selected bike.

I have a route for bike details as such:

routes.MapRoute("BikeDetails",
                "bike/{bikeId}",
                new {
                    controller = "Bike",
                    action = "Details"
                },
                new { bikeId = @"\d+" });

What is the best way solve this?

I'm thinking maybe I should use the URLs for the drop down list item values and then use JQuery to redirect to the selected URL. But having dealt with old plain ASP.NET before, I can't help but think the guys at Microsoft have thought something clever out for scenarios such as this one.

Any ideas appreciated!

Answer 1

You could do like this:

$("#yourselectid").change(function(){
  window.location = "bike/" + $(this).val();
});

Answer 2

I think your jQuery idea is really the way to go, though I'd probably not tie it to the select's change event, but have a button that triggers the redirect. Some browsers, especially using screen readers, don't behave well with the change event - firing it for each item as you scroll over it. Since it's taking you away from the page, that might be a really bad thing for some users.

You probably also need to have the select wrapped in a form that posts back to the action and a route that allows you to get to that action via the post. That action can accept the URL as a parameter and issue the redirect to the URL. This will cover you in the case where javascript is turned off.