asp.net mvc - net - Invocar una acción particular en la selección de la lista desplegable en MVC

select option c# mvc

Question

Tengo una lista desplegable en una vista MVC. Al seleccionar el cambio de la lista desplegable, quiero llamar al método de acción específico en el controlador.

Lo que he hecho a la vista es esto:

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

Todo se está compilando. Pero se produce una excepción de tiempo de ejecución cuando cambio la selección desplegable, como

"Microsift JScript Runtime Error: el objeto no admite propiedad o método"

¿Cómo puedo redirigir a una acción específica en el evento de cambio de selección de lista?
¿Cómo puedo pasar parámetros a este método de acción?

Answer 1

@Shimmy, ¿hay una manera de hacer esto como una sola línea, sin definir la función en js?

Si puedes y aquí está el código para eso:

@Html.DropDownListFor(m => m.Name, new SelectList((System.Collections.IEnumerable)ViewBag.DropDownName, "Value", "Text"), new { @class = "form-control", onchange = "document.location.href = ''/Home/Employee?c='' + this.options[this.selectedIndex].value;" })

Answer 2

¿Realmente necesitas enviar el formulario? Usted podría redirigir:

onchange = "redirect(this.value)"

donde redirect es una función definida personalizada:

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

Answer 3

Como ambos: D

Propongo una mezcla -me gusta mucho la 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

Desde la acción del controlador, harás la llamada de la misma manera:

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

Una vez que lo haga, ponga una función de Javascript en su página que llame al método. Sin embargo, cómo lo llame, dependerá de si se trata de una llamada AJAX o no. Es decir, si quieres una página de ida y vuelta o no. Para la llamada no AJAX:

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

Si es una llamada AJAX:

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

Para pasar parámetros a la acción, solo necesita asegurarse de que todos los elementos de datos que desea pasar estén contenidos dentro de la etiqueta <form> . Por ejemplo, supongamos que desea incluir un nombre y un apellido en su lista desplegable. En la vista, harás algo como esto:

<%= 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>
<% } %>

En la función de Javascript:

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

Answer 5

Esto es una cosa jQuery. Dale una clase y cabléalo.

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

Un guión en bruto podría tener este aspecto:

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

Answer 6

Su enfoque debería funcionar. El problema que está encontrando es que su uso de this en su evento onchange no es válido. Intenta reemplazar tus referencias de this.form con algo como esto:

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