MVC 3 DropDownList to Redirect to Diff Action OnChange?

Question

I'm trying to figure out how to get a @Html.DropDownList to direct to another Action on the onChange() event of the select it creates, the action name being stored in the option values of the select list. The closet I've gotten so far is this:

View:

@using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
<h5>Select service to test:</h5>
@Html.DropDownList("ddl", new SelectList(Model.Services, "MvcActionName", "ServiceName"), 
new {
    onchange = @"
    var form = document.forms[0];
    var action = $('#ddl').val();                                 
    form.action=action;
    form.submit();"
})

}

And what it emits is this:

<form action="/" method="get">    <h5>Select service to test:</h5>
    <select id="ddl" name="ddl" onchange="
            var form = document.forms[0];
            var action = $("#ddl").val();                                 
            form.action=action;
            form.submit();"><option value="">Ping Service</option>
    <option value="Data">Data Service</option>
    </select>
</form>

But all this does is try to call "localhost/Data" and fail because it should be calling "localhost/Home/Data". I'm using the standard MVC3 routing setup, but so far I haven't been able to make a change there that causes the BeginForm helper to emit a better form block either.

Then again, I'm not sure routing is even the issue or if I'm taking a poor path to get to where I want to be going. Any help or guidance would be greatly appreciated.

Possible duplicate with http://stackoverflow.com/questions/3240833/changing-a-page-from-dropdownlist-using-jquery — griegs, Mar 27 '13 at 23:49
Argh! Wish I would have found that answer earlier, would have saved me some serious time. That answer wasn't exactly the way I wanted to do it, but I was probably barking up the wrong tree to begin with. Thanks for the find, I only had to make a few tweaks to make that work for me. I'll post a cleaned up answer on the off chance someone finds it useful. — S Walsh, Mar 28 '13 at 02:58

score 2 · Answer 1 · edited May 23 '17 at 12:11

Update Mar/28/2013: I've updated the jquery usage in this answer of .attr() with .prop(), as I found that .attr() did not work as expected in Chrome. Apparently this is a change in jquery, and is the way to go from this point on. For more info see this discussion:.prop() vs .attr()

Updated Answer:

Thanks again to Griegs for the link, here's what I ended up with in case this saves anyone else some time:

Extra info - I wanted the "Action Selecting" dropdown to appear on any page in it's own list so I put it in the layout. The only hiccup was that I had to set the correct "selected" option in js on each page as it was loaded, but that wasn't a big deal.

Here's the Layout View:

<body>
    <h4>Action Selector:</h4>
    <select id="ServiceDropDown" name="ServiceDropDown">
        <option value="Index">Ping Service</option> 
        <option value="Data">Data Service</option>
    </select>
    <br />

    @RenderBody()
</body>
</html>

The Index View:

<h2>Index</h2>

<script type="text/javascript">
    $(document).ready(function () {
        SetupServicesDropDown('Index');
    });
</script>

And the other view in my proof of concept (Same as Index really, I just wanted to highlight the difference in param to the function call):

<h2>Data</h2>

<script type="text/javascript">
    $(document).ready(function () {
        SetupServicesDropDown('Data');
    });
</script>

And I put the function that makes it all work into a separate file:

function SetupServicesDropDown(optionValue) {
    // Set correct option in ServiceDropDown
    $('#ServiceDropDown > option[value = ' + optionValue + ']').prop("selected", "selected");

    // Event handler for ServiceDropDown.onChange()
    // Redirects to new Action in same Controller, with Action name of the selected option value
    $('#ServiceDropDown').change(function () {
        var target = "/Home/" + $("#ServiceDropDown option:selected").prop('value');
        window.location = target;
    });
}

So long as you don't mind having to call the setup function on each page, it works like a charm. Thanks again.

MVC 3 DropDownList to Redirect to Diff Action OnChange?

1 Answers1