Invoking particular action on dropdown list selection in MVC

Question

I have a dropdown list in an MVC view. On selection change of dropdown list I want to call specific action method in the controller.

What I have done on view is this :

<%=Html.DropDownList("ddl", ViewData["AvailableList"] as SelectList, new { onchange = "this.form.action='MyMethod';this.form.submit();" })%>

Everything is getting compiled. But a runtime exception is thrown when i change the drop down selection, as - "Microsift JScript Runtime Error : Object doesn't support property or method"

How can i redirect to specific action on list selection change event? How can i pass parameters to this action method?

Answer 1

Do you really need to submit the form? You could redirect:

onchange = "redirect(this.value)"

where redirect is a custom defined function:

function redirect(dropDownValue) {
    window.location.href = '/myController/myAction/' + dropDownValue;
}

Answer 2

This is a jQuery thing. Give it a class and wire up to it.

Html.DropDownList("ddl", AvailableList, new { @class = "_select_change" })

A rough script might look like this:

$('._select_change').change(function() { $.post(ctrlUrl); })

Answer 3

Like both : D

I propose a mix -I like a lot the jQuery.

$('ddl').change(
 function() {
  // This contains your selected option val
  $(this).val();

// so you can do domething like...
  $.post(
    $(this).val(),
    { Param1: xxxx,
      Param2: xxxx,
      Param3: xxxx },
    function(data) {
     // handle your call here. 'data' contains the response
    } );
}

Answer 4

From the controller action, you're going to make the call the same way:

<%= Html.DropDownList(ddl, ViewData["items"] as SelectList, new { onchange = string.format("doSomething({0}); return false;", action) }) %>

Once you do that, put a Javascript function on your page that calls the method. How you call it, however, is going to depend on whether it's an AJAX call or not. That is, whether you want a page round-trip or not. For the non-AJAX call:

function doSomething(action) {
    window.location.href = action;
}

If it's an AJAX call:

function doSomething(action) {
    $.load(action);
}

To pass parameters to the action, you just need to make sure that all of the data elements you want to pass are contained within the <form> tag. For example, let's say you want to include a first and last name with your drop down list. In the view, you'll do something like this:

<%= using (Html.BeginForm()) 
   { %>
    <table>
        <tr>
            <td>First Name:</td>
            <td><%= Html.TextBox("FirstName") %></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><%= Html.TextBox("LastName") %></td>
        </tr>
        <tr>
            <td>Assign to:</td>
            <td><%= Html.DropDownList(ddl, ViewData["items"] as SelectList, 
                new { onchange = string.format("doSomething({0}); return false;", ViewData["action"]) }) %></td>
        <tr>
    </table>
<% } %>

In the Javascript function:

function doSomething(action) {
    var firstName = $('#FirstName').val();
    var lastName = $('#LastName').val();
    $.load(action, { first: firstName, last: lastName });
}

Answer 5

Your approach should work. The issue you're encountering is your use of this in your onchange event is invalid. In Javascript, this refers to the current function (your inline onchange function in this case). Therefore, this.form is undefined. Try replacing your this.form references; something like this:

<%= Html.DropDownList(
        "ddl", ViewData["AvailableList"] as SelectList, 
        new { onchange = @"
            var form = document.forms[0]; 
            form.action='MyMethod';
            form.submit();" 
        } ) %>