MVC4: dynamically change route value from dropdown list selection

Question

I have a dropdown list that serves as a record navigation control -- selecting a value from the dropdown is supposed to "jump to" that record. I feel like I've done stuff like this before that worked, but I can't get this one to work. The issue seems to be that I can't get the dropdown list to change the ID route value that the page was initially called with. So let's say my page is called from this URL:

/PatientProfile/Services/12

12 is the ID route value here--this is essentially the initial record displayed. This works. However, when I select something from my dropdown, it will redirect to something like this:

/PatientProfile/Services/12?ID=7

Notice how the 12 is still there in the route value ID. ID 7 was selected from the dropdown, but it's appended to the URL as a new parameter instead of the route value. What I want to happen is this:

/PatientProfile/Services/7

Here's what the razor looks like for my dropdown:

@using (Html.BeginForm("Services", "PatientProfile", FormMethod.Get))
{ 
    @Html.Label("ID", "View Profile:")
    @Html.DropDownListFor(model => model.CurrentProfile.ID, ViewBag.ProfileID as SelectList, new { onchange = "this.form.submit();" })  
}

I tried both Html.DropDownList and Html.DropDownListFor, but saw no difference in behavior.

Any help greatly appreciated.

Answer 1

I would use jquery for this. Please confirm the generated id of the dropdownlist for this to work properly

$('#CurrentProfile_ID').change(function(){
    window.location('@Url.Action("Services", "PatientProfile", new { id = "----" })'.replace("----", $('#CurrentProfile_ID :selected').val()));
}); 

Hopefully this helps.

PS. This sounds like a perfect situation for using a partial view that you update using an ajax call so you don't have to post back.