web-dev-qa-db-fra.com

Postback MVC 4 sur le changement de liste déroulante

J'utilise MVC4 et j'ai un menu à l'intérieur d'une mise en page. une partie de mon menu consiste en une liste déroulante dans laquelle un utilisateur peut choisir entre des fournisseurs disponibles.

<div class="row">
    <div class="col-md-4">
    @Html.DropDownListFor(x=> x.usr.DatUsrs.IdProvider, new SelectList(Lista, "Value","Text"))
    </div>
    <div class="col-md-3">
      Credit
      @Html.DisplayTextFor(x=> x.usrSelectedProvider.AvailiableCredit)
    </div>
    <div class="col-md-3">
      TEXT
    </div>
    <div class="col-md-2">
      Closing Day  @Html.DisplayTextFor(m=> m.usrSelectedProvider.ClosingDay)
    </div>
  </div>

le problème que je rencontre est le suivant: lorsqu'un utilisateur modifie l'élément sélectionné dans la liste déroulante, je souhaite créer une publication afin de pouvoir charger AvailiableCredit et ClosingDay. Dans les formulaires Web, je pouvais le faire avec autopostback, mais je n'ai pas trouvé de moyen de le faire dans MVC4.

asp.net-mvcasp.net-mvc-4
11
mmilan

Il existe plusieurs façons de procéder, mais vous devez d’abord comprendre la structure de ce que vous faites.

Ce n'est pas un "post back" dans MVC (ou, vraiment, dans HTTP en général ... WebForms vous a menti). Vous essayez simplement de poster des données sur le serveur et de recevoir une réponse. Dans le framework MVC, la cible de cette publication serait une action de contrôleur. La réponse peut être différente, en fonction de l’approche choisie.

Je recommande d'écrire du JavaScript pour effectuer cette tâche via AJAX. Ainsi, la page ne s'actualise pas et vous envoyez/recevez uniquement les données pertinentes pour la tâche spécifique à accomplir. ASP.NET MVC est livré avec jQuery, je vais donc supposer l'utilisation de jQuery dans ce cas.

Tout d'abord, vous devez vous lier à l'événement change pour cet élément select. Il est probablement identifié avec la variable id "IdProvider", mais vous voudrez vérifier le code HTML rendu pour vous en assurer. En supposant que ce soit le cas, vous pouvez utiliser quelque chose comme ceci:

$('#IdProvider').change(function () {
    // respond to the change event in here
});

Vous pouvez maintenant appeler AJAX vers le serveur de ce gestionnaire. Ce pourrait être quelque chose d'aussi simple que:

var selectedValue = $('#IdProvider').val();
$.post('@Url.Action("MyAction", "MyController")', { selection : selectedValue }, function (data) {
    // handle the server response here
});

Avec cela, l'action du contrôleur aurait la valeur sélectionnée disponible dans un argument appelé selection:

public ActionResult MyAction(string selection)
{
    // do your server-side processing and get your data
    return Json(data);
}

Cette action retourne les données au format Json, car elles sont utilisées par JavaScript sur le client. Ainsi, lors du traitement de la réponse dans l'appel $.post() ci-dessus, vous obtiendrez ces données dans la valeur data.

Ce que vous faites avec ces données dans le code JavaScript est alors à vous. Si c'est une structure simple avec les deux valeurs que vous recherchez, cela pourrait être aussi simple que ceci:

$('#AvailableCredit').text(data.AvailableCredit);
$('#ClosingDay').text(data.ClosingDay);

Sinon, vous pourriez encapsuler l'élément select dans une form et publier l'intégralité du texte lorsque la sélection change, et l'action du contrôleur voudrait alors renvoyer une View avec les données renseignées dans cette vue. Mais c'est probablement exagéré puisque tout ce que vous voulez faire, c'est envoyer une valeur et recevoir deux valeurs.

23
David

Avertissement : Cette approche consiste à soumettre le formulaire complet. Si possible, il est préférable d’effectuer une opération Ajax plutôt que de soumettre le formulaire. Réponse de David explique comment faire un appel Ajax.

Si on ajoute la classe data-on-change-submit à la liste de sélection (ou à tout élément d’entrée devant déclencher la publication). Ensuite, il est possible d'ajouter un gestionnaire d'événements. qui soumettra le formulaire de modification, comme suit. 

$(function () {
    $(".data-on-change-submit")
        .change(function ()
                {
                   var form = button.closest("form");
                   form.submit();
                })
});
1
Abhijeet Nagre

Dans MVC, il n'est pas nécessaire de poster, Lorsque l'utilisateur sélectionne dans le menu déroulant, redirigez de nouveau avec la même action, mais cette fois l'action aura un attribut HttpPost (ce sera votre publication). Ensuite, vous pouvez faire ce que vous voulez et refaire le rendu de la même vue, mais cette fois avec un nouveau modèle de vue (avec vos nouvelles données chargées: AvailiableCredit et ClosingDay).

    public ActionResult DisplayMainView()
    {    
      LoadDataOnDropDown();    
      return View();    
    }

dans le menu déroulant lorsqu'un utilisateur sélectionne la valeur, redirige vers l'action (avec httpPost) et donne la valeur dont vous avez besoin pour recharger les données.

[HttpPost]
public ActionResult DisplayMainView(string selectedValueFromDropdown) {

// get AvailiableCredit and ClosingDay  based on selection
ViewBag.AvailiableCredit = myService.GetAvailiableCredit (selectedValueFromDropdown);
ViewBag.ClosingDay   = myService.GetClosingDay (selectedValueFromDropdown);

return View;

}

Ceci est un pseudo-code qui illustre comment utiliser HttpPost pour simuler la publication WebForm . N.B.:I. J'ai utilisé le viewbag mais je suggérerais d'utiliser un modèle de vue distinct pour chaque vue que vous créez.

0
Oualid KTATA