Get SelectedItem dans Dropdownlist sans FormMethod.Post

Question

J'ai une liste déroulante qui est liée à une liste dans mon modèle. Model.list_IDs

La page en cours est une page "d'édition" dans laquelle un utilisateur modifierait intrinsèquement une propriété du modèle en utilisant la liste déroulante.

@Html.DropDownListFor(model => Model.ID, Model.list_IDs, new { style = "width:250px" }) 

Les éléments contenus dans ce dropdownlist ne sont pas intuitives, je voudrais fournir un bouton, qui lorsqu'il est cliqué, récupère des informations supplémentaires via une procédure stockée (appelée à partir de l'unité de commande par l'intermédiaire d'une méthode appelée GetDetails)

Le bouton est créé via un lien d'action, et je prévois d'afficher une vue partielle (comme une fenêtre contextuelle focalisée) qui affiche les informations supplémentaires une fois que le bouton est cliqué.

@Html.ActionLink(" ", "GetDetails", new { id = Model.ID.ToString() }, new { @class = "lnkMagnify16", title = "View Details" }) 

Il est évident que Model.ID.ToString() est incorrect, car il n'enverra l'ID actuel modèle, plutôt que l'ID sélectionné dans le dropdownlist.

Comment puis-je modifier Model.ID.ToString() pour représenter l'élément sélectionné actuel de la liste déroulante?

Je sais qu'il existe un moyen de le faire en utilisant FormMethod.Post (Get selected item in DropDownList ASP.NET MVC) mais je ne veux pas recharger la page avec un bouton d'envoi. J'aimerais aussi éviter les approches «tierces» comme JavaScript si possible.

Answer 1

JavaScript n'est pas une approche "tierce partie", et c'est aussi seulement façon d'accomplir ce que vous voulez ici. Que ce soit par un formulaire standard ou via AJAX (JavaScript), vous devez faire une nouvelle demande au serveur pour obtenir les nouvelles informations que vous voulez. Maintenant, puisque tout ce que vous êtes spécifiquement après est un moyen de mettre à jour dynamiquement la valeur Model.ID dans le lien, vous pouvez le faire sans AJAX ou un poste de formulaire, mais vous devez toujours utiliser JavaScript, puisque tous les clients de comportement dynamique -side provient de JavaScript. Fondamentalement, vous devez vous lier à l'événement de modification de la liste déroulante et modifier la propriété href de votre lien.

document.getElementById('ID').addEventListener('change', function() { 
    var selectedId = this.options[this.selectedIndex].value; 
    document.getElementById('AwesomeLink').href = // alter `href` with `selectedId` 
}); 

Toutefois, ce lien va encore changer la vue entière si l'utilisateur clique dessus. Si vous voulez vraiment que l'utilisateur reste sur la page, vous devrez récupérer la réponse de ce lien en utilisant AJAX, puis soit l'ajouter à la page d'une façon ou d'une autre, que ce soit directement ou via une fenêtre modale encore plus de JavaScript pour atteindre). De même, il n'est pas clair comment la valeur Model.ID finit dans l'URL, c'est-à-dire si elle fait partie du chemin (/some/url/{id}/) ou en tant que paramètre de chaîne de requête (/some/url/?id={id}). Si c'est la première, je vous recommande de passer à la seconde, car cela facilitera beaucoup la construction de votre URL côté client.

var xhr = new XMLHttpRequest(); 
xhr.addEventListener("load", function (response) { 
    // add response.responseText to the DOM 
}); 
xhr.open("GET", "/some/url/?id=" + selectedId); 
xhr.send();