Action d'appel de mvc ASP.net sur le changement de valeur DropDown

Question

J'ai reçu une liste déroulante sur l'une de mes vues. Cette liste déroulante n'a que pour les entrées. Fondamentalement, j'ai besoin de savoir comment appeler une action lorsque la valeur de la liste déroulante est modifiée?

Ma situation est la suivante: Je crée une page de boîte de réception simple. La liste déroulante propose les options de filtrage: Afficher tout, Afficher les invitations, Afficher les réponses, etc.

Lorsque l'utilisateur sélectionne une option de filtre dans la liste déroulante, je souhaite appeler une action pour renvoyer la nouvelle vue avec les données filtrées.

Des idées? Je devine qu'il s'agira d'un script attaché au OnChange de la liste déroulante, mais je n'aurais aucune idée de la syntaxe ou comment appeler l'action MVC du script.

Merci d'avance

Answer 1

Vous devez utiliser javascript pour cela. Voici un exemple. Supposons que vous ayez le modèle de vue suivant:

public class MyViewModel 
{ 
    public IEnumerable<SelectListItem> Values { get; set; } 
} 

que vous remplir dans votre contrôleur:

[HandleError] 
public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel 
     { 
      Values = new[] 
      { 
       new Item { Value = "1", Text = "Item 1" }, 
       new Item { Value = "2", Text = "Item 2" }, 
       new Item { Value = "3", Text = "Item 3" } 
      } 
     }; 
     return View(model); 
    } 
} 

Et puis la vue qui est fortement typée à ce modèle:

<%: Html.DropDownListFor(x => x.SelectedValue, 
    new SelectList(Model.Values, "Value", "Text"), 
    new { id = "items" } 
)%> 

Le la dernière partie est de s'inscrire à l'événement de changement (en utilisant jquery dans cet exemple):

$(function() { 
    // Register for the change event of the drop down 
    $('#items').change(function() { 
     // When the value changes, get send an AJAX request to the 
     // Filter action passing the selected value and update the 
     // contents of some result div with the partial html returned 
     // by the controller action 
     $('#result').load('<%: Url.Action("filter") %>', 
      { selectedValue: $(this).val() } 
     ); 
    }); 
});