web-dev-qa-db-fra.com

Invocation d'une action particulière lors de la sélection d'une liste déroulante dans MVC

J'ai une liste déroulante dans une vue MVC. En cas de changement de sélection dans la liste déroulante, je souhaite appeler une méthode d'action spécifique dans le contrôleur.

Voici ce que j'ai vu:

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

Tout est en train d'être compilé. Mais une exception d’exécution est levée lorsque je modifie la sélection déroulante, comme 

"Erreur d'exécution JScript Microsift: L'objet ne prend pas en charge la propriété ou la méthode"

Comment puis-je rediriger vers une action spécifique sur un événement de changement de sélection de liste?
Comment puis-je passer des paramètres à cette méthode d'action?

asp.net-mvcdrop-down-menuasp-net-mvc-1
23
Jaqen H'ghar

Votre approche devrait fonctionner. Le problème que vous rencontrez est que votre utilisation de this dans votre événement onchange est invalide. Essayez de remplacer vos références this.form par quelque chose comme ceci:

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

Avez-vous vraiment besoin de soumettre le formulaire? Vous pouvez rediriger:

onchange = "redirect(this.value)"

où redirect est une fonction définie par l'utilisateur:

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

Ceci est une chose jQuery. Donnez-lui un cours et branchez-vous dessus.

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

Un script approximatif pourrait ressembler à ceci:

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

À partir de l'action du contrôleur, vous allez effectuer l'appel de la même manière:

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

Une fois que vous avez fait cela, mettez une fonction Javascript sur votre page qui appelle la méthode. La façon dont vous l'appelez, cependant, dépendra de savoir s'il s'agit d'un appel AJAX ou non. C’est-à-dire que vous souhaitiez une page ou non. Pour l'appel non-AJAX:

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

S'il s'agit d'un appel AJAX:

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

Pour transmettre des paramètres à l'action, vous devez simplement vous assurer que tous les éléments de données que vous souhaitez transmettre sont contenus dans la balise <form>. Par exemple, supposons que vous souhaitiez inclure un prénom et un nom de famille dans votre liste déroulante. Dans la vue, vous ferez quelque chose comme ça:

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

Dans la fonction Javascript:

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

Comme les deux: D

Je propose un mix -J'aime beaucoup le 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
    } );
}
2
SDReyes

@Shimmy est un moyen de faire cela comme une ligne, sans définir la fonction en js?

oui vous pouvez et voici le code pour cela:

@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;" })
1
Nick Kahn