ASP.NET MVC2 Dropdownlist and URL.action

Question

I have a Dropdownlist which needs to call an action on a controller with the parameter value of the selected Dropdownlist value on its OnChange event.

This is what I have right now.

<%= Html.DropDownList("series",                                                     
             new SelectList((IEnumerable)ViewData["series"], "ProductId", "SeriesName"),
                        new { onchange = "??" })%>

I can enclose the list in a form element

<form id="SeriesForm" action="<%: Url.Action("S", "ProductSearch", new {SeriesId = ?? }) %>" method="post">

But how do I set the SeriesId parameter which should be the selected value of the dropdown? I tried attaching a jQuery method to the OnChange event but I am not able to change the Url.Action method.

Thanks,

Milimetric · Accepted Answer · 2011-04-15 00:15:25Z

1

A really simple way is to use the url you want to call as the value of the options in the dropdown. There are other ways to do it, but that's the most bare-bones:

<select id="myList" ...>
<% foreach (var id in ids) { %>
    <option value="<%= Url.Action("Action", "Controller", new { id = id }) %>">id</option>
<% } %>
</select>

And then from jQuery, just get the url like this:

$('#myList').change(function(){
    $.get($(this).val(), doOnSuccess);
});

Other ways to do this:

wrap the drop down in a form and post the form it via jQuery when a new item is selected (the controller would just receive the value of the drop down as an HTTP request parameter)
dynamically create a request every time the drop down is changed. So instead of requesting $(this).val() you would request some url you stored somewhere and pass $(this).val() as the data part: $.get($('#storeMyUrl').val(), $(this).val(), doOnSuccess)

EDIT: here's a more detailed explanation of the first alternative (done in Razor for ease, and with explicit html for clarity (hopefully)):

<form id="theForm" action="@Url.Action("A", "C")" method="POST">
    @Html.DropDownList("paramName", theSelectListAsInTheQuestion, new { id = "theDropDown" })
</form>

...

public class CController : Controller {
    [HttpPost]
    public ActionResult A (int paramName) {
        ...
    }
}

...

// and in jQuery
$('#theDropDown').change(function(event){
    var f = $('#theForm');
    $.post(f.attr('action'), f.serialize(), onSuccess);
});

edited Apr 15, 2011 at 0:15

answered Apr 14, 2011 at 21:08

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

fjxx Over a year ago

Milimetric, thanks for your comments. Can you elaborate further on the first alternative that you mention in your other ways to do this (i.e., wrapping in a Form and then grabbing the value of the drop down using HTTP request parameter)?

fjxx Over a year ago

Thanks for the detailed explanation Milimetric - however I tried it but it does not work.

Milimetric Over a year ago

What do you mean by "it does not work"? I was just coding free-hand, maybe I made a silly error, but the approach above is definitely correct.

fjxx Over a year ago

The logic is correct but I was still getting some errors. Anyways I resolved this using a javascript function which calls windows.location redirect and I called the js function in the onChange event of the dropdownlist and passed in the value of the dropdownlist to the function. Your method can also work so I will mark your answer as the resolution. Thanks.

Collectives™ on Stack Overflow

ASP.NET MVC2 Dropdownlist and URL.action

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related