web-dev-qa-db-fra.com

Remplir les options de la boîte de sélection au clic avec Javascript / Jquery avec les données Json

J'apprends toujours Jquery et un peu confus avec la tâche que j'ai sur les mains.

Cela semble être une tâche simple ... J'ai une boîte que je veux remplir avec des options en cliquant. Je ne veux pas qu'il soit rempli lors du chargement de la page, uniquement lorsque quelqu'un demande réellement à voir la liste. De plus, il ne doit être rempli qu'une seule fois. Je ne veux vraiment pas que la demande sorte CHAQUE fois que quelqu'un élargit la liste.

J'imagine que j'aurai probablement un appel de fonction dans mon élément Select

<select id="usersList" name="usersList" onclick="getUsers()">

Et puis avoir une fonction Javascript getUsers () faire un appel à mon ActionMethod Json GetUsers () pour obtenir cette liste. Comment ?

Quelque chose comme...?

function getUsers()
{
 getJSON("/Users/GetUsers", null, function (data){}
}

ou JQuery? ...

$("usersList").click(
  $.getJSON("/Users/GetUsers", null, function (data) {}
  )

Je dois mentionner que j'ai vu ce message: remplir la liste de sélection avec les données json dans JQuery lorsque la liste de sélection est chargée (pas le document)

Mais j'ai besoin d'aide pour rassembler tout ça s'il vous plaît. Merci d'avance!

jqueryajaxasp.net-mvcjsonselect
17
InspiredBy

Voici le javascript que j'utiliserais pour remplir la case de sélection.

$.getJSON("/Users/GetUsers", null, function(data) {
    $("#UsersList option").remove(); // Remove all <option> child tags.
    $.each(data.Users, function(index, item) { // Iterates through a collection
        $("#UsersList").append( // Append an object to the inside of the select box
            $("<option></option>") // Yes you can do this.
                .text(item.Description)
                .val(item.Id)
        );
    });
});

Je recommanderais que vous déclenchiez cela lors du chargement de la page et non lorsque l'utilisateur clique sur la case de sélection. jQuery AJAX est asynchrone par défaut (comme il se doit) donc il y aura un moment ou deux où la case de sélection sera vide et cela peut grandement dérouter l'utilisateur.

Était-ce là l'étendue de votre question ou aviez-vous également besoin d'aide avec le côté MVC? Si vous utilisez ASP.Net MVC, il existe en fait un type de résultat spécifique de JsonResult qui rend la création de méthodes de contrôleur JSON un peu plus simple car elles ne nécessitent pas de vues correspondantes. Il vous permet également d'utiliser des structures de données anonymes, ce qui rend les projections spécifiques à la méthode un peu plus simples.

EDIT Voici la méthode de base pour retourner une structure JSON que le code jQuery ci-dessus comprendra. Notez que les propriétés u.Username et u.ID dépend de votre objet Users.

[HttpPost] 
public JsonResult GetUsers() { 
    return Json(new {
        Users = from u in _usersRepository.Get()
                select new { Description = u.Username, ID = u.ID }
    }); 
}

Je recommanderais cependant que vous abandonniez cette approche dès que possible et que vous optiez pour une structure de message JSON standard. Celui que j'utilise est quelque chose comme ceci:

{
    Success: bool,
    LoggedIn: bool,
    ClientErrors: [
        { Number: int, Description: string, Parameter: string },
        { Number: int, Description: string, Parameter: string }...
    ],
    ServerErrors: [
        { Id: int, Message: string },
        { Id: int, Message: string }...
    ],
    Data: {}
}

Voici quelques raisons pour cela:

  1. Ne vous y trompez pas, votre bibliothèque de méthodes JSON est en quelque sorte un protocole et, à ce titre, elle bénéficie d'un en-tête standard.
  2. La gestion des erreurs en profite le plus. Avoir une méthode cohérente pour faire savoir à l'utilisateur que quelque chose s'est mal passé est inestimable.
  3. Il est très important de faire la différence entre les erreurs du client (mauvais nom d'utilisateur, mot de passe incorrect, etc.) et les erreurs du serveur (base de données hors ligne). L'un peut être corrigé par l'utilisateur, l'autre non.
  4. Les erreurs client doivent renvoyer non seulement un message mais le paramètre de la méthode qui le provoque (s'il s'applique) afin que vous puissiez facilement afficher ces messages d'erreur à côté des champs de saisie appropriés.
  5. Les erreurs client doivent également fournir un numéro unique (par méthode) qui identifie l'erreur. Cela permet un support multilingue.
  6. Les erreurs de serveur doivent fournir l'ID de l'erreur qui a été enregistrée. De cette façon, vous pouvez autoriser l'utilisateur à contacter le support et à référencer l'erreur particulière dans laquelle il se trouve.
  7. Le booléen connecté permet à toute page utilisant des méthodes nécessitant une authentification de rediriger facilement l'utilisateur vers l'écran de connexion si nécessaire, car le résultat d'une action de redirection d'une méthode JSON n'aura aucun effet.
  8. Enfin, le champ Données est l'endroit où les données spécifiques à la méthode doivent être fournies.

Vous ne devez en aucun cas considérer ma structure comme la façon de le faire. De toute évidence, les besoins de votre application peuvent être très différents des miens. La cohérence, plus que toute structure particulière est la leçon ici.

EDIT: 06/01/2016 - Vu que les gens regardent toujours cette réponse. En ce qui concerne le remplissage de la liste déroulante, je recommanderais d'envisager l'utilisation d'un cadre de liaison bidirectionnel. Personnellement, je préfère Knockout.JS pour sa facilité et sa légèreté, bien qu'Angular.JS fasse également le travail. En dehors de cela, le reste de cette réponse est encore assez à jour.

EDIT: 8/10/2016 - Il manquait une virgule au code.

38
Spencer Ruport

J'utiliserais l'option jQuery.

// You are missing the new anonymous function call
$("#usersList").click(function() {
    // If the select list is empty:
    if ($(this).find("option").size() > 0) {
        // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/
        $.getJSON("/Users/GetUsers.php", null, function (data) {
            $.each(data.items, function(i,item){
                // Create and append the new options into the select list
                $("#usersList").append("<option value="+item.id+">"+item.yourName+"</option>");
            });
        });
    }
});

Étant donné que les opérations append() sont relativement "coûteuses", vous pouvez également créer une chaîne contenant les informations et les ajouter une seule fois comme ceci:

var collaboration = "";
$.each(data.items, function(i,item){
    collaboration += "<option value="+item.id+">"+item.yourName+"</option>";
});
$("#usersList").append(collaboration);
...

Voici un jsfiddle qui montre comment déterminer si la liste de sélection est vide.

5
veeTrain