Pass 'value' when 'key' is selected - MVC/Dictionary object - asp.net

Question

I am populating a dictionary object with key value pairs like this..
Dictionary<string, string> twoValues = new Dictionary<string, string>();
foreach (var item in query)
{
twoValues.Add(item.Name, item.Id);
}
return twoValues;
I am returning these value pairs to the controller and populating a MVC model (selectlists)
model.Names = new SelectList(twoValues.Keys);
model.Ids = new SelectList(twoValues.Values);
return model;
In the view I have an action link and a drop down. Drop down is populated with key values of the dictionary (in this case, key is text names, and value is ids)
//Action link
<%=Html.ActionLink("link", "Method", "Controller", new { Id = ?? })%>
//Drop down
<%=Html.DropDownList("names", Model.Names, "")%>
How do I pass the Id associated with the selected Name in drop down to the controller via action link?
I tried having another drop down list next to names with the ids .. but somehow I need to maintain the link between the two drop downs.. since I am separating the dictionary key value pairs in the view for display...
I can have something like...
//Action link
<%=Html.ActionLink("link", "Method", "Controller", new { Id = ?? })%>
//Drop down
<%=Html.DropDownList("names", Model.Names, "")%>
<%=Html.DropDownList("ids", Model.Ids, "")%>
How do I pass the id via the action link for the selected 'Name' drop down list.

Answer 1

You need to do some javascript trick on the click event. Read the selected value of the drop down and build the url and navigate to that.
#Html.ActionLink("Link","Method","Controller",null,new { #class="hackLink"})
<script type="text/javascript">
$(function(){
$(".hackLink").click(function(e){
e.preventDefault(); //Prevent default link click behaviour
var item=$(this);
var selectedVal=$("#names").val();
var newUrl=item.attr("href")+"?id="+selectedVal;
window.location.href=newUrl;
});
});
</script>
Assuming names is the ID of your DropDown.
Alternatively, you can listen to the change event of the Dropdown and then set the value href attribute of the link.

Answer 2

I would recommend creating one dropdown that will have the value of the options equal to your id field and the text equal to your names. You should be able to create it using something this:
Controller:
IEnumerable<SelectListItem> items = yourQueryCode.Select(c => new SelectListItem
{
Value = c.ID.ToString(),
Text = c.Name
});
ViewBag.Names = items;
HTML:
<%= Html.DropDownList("Names", (IEnumerable<SelectListItem>) ViewBag.Names) %>
This will allow you to get the ID linked to the name as the value of the dropdown when you do $('#dropdown').val().
Preferably you would have the SelectList as part of your model that you return to the view, but the above will work as well. There will only have to be a few minor changes when you switch to returning via the model and the transition is pretty simple. Hopefully this is enough to get you headed in the right direction.